I want to keep the state in the component, but I need to read it in the parent LiveView as well.
I know that I can use the send() function to push the state to the parent, but this way the state will be duplicated.
I want to keep the state in the component, but I need to read it in the parent LiveView as well.
I know that I can use the send() function to push the state to the parent, but this way the state will be duplicated.
If the state needs to be in both the parent and child component, why not keep it in the parent and pass it to the child instead? No need to use send
.
If I put that state to the parent, then I will have to put there event handlers as well, but I wanted to decouple the components.
If you use a stateful component you can use handle_event/3
within the component, you’ll just need to make sure you target the event handlers properly so the events reach the component. So you should be able to hold the state in the parent LV, pass it to the component, and locate the event logic inside the component. One benefit of passing state to the component from the parent is your component can respond to changes to that state that happen outside of it (e.g. events handled by the parent LV).
That’s how I implemented it initially. But this way I have to update the state in the parent from the component event handler, by sending info to the parent process. In practice, it causes the rerendering to be twice as long as if updated the state directly in the parent. So if my latency is 130 ms, it takes about 260 ms to render the templates with new state.