The array is the annoying part.

Put the cursor on a variable or a function inside a component. The lightbulb wraps it in useMemo or useCallback, and fills the dependency array the way exhaustive-deps would.

import { useMemo, useCallback } from "react";

function Profile({ user, onSelect }) {
  const label = useMemo(() => user.name.toUpperCase(), [user.name]);
  const handleSelect = useCallback(() => onSelect(user.id), [onSelect, user.id]);

  return <button onClick={handleSelect}>{label}</button>;
}
        

Cursor on the name The lightbulb offers one action The array fills in

A function becomes useCallback. Anything else becomes useMemo. Setters, refs, and imports stay out of the array. JavaScript, JSX, TypeScript, and TSX.