В чем разница между useState и useCallback?

Хуки из разных областей: useState хранит состояние (данные, вызывающие ререндер), useCallback мемоизирует функцию (оптимизация ссылок). Сравнивать их — значит понять, что у них разные задачи.

Суть каждого

// useState: реактивные ДАННЫЕ
const [query, setQuery] = useState('');
// изменение через setQuery → ререндер, UI обновляется

// useCallback: стабильная ССЫЛКА НА ФУНКЦИЮ
const handleSearch = useCallback(() => {
  api.search(query);
}, [query]);
// ничего не хранит «реактивного», ререндер не вызывает

Отличия

• Что возвращают: useState — пару [значение, сеттер]; useCallback — одну функцию.
• Влияние на рендер: setState планирует ререндер; useCallback никак не влияет — лишь решает, вернуть старую ссылку или новую.
• Назначение: useState — источник изменяемых данных компонента; useCallback — оптимизация (не ломать React.memo детей, не перезапускать эффекты).
• Без чего нельзя/можно обойтись: без useState интерактивный компонент не построить; useCallback всегда можно убрать — станет медленнее, но останется корректным.

Как работают вместе

const TodoList = () => {
  const [todos, setTodos] = useState([]);

  const addTodo = useCallback((text) => {
    setTodos((prev) => [...prev, { id: nanoid(), text }]);
  }, []); // сеттер стабилен → deps пусты, функция стабильна

  return <AddForm onAdd={addTodo} />; // memo-форма не перерендерится зря
};

Функциональный сеттер позволяет useCallback не зависеть от текущего состояния — типовая связка.

Коротко для собеседования

useState — хранение реактивных данных: пара значение/сеттер, обновление вызывает ререндер. useCallback — мемоизация ссылки на функцию для оптимизации (React.memo, зависимости эффектов), рендером не управляет. Данные — в useState, стабильные обработчики — в useCallback; часто работают вместе через функциональный сеттер.