How to use React.memo() to not re-render when a new element is added to the component
React.memo() is a higher-order component that can be used to memoize functional components to prevent unnecessary re-renders. When the props of the component being memoized change, React.memo will compare the previous and current props. If there are no changes, the component will not be re-rendered.
To use React.memo to not re-render when a new element is added to the component, you can wrap the component with React.memo and pass a function that specifies the props that should trigger a re-render. In the case of adding a new element, the component should only re-render if the props that contain the list of elements have changed.
Checkout more articles on ReactJS
Here’s an example of how to use React.memo to prevent re-rendering when a new element is added to a list:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | import React, { useState } from 'react'; const List = React.memo(({ items }) => { console.log('List rendered'); return ( <ul> {items.map((item) => ( <li key={item.id}>{item.text}</li> ))} </ul> ); }, (prevProps, nextProps) => { // Only re-render if the items array has changed return prevProps.items.length === nextProps.items.length; }); const App = () => { const [items, setItems] = useState([ { id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }, { id: 3, text: 'Item 3' }, ]); const addItem = () => { setItems([...items, { id: items.length + 1, text: `Item ${items.length + 1}` }]); }; return ( <> <button onClick={addItem}>Add Item</button> <List items={items} /> </> ); }; export default App; |
In this example, the List component is memoized using React.memo. The second argument to React.memo is a comparison function that compares the previous and current props. In this case, the function compares the items prop to determine if the component should be re-rendered. The App component contains a button that adds a new item to the items state array. When the button is clicked, the List component is not re-rendered because the comparison function determines that the items prop has not changed.
Using React.memo is a simple way to optimize performance by preventing unnecessary re-renders. However, it should be used judiciously, as memoizing too many components can lead to decreased performance due to the overhead of memoization.
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂
