I have 3 components:
Parent
Form
Preview
With every change on Form Component, I pass the values to Parent, from Parent to Preview component. And it works.
The problem is when I change values on Form, the Preview component show like a flicker (because it's re-rendering the preview component). How can avoid this?
Maybe not updating preview component for every small change? How can I do it?
Component diagram:
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 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 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.
I am currently using ant design tabs to control the tabs and within each tab I inserted a custom component within the TabPane. But the child custom component works quite unexpected. Before I clicked the tab title, the child component will not load (the constructor and componentDidMount will not be fired), BUT I want to load some data once the child component mounted to the tab instead of being shown.
Why it happened? ~~Ant Design~~ for performance concern?
Currently I am moving the data loading to the parent and handle them there. But still quite curious about the loading issue caused by ant design.
I trying to build a simple slide show using react (I am learning react) and have a question regarding the component composition/information flow.
I have a slides component which has two child components. One child, the slideContainer, displays the slide and the other component, the slideNavigation displays the navigation buttons (back/next).
The slides component receives the slides collection as prop and has the currentSlide as State. The slideNavigation component receives the currentSlide, the slides collection and the setCurrentSlide callback as props.
The slideNavigation component determines the new currentSlide based upon the button that was clicked, the slide collection and the currentSlide. The new currentSlide is returned to the slides component using the callBack. The slides component updates the state accordingly and passes it to the display component, which displays the new slide. See the code of the slides component below.
My question: It seems a bit weird to determine the new currentSlide in the navigation component, pass to back to its parent which passes it again to the navigation component where it just came from. Am i doing something wrong, are the components correctly composed??
You should add callbacks/props to your slidenavigation like:
onPrevSlideButtonClicked
onNextSlideButtonClicked
Then in your parent component you will add callbacks for each event and calculate the new slide (because that is where all your info is stored).
The only change that you can make is to move the determination of the new slide, from the slideNavigation to the parent slides component.
The slides component should hold the state and be responsible for managing it. It contains 2 dumb child components, the slideContainer and the slideNavigation. These child components should know nothing about what is going on; the Container should just show what it receives from the parent and the navigation should just return events that occur (the next and previous button clicks)
It should be the job of the parent slides container to manage the state transition by sending props down to the slideNavigation component, which would be tied to the buttons for the next and previous actions.