Are there any hooks fired off when one of the components children is removed (not rendered due to conditional) and then added back again? The change happens due to state update somewhere above the component tree, but I would like to intercept it somehow on half way up.
For some reason I had an impression that componentDidUpdate should fire in such case, but now I see that it only goes off when update happens to the components state or the state of one of its children...?
Each component has several “lifecycle methods” that you can override to run code at particular times in the process.
The three lifecycle methods are mounting, updating and unmounting.
Updating
An update can be caused by changes to props or state. These methods are called when a component is being re-rendered
So when a child component is not rendered it doesn't fall in any of these categories, ie mounting, unmounting or updating. Lifecycle method exists for components and any change that happens in the child components does not affect the parent component lifecycle methods in any way.
For updating to happen for a particular component, as mentioned above a change in state or props of that particular component has to happen
Read The Component Lifecycle from react docs.
Related
I'm new to react. I'm going through their docs to understand how react works. So it was mentioned that when state/props/setState() changes/called, react rerenders the entire component.
Also, I read that react elements are immutable and they are rendered only when there is a change. So when react tries to render a component it actually traverses through all the elements checks for differences and renders only those elements whose data is changed. It won't simply re-render the entire component.
Am I right regarding this? Or is my understanding wrong?
I read that React elements are immutable and they are rendered only when there is a change.
Saying that React elements are immutable is not true, you need to treat them as immutable, especially component's state and props.
So when React tries to render a component it actually traverses through all the elements checks for differences and renders only those elements whose data is changed.
The default behaviour is to render all sub tree when the parent rerendered by calling setState (which triggers Reconciliation on component's sub tree).
So saying it will render components on "data change" is not true, they will rerender anyway by default, even if the "data" didn't change.
On saying "data is changed" we mean on props change (shallow comparison by default, use memoization to change it).
We can use key prop to help with the reconciliation process.
You are right, react re-renders the component when props or state changes.
That being said, when a child component received new props, react does not check if the props have changed when you use React.Component, it just re-renders even if you pass same props again.
In order to make components render only if they receive different props you can use React.PureComponent in case of class components or you can wrap the component with React.memo() in case of functional components.
I believe a clearer way to summarize when React components re-render would be:
React components re-render when, and only when:
Their state changes (via setState() or useState())
They are passed new props;
Their parent component re-renders.
Caveats:
You must update state correctly for the component to re-render, i.e. via setState() or useState(). If state changes via other, "illegal" means, such as directly accessing state, React won't notice, and won't re-render the component.
React props are read-only, so when we say "when a component's props change," we really mean when the component is passed props with changed values. The props should not be mutated within the component.
If you use useMemo() or React.memo(), then a child component will only re-render when the parent component re-renders if the props it receives have changed.
It's important to distinguish between re-rendering the virtual DOM and updating the actual DOM. Just because a component re-renders doesn't mean it's updated the DOM. When a component re-renders, React compares the new version to the previous, and only updates the actual DOM if something has changed 1, 2.
Nothing has made this clearer for me than this cheat sheet by A. Sidorenko.
Edit:
Essentially yes any state change will trigger a re-render. This includes the component where the state change was initiated and all its children. For instance, if your composition is:
A > B > C
If the state for A is updated then A, B, and C will get re-rendered. There are ways to prevent re-rendering subcomponents (e.g. memo, useMemo) so I point you the cheat sheet referred to above for the complete details.
Suppose that in a react component, two siblings are rendered conditionally, meaning that one will get unmounted when the other gets rendered. In this scenario, is it guaranteed that componentDidMount method of the rendered component gets executed before other’s componentWillUnmount?
Will componentWillMount run again if component is re-rendered because of parent component?
No, componentWillMount is called only once.
Also, componentDidMount is called only once.
componentDidUpdate is called on every re-render.
To correctly understand about the react lifecycle methods you can go through this link.
https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1
The short answer is NO
It's called once right before your component is about to be rendered to the DOM.
The long answer is:
componentWillMount
Your component is going to appear on the screen very shortly. That chunky render function, with all its beautifully off-putting JSX, is about to be called.
Most Common Use Case: App configuration in your root component.
Can call setState: Yes, but don't. Use the default state instead.
componentDidMount
Here is where you load in your data. ComponentDidMount is also where you can do all the fun things you couldn’t do when there was no component to play with. Basically, here you want to do all the setup you couldn’t do without a DOM, and start getting all the data you need. Most Common Use Case: Starting AJAX calls to load in data for your component.
componentWillReceiveProps
Perhaps some data that was loaded in by a parent component’s componentDidMount finally arrived and is being passed down. Before our component does anything with the new props, componentWillReceiveProps is called, with the next props as the argument.
shouldComponentUpdate
shouldComponentUpdate should always return a boolean — an answer to the question, “should I re-render?” Yes, little component, you should. The default is that it always returns true. It's an awesome place to improve performance.
componentWillUpdate
Most Common Use Case: Used instead of componentWillReceiveProps on a component that also has shouldComponentUpdate (but no access to previous props). It’s basically the same as componentWillReceiveProps, except you are not allowed to call this.setState.
componentDidUpdate
Here we can do the same stuff we did in componentDidMount — reset our masonry layout, redraw our canvas, etc. Basically, we use it when it's all said and done, but we don’t want to waste time to redraw the canvas every time it updates. Most Common Use Case: Updating the DOM in response to prop or state changes.
componentWillUnmount
Here you can cancel any outgoing network requests, or remove all event listeners associated with the component. Basically, clean up anything to do that solely involves the component in question — when it’s gone, it should be completely gone.
I was wondering if a connect()ed sub-component will re-render if its parent returns false in shouldComponentUpdate?
Say, we have a component tree looking like this
connect(Foo extends PureComponent)
DumbBar
connect(Baz extends PureComponent)
So neither Baz, nor Foo, should re-render if their own props, supplied to them by mapStateToProps, keeps the same. But what happens if the state of the redux store changes and the connect()ed Baz component is notified of a state change and is supplied with new props? Will it re-render, or will the hierarchical update model of React prevent anything from rendering?
Or is this whole question perhaps a bit off, since it's not possible for a child components new rendering to take effect without affecting the ancestors - forcing the ancestors to re-render if a child changes?
If the last point is true, then putting a connect-ed component as a child of a PureComponent is lethal, as it breaks all optimizations you thought were in place, causing re-renders in other places in the sub-tree of the parent.
Yes, it will re-render.
That's the whole idea of using connect - you don't have to pass the props and you can embed it anywhere - it will take care of keeping your component up-to-date.
Each component built with connect will wire up it's own subscription to be notified of changes to the redux store.
So if only the props supplied to mapStateToProps for the child component have changed then the child component will re-render whereas the parent component will not.
You can see this yourself by adding a simple console.log to the render function.
I have a component, and its componentDidUpdate seems to trigger for no reason. It's a child component, has no state. Even though the prevProps and this.props are the exact same its triggering, is there any reason for this? I thought update should only trigger when there is a change in the props/state?
componentDidUpdate() is fired every time the parent component re-renders (and passes in new props). And in stateful components also whenever setState() is fired.
Even if old prevprops and this.props are exactly the same, componentDidUpdate() is still fired if the parent component re-renders.
If you want to prevent react to enter a render cycle, you should implement the shouldComponentUpdate() method, where you can compare new and old props.
update should only trigger when there is a change in the props/state
No, React renders to VirtualDOM everything each time. But then it updates only changed properties in real DOM.
To avoid that you can use PureRenderMixin or your custom comparation code in shouldComponentUpdate.