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.
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.
In React, if a child component renders, does the parent component render too?
Or only the child component itself get rendered?
Short Answer: React doesn't re-render parent if the child component re-renders
Long Answer
The way re-renders and diffing works with react is through a virtual dom and a reconcilation process.
React creates a tree like structure of your app hierarchy and compares code levelwise
So at any level if there is a change, react triggers render function of all children below it in the hierarchy. Obviously triggering render function doesn't mean things change in the dom only changes relevant to elements are being updated in the dom.
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
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
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.