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

  1. useState: благодаря хуку useState функциональные компоненты теперь могут сохранять и обновлять свое собственное состояние. Например, useState — это хук, который позволяет добавлять состояние React к функциональным компонентам.
  const [exampleData, setExampleData] = useState([]);

2. useEffect:Хук useEffect заменяет такие методы жизненного цикла, как componentDidMount, componentDidUpdate и componentWillUnmount. Он позволяет вам выполнять побочные эффекты, такие как выборка данных, манипулирование DOM или подписки, чистым и организованным способом. Получение данных, настройка подписки и ручное изменение DOM в компонентах React — все это примеры побочных эффектов.
Вот как это работает:

import React, { useEffect } from 'react';

function ExampleComponent() {
  useEffect(() => {
    console.log('This will run once when the component is mounted.');
  }, []); // Empty dependency array

  return <div>Example Component</div>;
}
export default ExampleComponent;

3. Пользовательский перехват. Это фрагменты логики многократного использования, которые можно использовать в разных компонентах. Мы углубимся в создание специального хука, который упрощает получение данных и управление состоянием. Давайте рассмотрим процесс:
3.1 Начните с определения функции useCustomHook
3.2 Внутри пользовательской функции-перехватчика вы должны инициализировать состояния, которые будет обрабатывать ваш перехватчик.
3.3 Добавьте перехватчик useEffect для управления процесс получения данных. Внутри эффекта установите состояние загрузки на true, чтобы указать, что данные извлекаются.
3.4 Вызовите метод обещания внутри `useEffect`.

  • Если обещание выполнено успешно (then), обновите состояние exampleData полученными данными и установите для loading значение false, чтобы указать, что выборка данных завершена.
  • Если обещание отклонено (catch), обновите состояние error, чтобы получить информацию об ошибке.

4. Последний шаг с примером кода:
Ваш собственный хук должен возвращать объект, включающий инициализированные вами состояния. Этот объект может использоваться компонентами, которые используют ваш собственный крючок для доступа к извлеченным данным, состоянию загрузки и информации об ошибках.

import { useEffect, useState } from "react";

export const useCustomHook = () => {
  const [exampleData, setExampleData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    getAllQuestions()
      .then((responseData) => {
        setExampleData(responseData);
        setLoading(false);
      })
      .catch((err) => {
        setError(err);
      });
  }, []);

  return { exampleData, loading, error };
};