Что такое хук

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

  useEffect(() => {
    document.title = `Вы нажали ${count} раз`;
  }, [count]); // Эффект использует переменную состояния count

• useContext: Позволяет получить доступ к данным из контекста. Это упрощает передачу данных через дерево компонентов без необходимости передавать props на каждом уровне.

  const value = useContext(MyContext);

• useReducer: Предоставляет альтернативный способ управления состоянием, основанный на паттерне редьюсер. Это особенно полезно для управления сложным состоянием.

  const [state, dispatch] = useReducer(reducer, initialState);

• useCallback: Возвращает мемоизированный колбэк, который изменяется только если изменяются зависимости. Это помогает предотвратить ненужные ререндеры.

  const memoizedCallback = useCallback(() => {
    doSomething(a, b);
  }, [a, b]);

• useMemo: Мемоизирует вычисляемое значение. Это помогает избежать ненужных вычислений при каждом рендере.

  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• useRef: Возвращает изменяемый ref объект, который может быть использован для хранения значения на протяжении всего жизненного цикла компонента.

  const myRef = useRef(initialValue);

Зачем они нужны:

Хуки были введены для решения нескольких проблем:

• Упрощение переиспользования логики состояния между компонентами без необходимости создавать высшие порядковые компоненты или рендер-пропсы.
• Использование состояния и других возможностей React без написания классов.
• Организация логики внутри компонента по принципу использования, а не жизненного цикла.

Хуки предлагают более простой и мощный способ создания компонентов, делая код более читабельным и легко поддерживаемым.

Feb. 26, 2024, easyoffer