ReactJS - Tối ưu hóa hiệu suất cho ứng dụng React với React Memo
Introduction
Users enjoy fast and responsive user interfaces (UI). A UI response delay of fewer than 100 milliseconds feels instant to the user. A delay between 100 and 300 milliseconds is already perceptible.
To improve user interface performance, React offers a higher-order component named react.memo(). When React.memo() wrap a component, React memoizes the rendered output then skip unneccessary rendering.
This section describes the situations when React.memo() improves the performance, and, not less important, warns when its usage is useless. When will we use?
Default React.memo()
When diciding to update the DOM, React first renders your component, then compares the result with with the previous render result are diffenrent, React will update the DOM. Current vs previous render results comparison is fast. But we can speed up the process under some circumstances.
When the components is wrapped in React.memo(), React renders the component and memoize the result. Before the next render, if the new props are the same, React reuses the memoized results skipping the next rendering
Let's see the memoization in action. the functional component Book is wrapped in React.memo():
function Book({title, description}) { return ( <div style={{border: "1px solid black", padding: "10px"}}> <h4>{title}</h4> <p>{description}</p> </div> ) } export const MemoizedBook = React.memo(Book)
Here, React.memo() returns new memoized component named MemoizedBook. It outputs the same content as the original Book component, but with one difference. MemoizedBook rendered content is memoized. As long as title and description props are the same between renderings React reuses the memoized content
//First render. React calls MemoizedBook function <MemoizedBook title="Book 1" description="This is Memoized Book" /> //On the next round, React does not call Memoized function, prevent rendering <MemoizedBook title="Book 1" description="This is Memoized Book" />
Open Code Example Here, then expand the console. You will see that React renders <MemoizedBook> just once, while <Book> re-render every 2 seconds time
You have gained a performance boost: by reusing the memoized content, React skips rerendering the component and doesn't perform a virtual DOM difference check.
The same functionality for class components is implemented by PureComponent
Custom equality check of props
By default React.memo() does a shallow comparisons of props and objects of props.
You can use the second argument to indicate a custom equality check function:
React.memo(Component, [areEqual(prevProps, nextProps)]);
areEqual(prevProps, nextProps) function must return true if prevProps and nextProps are equal.
For example, let's manually calculate if Book component props are equal:
const bookPropsAreEqual = (prevProps, nextProps) => prevProps.title === nextProps.title && prevProps.description === nextProps.description const MemoizedBook2 = React.memoized(Book, bookPropsAreEqual)
bookPropsAreEqual() function returns true if prev and next props are equal. If output is true, component will not re-render.
When should we use React.memo()?
- Pure functional component: Your
<Component>is functional and given the same props, always renders the same output. - Render often: Your
<Component>renders often. - Re-render with the same props: Your
<Component>is usually provided with the same props during re-rendering. - Medium to big size: Your
<Component>contains a decent amount of UI elements to reason props equality check.
Component renders often with the same props
The best case of wrapping a component in React.memo() is when you expect the functional component to render often and usually with the same props.
A common situation that makes a component render with the same props is being forced to render by a parent component.
Let's reuse Book component defined above. A new parent component BookViewsRealTime displays the number of views of a movie, with realtime updates :
function BookViewsRealTime({title, description, views}){ return ( <div style={{border: "1px solid black", padding: "10px"}}> <h4>{title}</h4> <p>{description}</p> </div> ) }
The application regularly polls the server in the background (every second), update views property of <BookViewsRealTime> component
// Initial render <BookViewsRealtime views={0} title="Book 1" description="This is Book 1" /> // After 1 second, views is 10 <BookViewsRealtime views={10} title="Book 2" description="This is Book 2" /> // After 2 seconds, views is 25 <BookViewsRealtime views={25} title="Book 3" description="This is Book 3" />
Every time views prop is updated with a new number, BookViewsRealtime renders. This triggers Book rendering too, even if title and description remain same.
That’s the right case to apply memoization on Book component.
Let's use the memoized component MemoizedBook inside BookViewsRealtime to prevent useless re-renderings:
As long as title and description props are the same, React skips rendering MemoizedBook. This improves the performance of BookViewsRealtime component.
"The often more component renders with the same props, the heavier and the more computationally expensive the output is, the more chances are that component needs to be wrapped in
React.memo()
Anyways, use profiling to measure the benefits of applying React.memo()
When should we avoid React.memo()?
"If component doesn't re-render often with the same props, most likely we don't need
React.memo()"
Use the following rule of thumb: don’t use memoization if you can’t quantify the performance gains.
"Performance-related changes applied incorrectly can even harm our performance. Use
React.memo()wisely"
While posible, wrapping class-based components in React.memo() is undesirable. Extend PureComponent class or define a custom implementation of shouldComponentUpdate() method if you need memoization for class-based component
Useless props comparison
Imagine a component that usually renders with different props. In this case, memoization doesn’t provide benefits.
Even if you wrap such a volatile component in React.memo(), React does 2 jobs on every rendering:
- Invokes the comparison function whether the previous and next props are the same or not.
- Because props comparison almost always return false, React performs the diff of previous and current render results.
Therefore, you gain no performance benefits but also run for naught the comparison function.
React.memo() and callback functions
The function object equals only to itself. Let's see that by comparing some functions:
javsacript
function sum(){
return (a,b) => a + b ;
}
const s1 = sum();
const s2 = sum();
console.log(s1 === s2); //return false
console.log(s1 === s1); //return true
console.log(s2 === s2); //return true
In above example, sum function returns a function which contains 2 numbers (a,b)
The functions s1 and s2 are created by sum. Both functions sum 2 numbers. However, s1 and s2 are different function objects due to the their memory address are not the same. Read more javascript work
Everytime, time a parent component defines a callback for its child, itt creates new function instances. Let’s see how this breaks memoization, and how to fix it.
The following component Logout accepts a callback prop onLogout:
function Logout({ username, onLogout }) { return ( <div onClick={onLogout}> Logout {username} </div> ); } const MemoizedLogout = React.memo(Logout);
A component that accepts a callback must be handled with care when applying memoization. The parent component could provide different instances of the callback function on every render:
function MyApp({ store, cookies }) { return ( <div className="main"> <header> <MemoizedLogout username={store.username} onLogout={() => cookies.clear('session')} /> </header> {store.content} </div> ); }
Even if provided with the same username value, MemoizedLogout renders every time because it receives new instances of onLogout callback. Memoization is broken.
To fix it, onLogout prop must receive the same callback instance. Let’s apply useCallback to preserve the callback instance between renderings:
const MemoizedLogout = React.memo(Logout); function MyApp({ store, cookies }) { const onLogout = useCallback( () => cookies.clear('session'), [cookies] ); return ( <div className="main"> <header> <MemoizedLogout username={store.username} onLogout={onLogout} /> </header> {store.content} </div> ); }
useCallback(() => cookies.clear('session'), [cookies]) always returns the same function instance as long as cookies is the same. Memoization of MemoizedLogout is fixed.
React.memo() is a performance hint
Strictly, React uses memoization as a performance hint.
While in most situations React avoids rendering a memoized component, you shouldn’t count on that to prevent rendering.
React.memo() and hooks
Components using hooks can be freely wrapped in React.memo() to achieve memoization.
React always re-renders the component if the state changes, even if the component is wrapped in React.memo().
Conclusion
React.memo() is a great tool to memoize functional components. When applied correctly, it prevents useless re-renderings when the next props equal to previous ones.
Take precautions when memoizing components that use props as callbacks. Make sure to provide the same callback function instance between renderings.
Don’t forget to use profiling to measure the performance gains of memoization.