Usememo Development Tutorials, Guides & Insights

Passing functions as props can cause child components to re-render unnecessarily because functions are recreated on every render. The useCallback hook memoizes functions, ensuring they maintain the same reference unless their dependencies change.([React][4])

import React, { useState, useCallback } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => setCount(c => c + 1), []);
  const decrement = useCallback(() => setCount(c => c - 1), []);

  return (
    <div>
      <button onClick={increment}>+</button>
      <span>{count}</span>
      <button onClick={decrement}>-</button>
    </div>
  );
}

Using React.Fragment can help reduce the number of nodes in the DOM, which can improve performance, especially when rendering large lists.

import React from 'react';

function ItemList({ items }) {
  return (
    <>
      {items.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </>
  );
}