Performance Optimization with React.memo and useMemo
React provides tools like React.memo and useMemoto optimize performance by preventing unnecessary renders.
What is React.memo?
React.memo is a higher-order component that memoizes a functional component and prevents unnecessary re-renders if its props haven't changed.
const MyComponent = React.memo(({ name }) => { console.log("Rendering..."); return <p>Hello, {name}!</p>; });
What is useMemo?
useMemo memoizes the result of an expensive function to avoid unnecessary calculations on every render.
const memoizedValue = useMemo(() => calculateExpensiveValue(costly), [dependencies]);
Combined Example
const List = React.memo(({ items }) => { return ( <ul> {items.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> ); }); const MyComponent = ({ data }) => { const filteredData = useMemo(() => data.filter(d => d.active), [data]); return <List items={filteredData} />; };
When to use useMemo and React.memo? Does React.memo improve performance? Does useMemo improve performance? What are the differences between the useMemo and useCallback hooks? Memo React useMemo vs useCallback useRef Memo React example useState vs useMemo useRef React When to use useMemo useMemo or useEffect