React "Shallow Equal" HOC implementation to optimize shouldComponentUpdate with children / React elements 🐇➰
A PureComponent alternative that will actually improve your application performance!
"Shallow Equal" HOC implementation to optimize shouldComponentUpdate with children / React elements.
See live example here: codepen.io/NoamELB/pen/RLoxLv
npm i -S shouldcomponentupdate-children
import {useShallowEqual} from 'shouldcomponentupdate-children';
class MyComponent extends React.Component {
....
}
const MyPerformantComponent = useShallowEqual(MyComponent);
export default MyPerformantComponent;
import {useShallowEqual} from 'shouldcomponentupdate-children';
import MyComponent from './my-component';
const MyPerformantComponent = useShallowEqual(MyComponent); // use it just like you would use MyComponent
import {shallowEqual} from 'shouldcomponentupdate-children';
class MyComponent extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
return shallowEqual(this.props, nextProps, this.state, nextState);
}
}
export default MyComponent;
React will create a new instance of a React Element on each render, so generic implementations to shouldComponentUpdate will return true even if nothing had changed!
Basically, this simple shouldComponentUpdate implementation:
return this.props.children !== nextProps.children;
is almost as good as writing:
return true;
See live example here: codepen.io/NoamELB/pen/RLoxLv
Read more about it here: https://medium.com/myheritage-engineering/how-to-greatly-improve-your-react-app-performance-e70f7cbbb5f6
We created an HOC which uses Inheritance Inversion to extend components with a generic shouldComponentUpdate functionality.
Our generic shouldComponentUpdate implementation does the following:
But isn't this means that if any React Element is actually changing then my component won't render?
Yes, but that is the whole point. React Elements are not something you can rely upon when implementing shouldComponentUpdate!
In order to tell a component that it should render - you can change any non-React-Element prop to indicate a state change (this can be a designated prop just for that or a prop that is actually in use inside the component).
Performance. If the change in state or props does not affect your component, you can tell React. React will not re-render your component for no reason in that case. Read more: https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate
MyClass extends React.Component {
...
shouldComponentUpdate(nextProps, nextState) {
// return true or false
}
}
It's common to want to re-render when either the state or any prop has changed - so react created a class that does it for us:
MyClass extends React.PureComponent {
...
// don't need to implement shouldComponentUpdate
}
Read more: https://facebook.github.io/react/docs/react-api.html#react.purecomponent
If "children" (or any other prop) is a React element or an array, it will send a new instance every time. This means that in most cases, the following check will always be true:
this.props.children !== nextProps.children
The result is that our component will render even if our prop didn't actually change.
Wrap your components with this HOC and it will perform a wiser shallow equal check. It will skip props that would have always returned true, regardless of their value:
const MyPerformantComponent = useShallowEqual(MyComponent);
HOC is very useful in this specific case of Inheritance Inversion, you can use it on the outside when importing.
Let's see some nice examples of when to use on the outside:
By tha way, we exports all of the functions from the package, so you can use them directly when implementing shouldComponentUpdate:
shouldComponentUpdate(nextProps, nextState)
- bind the "this" to the function and just use it as your shouldComponentUpdate.shallowEqual(this.props, nextProps, this.state, nextState)
- same but with no need to bind anything.shallowEqualWithoutReactElements(thisProps, nextProps)
- the actual shallow equal implementation on the props.shallowEqualState(thisState, nextState)
- the actual shallow equal on the state.MIT