React 16.6: React.memo() for Functional Components Rendering Control
React 16.6.0 is released! With it comes a host of new features including the two big ones:
React.memo()
React.lazy(): Code-splitting and lazy-loading with React Suspense
We'll focus on React.memo() for this article and React.lazy() and Suspense in an upcoming larger article.
What is React.memo()?
React.memo() is similar to PureComponent in that it will help us control when our components rerender.
Components will only rerender if its props have changed!
Normally all of our React components in our tree will go through a render when changes are made. With PureComponent and React.memo(), we can have only some components render.
const ToTheMoonComponent = React.memo(function MyComponent(props) {
// only renders if props have changed
});
This is a performance bo...