I have been wondering if a component gets rendered again if the a prop is updated and its not being used in render method.
I am using Redux and some unnecessary props have been added to the component with mapStateToProps of connect method. I know I should remove the prop if they are not used, but before I wanted to be sure if it makes any difference.
Yes, on default it will/should rerender.
Take a look at this post:
https://stackoverflow.com/a/38678454/9254064
EDIT:
https://stackoverflow.com/a/48609609/9254064
Related
Can you explain me why useContext() works for me if I don't wrap my components with Context.Provider? I just exported result of "createContext(someValues)" with predefined values and called useContext(exportedContext) in component and it works. Every tutorial tells me to wrap components. Has something changed in React?
All consumers that are descendants of a Provider will re-render whenever the Provider’s value prop changes. In other words, If you don't wrap your components with Context.Provider they won't get re-rendered when the someValues in createContext(someValues) changes. You will get the initial value that you set only in the first render.
Demo here
I am using react+redux. I have 100000(example) ImageComponent inside a parent component let's say, ImageGrid. Functionality on every ImageComponent is, user can like, delete and select.
The problem is, when I like, delete or select any single ImageComponent, I update it's state in redux and upon every single state change, it renders the whole 100000 ImageComponent.
How to avoid this unnecessary re-rendering of those ImageComponent which has not changed?
You can add shouldComponentUpdate to the ImageComponent to prevent it from re-rendering if its props/state has not changed.
If your props are shallow, you can declare it as React.PureComponent. If ImageComponent is connected to Redux, then this is automatically done (no re-rendering if mapStateToProps return the same props).
You probably shouldn't be rendering 10000 components at once though. Try react-virtualized.
Also you should provide a unique and stable key for each component.
shouldComponentUpdate() can be used to prevent the default rendering problem
Official doc: https://reactjs.org/docs/react-component.html#shouldcomponentupdate
Here is a post about this similar problem
As far as I know these are the scenarios when react calls the render() method provided shouldComponentUpdate() is not implemented.
when your component get mounted initially
when state got changed using this.setState()
when your component receives new props
when this.forceUpdate() get called.
Is there any other scenarios that I am missing?
Yes there's one more case I can think of. When parent component is re-render.
Every time a component is re-render all its children get re-render too. Unless you implement shouldComponentUpdate method in the children.
Hope it helps.
when context gets changed render gets called
According to this answer, react redux shallow compares the output of mapStateToProps to figure out whether or not a component needs to be re-rendered..
I have a component which is not re-rendering despite a change in the relevant state.
I attached breakpoints to the shallowEqual function in the react redux source code but found out that the function, in fact, returns false(i.e the objects being compared in case of my component are not equal).So ideally my component should re-render. I am thus unable to figure out why my component is not re-rendering. I'm guessing it's because of the performance optimizations in the connect function.
Is there any way to print the outputs of the checks being made in the connect function regarding the re-rendering of a component
If you want to confirm if it is react-redux optimisations getting in the way, you can turn them off using the options argument of the connect function. e.g.
export default connect(mapStateToProps, mapDispatchToProps, undefined, { pure: false })(YourComponent)
This will bypass all equality checks and allow YourComponent to re-render on every state or prop change. If it's still not re-rendering your component, then the issue is elsewhere.
Remember to remove the option before committing your changes (unless it's actually required).
There is another aspect to take in consideration: the reconciliation. Your component might be updated but maybe Reactjs figures out that the DOM result of your component will be the same, so it doesn't need to be re-rendered. I strongly suggest you to implement the function shouldComponentUpdate(nextProps, nextState) inside your component and compare the this.props and nextProps by yourself and understand the situation.
I created a simple react app and checked the app for re-renders with why-did-you-update library and it shows unnecessary re-renders and how to prevent these re-renders?
Components will get re-rendered if their props change, or if their parent has been re-rendered. It's possible that you have update the props or state of a parent component. React provides a lifecycle function called shouldComponentUpdate to deal with unnecessary renders. It is quicker and easier to implement if you use immutable data for your props since you can simply do an equality check between new props and old props to see if there was any change. See https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate and https://facebook.github.io/react/docs/pure-render-mixin.html