Menu
React Document says
React.PureComponent's shouldComponentUpdate() only shallowly compares the objects.
Does it mean the Component will do a deep compare unless we make it a PureComponent ?
331
No, by default Component will re-render even if its props stay the same (by doing no compare at all), unless you decide to implement your own shouldComponentUpdate . From docs: render() will not be invoked if shouldComponentUpdate() returns false.
React does a shallow comparison. If you use an object or an array that you mutate, React will think nothing changed. Because objects are compared by reference.
Shallow compare works by checking if two values are equal in case of primitive types like string, numbers and in case of object it just checks the reference. So if you shallow compare a deep nested object it will just check the reference not the values inside that object.
React renders HTML to the web page by using a function called render(). The purpose of the function is to display the specified HTML code inside the specified HTML element. In the render() method, we can read props and state and return our JSX code to the root component of our app.
No, by default Component will re-render even if its props stay the same (by doing no compare at all), unless you decide to implement your own shouldComponentUpdate.
From docs:
render() will not be invoked if shouldComponentUpdate() returns false.
and then:
shouldComponentUpdate() is invoked before rendering when new props or state are being received. Defaults to true.
159
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
