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?
Related
I'm an embedded developer who is new to React and am struggling a bit with the behaviour of child components and nested child components.
I understand that for any component to be re-rendered, the state must change. I am using an example of a menu component that has an item component within. When some global level event happens, I want to change the text displayed by the item components.
Here is a fiddle that shows some code that I would expect to work:
https://codesandbox.io/s/dark-rain-8mfsp?file=/src/App.tsx
On clicking the div, the menu's setText function gets called, which calls into the item component, setting the state. This state is used in the render function of the item component, so I would expect both item and menu to be re-rendered.
Instead I get an error saying that I can't set the state of an object that hasn't yet been mounted. I would have thought it had been mounted..
Perhaps the way I have linked the declared components with those in the render functions by calling this.componentname.render() is the issue - but how else could that be done?
Thanks in advance!
Here is a working version of your sandbox.
https://codesandbox.io/s/lucid-bird-qecj0?file=/src/App.tsx:0-899
I see that you are new to react. I would suggest you use hooks instead of class components.
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 noticed that when you use useState in a hook and then use setState to change the value that is being cached, the hook will be called again and re-render the component. While this may be desired most of the time, I have one case where I don't want to re-render when the state changes. This case is when you have a navigation menu (tabs) at the top of the page and when you click on a tab, it shows content in a pane beneath it. I really only want to hide the content for the tab that is currently shown and then display the content for the tab that is selected. When content is hidden, this is essentially setting the css "display" style to "none". This is desirable to preserve the state of the content's pane and also avoid effects like retrieving data.
I can think of one solution to handle this but it does require splitting the components into isolated modules. I am curious though whether there is a way to change state but without having the side effect of a component being re-rendered.
I've got an app that shows a list of items in a grid. Some of the items have an embedded video which flashes or stops playing (if it's already playing) when it's rerendered.
The list is maintained in Redux. When the user scrolls to the bottom of the page it loads more results which causes the Redux state to update which, in turn, causes the grid to rerender all of the items plus the new items.
I'm looking for a solution that will just add more items to the end of the grid instead of rerendering everything.
I've got a component that holds the entire grid. It renders a component for each item in the grid. In each item I have a component that holds the embedded video.
Any ideas?
If each item in the grid is a component, like you said, you should use React.memo (for functional compoents) or Reat.PureComponent (for class components). It will prevent the component from rerendering if the props have not changed. I can't guarantee your videos will keep playing, but if the only reason they stop playing or flash is because the component is being rerendered then it should fix the problem.
Maybe this can help: when passing information from redux to your component, try to update the list of the objects instead of sending a new one
It's redux UpdateObject method.
I set my component to scale 1.2x when hovered over, however, when the component is re-rendered by React while I'm hovering over it, it loses the hover state for a moment and becomes small, then back to 1.2x, (see image). I want it to stay scaled. How can I work around this?
I had this same issue, and it turns out I was declaring a functional component within a different functional component (as a helper component). When the parent state changed, it re-created the internal component, causing the actual DOM to change.
Moving the internal component outside the main functional component fixed the issue.
So this was a problem because I subscribed the whole React render function to the Redux store, causing every action to force a re-render. This was fixed by using react-redux connect instead of subscribing the render function.
Create a flexbox component on the parent of this component and add the onHover function on it.
Try using react-redux's connect which doesn't re-render on every action.
Because , when you use subscribe the render function to the Redux store,
it causes the every action to forcefully re-render.