React.memo Archives

React version 16.6 is out and it comes packed with some useful new features that are very much worth getting excited about. It's a minor release with major features focused on performance optimization. The main new features include: React.memo() React.lazy() static contextType() static getDerivedStateFromError() a number of deprecations in StrictMode Let's take a look into what each of these features adds to React. React.memo() React.memo() is the functional component solution to React.PureComponent as used in class components. It's a higher order component that is wrapped around functional components to create memoized components. The result is a component that only rerenders when it's props change, acting kind of like shouldComponentUpdate(). Using m...

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...

Tag: React.memo

What’s New in React 16.6

React 16.6: React.memo() for Functional Components Rendering Control