Хуки — это функции, которые позволяют "подключаться" к состоянию и жизненному циклу компонентов React из функциональных компонентов. Введение их предоставило мощный инструментарий для работы со состоянием, эффектами и другими возможностями React без необходимости преобразования функциональных компонентов в классы.

Основные хуки:

• useState: Позволяет функциональным компонентам иметь состояние.

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

• useEffect: Позволяет выполнять побочные эффекты в компоненте, такие как обращения к API, подписки и т.д. Это аналог методов жизненного цикла `componentDidMount`, `componentDidUpdate`, и `componentWillUnmount` в классовых компонентах.

  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