Is it easier than pass argument from parent to child and turn on binding to know state of a component changed?
https://dev.to/zeyadetman/how-to-pass-state-between-components-in-reactjs-2pg1
Related
I have a child component sitting inside a parent component. Parent component has some information, say I, which keeps changing based on user actions. In child component I have a button, and I want to change state of this button based on current value of I.
What is idiomatic way of doing it in scalajs-react/React?
Pass it via props and optionally use Reusability to prevent the child components from needlessly re-rendering too often.
I am new to React.
I have two functional components: parent and child. I need to access child state from parent but only when certain button in parent component is clicked. The child component maintains its own state using useState hook. I do not want to pass any callbacks from parent to child to avoid duplicating child state in the parent component.
I thought I can create a child ref in the parent use useRef hook and then access the child properties using ref.current but it seems not possible.
you can not access the state of a component by its ref.
and I think there is no way to do so except passing a callback function to the child to sync states. but I recommend you to store the state in parent and change it there then pass it as prop to the child, it also prevents duplication of state.
I have a main component which has 3 child components which are conditionally displayed. There are arrow buttons to change which child component is rendered. One of the children has states which need to persist even when the component is no longer the child which is displayed.
The problem is, I don't feel like the state data from this child component should be passed back to the parent as the method to maintain state. In this scenario i want the child's state to only live in the child component. Is there a method i could use to maintain this state? For example,
will the state persist if i render each child but use CSS (or some other option) to conditionally hide the non-active child?
You can add display: none, and the component will still be mounted and will keep the state. Although this might work I recommend lifting the state up to the parent. It seems like it should live there. Otherwise you can create a context wrapping the 3 children and manage the state there. Then in each child can subscribe to that context, but it seems like an over kill. I recommend lifting the state to the parent
I have a table component, with list of items.
By changing an item in the list, I see that whole table is rerender.
I tried to put shouldComponentUpdate, and by returning false I see that the Row components are not rerendered.
Do I have to rerender the parent in order to rerender child components?
https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate
Returning false does not prevent child components from re-rendering when their state changes.
If the data in the child is passed as a property from the parent, then yes, you will have to rerender the parent to rerender the child. The reason for this is that if your child is reliant on props, and the parent does not render, then those props are never changed for the child as it only receives changed props when the parent renders and gives it new ones based on its own state or props. I suspect this is your problem. Rerendering the parent is not usually a performance problem in React.
If the children had their own state that was changing then not rerendering the parent would be ok. Another option if you are using a state container is to connect the children directly to the state and then their props get updated when the state container updates the relevant state, but that is somewhat beyond the scope of this question.
In general, it is best not to use shouldComponentUpdate unless performance demands it and then only with very careful consideration.
I am using ui-router for maintaining the state in my application. The application has one abstract parent state and few child states. Parent state has got some resolves (working fine), now since I have a parent abstract state I can only navigate to a specific child which is updated in the $state.current property by default when I navigate to child state.
The Resolve in the parent might give some data based on which I don't want to navigate to the current child but to some other state. Like an auth error kind of use case, although I can use $state.go() to navigation to auth state but current child state still gets fired, any way to update the current child state and not let it fire the default child state.