React Performance Optimization: A Systematic Approach | DevPrep

React Performance Optimization: A Systematic Approach | DevPrep

// Problem: Parent re-render causes child re-render
function Parent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>{count}</button>
      <ExpensiveChild /> {/* Re-renders even though it doesn't use count */}
    </div>
  );
}

// Fix: React.memo
const ExpensiveChild = React.memo(function ExpensiveChild() {
  return <div>{/* expensive render */}</div>;
});

// Problem: filtering runs on every render
function UserList({ users, query }) {
  const filtered = users.filter(u => u.name.includes(query)); // Runs every render!
  return filtered.map(u => <UserCard key={u.id} user={u} />);
}

// Fix: useMemo
function UserList({ users, query }) {
  const filtered = useMemo(
    () => users.filter(u => u.name.includes(query)),
    [users, query]
  );
  return filtered.map(u => <UserCard key={u.id} user={u} />);
}

// Problem: new function reference every render breaks memo
function Parent() {
  const handleClick = (id) => deleteItem(id); // New ref every render!
  return <MemoizedList onClick={handleClick} />;
}

// Fix: useCallback
function Parent() {
  const handleClick = useCallback((id) => deleteItem(id), []);
  return <MemoizedList onClick={handleClick} />;
}