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.
Related
I have a component with children. I would like these to be shown or not depending on the press of a button. I can do this by creating a state variable childrenVisible, and then rendering or not depending on it.
But I have noticed that if I have state on a child Component it will get reset when toggling childrenVisible. I think this is because components gets destroyed when not rendered on a re-render.
I would like to keep the elements around, so I can keep their state, but just hide them depending on childrenVisible. Is this possible in React?
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 understand, why I have to interact with DOM through dispatcher in cases when I fetching data from database.
But should i use Flux way to do something like this:
Parent component have been rendered. It has two child components. One of them initially rendered, the second child should replace first child onClick on some button. All components are static (no database connection).
So, how should I implement this action onClick and replace first child with second one?
Dispatch event once the onClick has been fired, parent component should listen and re-render the new item.