---
title: Хуки в React
seo:
  title: Хуки в React — React Developer
  description: 'Тема «Хуки в React» для собеседования React Developer. Что такое "хуки" (hooks) в React и для чего они используются? Как создать собственный хук в React?'
---

[Все темы React Developer](/react-developer)

## <strong>Что такое "хуки" (</strong><code>hooks</code><strong>) в React и для чего они используются?</strong> [#q-14bee738d69b81bcab6eeab3133f9eb4]

<strong>Хуки (</strong>
<code>Hooks</code>
<strong>)</strong> — это функции, которые позволяют использовать состояние и
другие возможности React в функциональных компонентах.

#### Основные хуки&#58;

{/* prettier-ignore */}
1. <code>useState</code>&#58;

    - Управляет состоянием в функциональных компонентах.

    - Пример&#58;

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

1. <code>useEffect</code>&#58;

    - Выполняет побочные эффекты, такие как загрузка данных, в функциональных компонентах.

    - Пример&#58;

        ```javascript
        useEffect(() => {
          // Выполнение побочного эффекта
        }, []);
        ```

1. <code>useContext</code>&#58;

    - Использует контекст для доступа к глобальным данным.

    - Пример&#58;

        ```javascript
        const value = useContext(MyContext);
        ```

1. <code>useReducer</code>&#58;

    - Управляет сложным состоянием с помощью редюсеров.

    - Пример&#58;

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

1. <code>useMemo</code>&#58;

    - Мемоизирует вычисленные значения для оптимизации производительности.

    - Пример&#58;

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

1. <code>useCallback</code>&#58;

    - Мемоизирует функции для оптимизации производительности.

    - Пример&#58;

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

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

:::note[Ссылки для изучения]

1. [React Hooks простыми словами](https://habr.com/ru/companies/simbirsoft/articles/652321/)
   :::

---

## <strong>Как создать собственный хук в React?</strong> [#q-14bee738d69b8176ac07fb2c71f4b1b4]

Собственный хук (<code>custom hook</code>) позволяет абстрагировать и повторно использовать логику состояния и эффектов в функциональных компонентах.

#### Шаги&#58;

{/* prettier-ignore */}
1. <strong>Создайте функцию, название которой начинается с</strong> <code>use</code>&#58;

    - Собственные хуки должны следовать соглашению об именовании, начинаясь с <code>use</code>.

1. <strong>Используйте внутри функции стандартные хуки React (</strong><code>useState</code><strong>,</strong> <code>useEffect</code><strong>, и т.д.)</strong>&#58;

    - Собственный хук может использовать любые стандартные хуки React.

1. <strong>Возвращайте необходимые значения или функции из собственного хука</strong>&#58;

    - Возвращайте данные и функции, которые должны быть доступны в компоненте.

#### Пример&#58;

```javascript
import { useState, useEffect } from "react";

// Создание собственного хука для получения данных
const useFetchData = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
        setLoading(false);
      } catch (err) {
        setError(err);
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
};

export default useFetchData;
```

#### Использование собственного хука в компоненте&#58;

```jsx
import React from "react";
import useFetchData from "./useFetchData";

const MyComponent = () => {
  const { data, loading, error } = useFetchData("https://api.example.com/data");

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <div>{JSON.stringify(data)}</div>;
};

export default MyComponent;
```

Создание собственного хука в React позволяет абстрагировать повторяющуюся логику и легко использовать её в различных компонентах, улучшая структуру и повторное использование кода.

:::note[Ссылки для изучения]

1. [React Hooks простыми словами](https://habr.com/ru/companies/simbirsoft/articles/652321/)
   :::

---

## <strong>Какие особенности имеют хуки</strong> <code>useEffect</code> <strong>и</strong> <code>useLayoutEffect</code><strong>?</strong> [#q-14bee738d69b815dae03d0f5311ede00]

<code>useEffect</code> и <code>useLayoutEffect</code> — это хуки в React,
которые используются для выполнения побочных эффектов в функциональных
компонентах, но они выполняются в разное время.

#### <code>useEffect</code>&#58;

{/* prettier-ignore */}
1. <strong>Выполнение после рендеринга</strong>&#58;

    - Выполняется после commit. Обычно браузер успевает нарисовать экран до эффекта, но эффект, вызванный взаимодействием пользователя, может выполниться до отрисовки.

    - Подходит для операций, не влияющих на отображение, таких как данные, запросы и подписки.

1. <strong>Использование</strong>&#58;

    ```javascript
    useEffect(() => {
      // Побочные эффекты, например, загрузка данных
      return () => {
        // Очистка при размонтировании
      };
    }, [dependencies]); // Зависимости
    ```

#### <code>useLayoutEffect</code>&#58;

1. Выполнение перед отрисовкой браузером&#58;
   - Выполняется после обновления DOM, но до отрисовки экрана браузером. Эффект и обновления состояния внутри него блокируют эту отрисовку.

   - Подходит для операций, влияющих на макет и измерения, таких как анимации и манипуляции с DOM.

1. <strong>Использование</strong>&#58;

   ```javascript
   useLayoutEffect(() => {
     // Побочные эффекты, например, измерения DOM
     return () => {
       // Очистка при размонтировании
     };
   }, [dependencies]); // Зависимости
   ```

- <code>useEffect</code>&#58; Выполняется после рендеринга, подходит для
  асинхронных операций и побочных эффектов, не влияющих на макет.

- useLayoutEffect&#58; выполняется после commit, до отрисовки браузером; подходит для измерения DOM перед показом результата.

:::note[Ссылки для изучения]

1. [React Hooks простыми словами](https://habr.com/ru/companies/simbirsoft/articles/652321/)
   :::

---

## <strong>Как обрабатывать ошибки при использовании хуков (</strong><code>hooks</code><strong>) в React?</strong> [#q-14bee738d69b81f1b46fe9ef80405166]

Для обработки ошибок при использовании хуков в React применяйте блоки <code>try&#46;&#46;&#46;catch</code> внутри хуков или создавайте пользовательские хуки с встроенной обработкой ошибок.

#### Пример в <code>useEffect</code>&#58;

```jsx
import React, { useState, useEffect } from "react";

const MyComponent = () => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("https://api.example.com/data");
        if (!response.ok) throw new Error("Network response was not ok");
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      }
    };

    fetchData();
  }, []);

  if (error) return <div>Error: {error}</div>;
  if (!data) return <div>Loading...</div>;

  return <div>{JSON.stringify(data)}</div>;
};

export default MyComponent;
```

#### Пример с пользовательским хуком&#58;

```javascript
import { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        if (!response.ok) throw new Error("Network response was not ok");
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      }
    };

    fetchData();
  }, [url]);

  return { data, error };
};

export default useFetch;
```

#### Использование пользовательского хука&#58;

```jsx
import React from "react";
import useFetch from "./useFetch";

const MyComponent = () => {
  const { data, error } = useFetch("https://api.example.com/data");

  if (error) return <div>Error: {error}</div>;
  if (!data) return <div>Loading...</div>;

  return <div>{JSON.stringify(data)}</div>;
};

export default MyComponent;
```

Для обработки ошибок в хуках используйте блоки <code>try&#46;&#46;&#46;catch</code> внутри хуков или создавайте пользовательские хуки с встроенной обработкой ошибок для повторного использования.

:::note[Ссылки для изучения]

1. [React Hooks простыми словами](https://habr.com/ru/companies/simbirsoft/articles/652321/)
   :::