Повторное использование логики с помощью пользовательских хуков

Пользовательские хуки: Повторное использование логики между компонентами

Представьте, что вы разрабатываете приложение, тесно связанное с использованием сети (как большинство приложений). Вы хотите предупредить пользователя, что сетевое соединение было случайно разорвано во время использования приложения. Как вы это сделаете? Скорее всего, вам нужны две вещи в компоненте:

1. Состояние, обозначающее, подключен ли пользователь к сети.
2. Эффект, который подписывается на глобальные события online и offline, и обновляет это состояние.

Так компонент будет синхронизирован с текущим состоянием сети. Вы можете начать с чего-то подобного:

Попробуйте отключить сеть, и вы увидите, как StatusBar обновляется в ответ.

Теперь представьте, что вы хотите использовать эту логику ещё в одном компоненте. Вы хотите добавить кнопку “Сохранить”, которая станет неактивной при отсутствии подключения к сети и будет отображать надпись “Подключение…” вместо “Сохранить”.

Мы можем просто скопировать состояние isOnline и эффект в SaveButton:

Попробуйте отключить сеть — кнопка должна изменить своё состояние.

Оба компонента работают корректно, но повторение одного и того же кода в нескольких местах — не лучшая практика. Даже если компоненты выглядят по-разному, общая логика может быть вынесена в одно место.

Извлекаем пользовательский хук из компонента

Представьте, что в React, кроме useState и useEffect, есть встроенный хук useOnlineStatus. Тогда мы могли бы использовать его в обоих компонентах и убрать повторяющийся код:

function StatusBar() {
  const isOnline = useOnlineStatus();
  return <h1>{isOnline ? '✅ В сети' : '❌ Не в сети'}</h1>;
}

function SaveButton() {
  const isOnline = useOnlineStatus();

  function handleSaveClick() {
    console.log('✅ Сохранено!');
  }

  return (
    <button disabled={!isOnline} onClick={handleSaveClick}>
      {isOnline ? 'Сохранить' : 'Подключение...'}
    </button>
  );
}

Пусть такого хука и нет в React, ничто не мешает нам написать его самостоятельно. Создайте функцию useOnlineStatus и перенесите туда повторяющийся код из компонентов:

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(true);
  useEffect(() => {
    function handleOnline() {
      setIsOnline(true);
    }
    function handleOffline() {
      setIsOnline(false);
    }
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);
  return isOnline;
}

В конце функции верните isOnline — это значение будет доступно компонентам.

Проверьте, что при отключении сети обновляются оба компонента.

Отлично! Теперь в компонентах стало меньше дублирующегося кода. Более того, теперь их код описывает что они делают (используют состояние сети!), а не как именно они это делают (подпиской на события браузера).

При извлечении логики в пользовательские хуки, вы прячете ненужные для компонента глубокие детали взаимодействия с браузерными API или внешними сервисами. Код компонента отражает само намерение, а не способ его реализации.

Имя хуков должны начинаться с use

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

Для этого нужно соблюдать соглашения имён:

1. Имя React компонента должно начинаться с заглавной буквы, вроде StatusBar или SaveButton. React компонент должен вернуть что либо, что React сможет отобразить, например JSX элемент.
2. Имя хуков должно начинаться с use после которго следует заглавная буква, вроде useState (встроенный хук) или useOnlineStatus (пользовательский, как мы делали выше). Хуки могут возвращать любые значения.

Это соглашение помогает сразу увидеть, где в компоненте используются состояние, эффекты и другие функции React. Когда вы видите функциюgetColor() в вашем компоненте, вы можете быть уверены, что она не использует функции React, вроде useState, так как имя функции не начинается с use. А вот вызов функции useOnlineStatus() скорее всего будет использовать хуки или другие функции React.

// 🔴 Нельзя: Хук, не использующий другие хуки
function useSorted(items) {
  return items.slice().sort();
}

// ✅ Отлично: Обычная функция, не использующая хуки
function getSorted(items) {
  return items.slice().sort();
}

function List({ items, shouldSort }) {
  let displayedItems = items;
  if (shouldSort) {
    // ✅ Мы можем вызвать getSorted внутри if, потому что это обычная функция.
    displayedItems = getSorted(items);
  }
  // ...
}

// ✅ Хорошо: Хук, использующий другие хуки
function useAuth() {
  return useContext(Auth);
}

// ✅ Хорошо: Хук, не использующий другие хуки, но собирающийся использовать их в будущем
function useAuth() {
  // TODO: заменить строку ниже после реализации аутентификации
  // return useContext(Auth);
  return TEST_USER;
}

Пользовательские хуки позволяют повторно использовать логику состояния, но не само состояние

Ранее, когда мы меняли состояние сети, оба компонента обновлялись одновременно. Но неправильно думать, что между ними используется одна и та же переменная состояния isOnline. Обратите внимание на код ниже:

function StatusBar() {
  const isOnline = useOnlineStatus();
  // ...
}

function SaveButton() {
  const isOnline = useOnlineStatus();
  // ...
}

Это работает как и раньше, до вынесения повторяющегося кода

function StatusBar() {
  const [isOnline, setIsOnline] = useState(true);
  useEffect(() => {
    // ...
  }, []);
  // ...
}

function SaveButton() {
  const [isOnline, setIsOnline] = useState(true);
  useEffect(() => {
    // ...
  }, []);
  // ...
}

Это две совершенно независимые переменные состояния и эффекта! И они имеют одинаковое значение, только потому, что мы привязали их к внешнему значению (есть ли подключение к интернету).

Чтобы лучше понять, нам нужен другой пример. Рассмотрим компонент Form:

Здесь мы имеем повторяющуюся логику для каждого поля ввода:

1. Часть состояния (firstName and lastName).
2. Функции для изменения состояния (handleFirstNameChange and handleLastNameChange).
3. А также JSX, определяющий атрибуты value и onChange.

Можно извлечь повторяющуюся логику в пользовательский хук useFormInput:

Обратите внимание: переменная состояния value здесь только одна.

Однако, компонент Form вызывает useFormInput дважды

function Form() {
  const firstNameProps = useFormInput('Владимир');
  const lastNameProps = useFormInput('Маяковский');
  // ...

Вот почему это работает как объявление двух отдельных переменных состояния!

Пользовательские хуки позволяют поделиться логикой состояния но не самим состоянием. Каждый вызов хука абсолютно независим от других вызовов этого же хука. Вот почему примеры выше полностью одинаково работают. Если хотите, можете подняться выше, и проверить это. Поведение и результат до и после извлечения пользовательского хука одинаковы.

Если вы хотите поделиться именно переменной состояния между компонентами, используйте поднятие состояния и её передачу вниз.

Передача реактивных значений между хуками

Код пользовательского хука выполняется заново при каждом рендере компонента. Поэтому, как и компоненты, ваши хуки должны быть чистыми функциями.. Лучше воспринимать их как часть компонента, а не как отдельные функции.

Поскольку хуки повторно рендерятся вместе с компонентом, они всегда получают актуальные пропсы и состояние. Чтобы убедиться в этом, посмотрите на пример чат-комнаты ниже. Измените URL сервера или комнату в чате:

Когда вы изменяете serverUrl или roomId, эффект “реагирует” на эти изменения и заново синхронизируется. Вы можете выводить в консоль сообщения о повторном присоединении к чату при изменении зависимостей вашего эффекта.

Вынесем код эффекта в пользовательский хук:

export function useChatRoom({ serverUrl, roomId }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      showNotification('Новое сообщение: ' + msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]);
}

Это позволяет компоненту ChatRoom использовать хук, не вникая в его внутреннюю реализацию:

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl
  });

  return (
    <>
      <label>
        URL сервера:
        <input value={serverUrl} onChange={e => setServerUrl(e.target.value)} />
      </label>
      <h1>Добро пожаловать в комнату {roomId}!</h1>
    </>
  );
}

Теперь это выглядит куда проще! (Пускай и работает точно так же.)

Заметьте, что логика всё ещё реагирует на изменения пропсов и состояния. Попробуйте изменить URL сервера или выбранную комнату:

Обратите внимание, как мы берём возвращаемое значение из одного хука:

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl
  });
  // ...

И передаём их как параметры другому хуку:

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl
  });
  // ...

При повторном рендере компонента ChatRoom, он передаёт актуальные roomId и serverUrl вашему хуку. Вот почему эффект снова подключается к чату даже если значения меняются после повторного рендера. (Если вы когда-либо работали с программами для обработки видео или звука, цепочки хуков вроде этой могут напомнить вам цепочки аудио или визуальных эффектов. Это похоже на то, что выходные параметры useState “скармливаются” на вход useChatRoom.)

Передача слушателей событий пользовательским хукам

Когда вы начнёте использовать useChatRoom в большем количестве компонентов, вы, возможно, захотите изменять их поведение. Например, сейчас логика того, что происходит после получения нового сообщения, зафиксирована в коде внутри хука:

export function useChatRoom({ serverUrl, roomId }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      showNotification('Новое сообщение: ' + msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]);
}

Допустим, вы хотите перенести эту логику обратно в компонент:

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl,
    onReceiveMessage(msg) {
      showNotification('Новое сообщение:' + msg);
    }
  });
  // ...

Чтобы это работало, измените добавьте onReceiveMessage во входные параметры:

export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      onReceiveMessage(msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl, onReceiveMessage]); // ✅ Все зависимости указаны
}

Это будет работать, однако есть ещё одно улучшение, которое можно сделать для того, чтобы ваш хук принимал на вход обработчики событий.

Если добавить onReceiveMessage в зависимости, хук будет переподключать чат при каждом рендере — это неэффективно. Оберните этот обработчик события в События эффектов, чтобы убрать его из списка зависимостей:

import { useEffect, useEffectEvent } from 'react';
// ...

export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
  const onMessage = useEffectEvent(onReceiveMessage);

  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      onMessage(msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]); // ✅ Все зависимости указаны
}

Теперь подключение к чату не будет происходить заново при каждом рендере ChatRoom. Ниже представлен полностью рабочий пример передачи обработчика события пользовательскому хуку. Попробуйте его!

Обратите внимание: теперь вам не нужно знать, как работает useChatRoom, чтобы его использовать. Его можно использовать в любом компоненте: передайте параметры — и он будет вести себя так же, как раньше. В этом и заключается сила пользовательских хуков.

Когда использовать пользовательские хуки

Не стоит создавать пользовательские хуки для каждого небольшого кусочка повторяющейся логики. Небольшое повторение кода — не проблема. Например, вынос хука useFormInput для создания обёртки над одним вызовом useState, как в примере выше, может быть излишним.

Везде и всегда, создавая эффекты, создавайте их более чистыми для дальнейшего оборачивания в пользовательские хуки. Не используйте эффекты слишком часто, но если вы создаёте эффект, это значит, что вам нужно “выйти за пределы React” чтобы синхронизироваться с какой-либо сторонней системой или сделать что-то, что React не пользоваляет сделать с помощью встроенных API. Оборачивание в пользовательский хук помогает точнее выразить намерения компонента и связь данных с этими намерениями.

Для примера возьмём компонент ShippingForm, который использует два выпадающих списка: в одном список городов, в другом список районов внутри города. Для начала хватит кода ниже:

function ShippingForm({ country }) {
  const [cities, setCities] = useState(null);
  // Эффект, запрашивающий список городов
  useEffect(() => {
    let ignore = false;
    fetch(`/api/cities?country=${country}`)
      .then(response => response.json())
      .then(json => {
        if (!ignore) {
          setCities(json);
        }
      });
    return () => {
      ignore = true;
    };
  }, [country]);

  const [city, setCity] = useState(null);
  const [areas, setAreas] = useState(null);
  // Эффект, запрашивающий список районов в городе
  useEffect(() => {
    if (city) {
      let ignore = false;
      fetch(`/api/areas?city=${city}`)
        .then(response => response.json())
        .then(json => {
          if (!ignore) {
            setAreas(json);
          }
        });
      return () => {
        ignore = true;
      };
    }
  }, [city]);

  // ...

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

function useData(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    if (url) {
      let ignore = false;
      fetch(url)
        .then(response => response.json())
        .then(json => {
          if (!ignore) {
            setData(json);
          }
        });
      return () => {
        ignore = true;
      };
    }
  }, [url]);
  return data;
}

Теперь оба эффекта в ShippingForm можно заменить вызовами хука useData:

function ShippingForm({ country }) {
  const cities = useData(`/api/cities?country=${country}`);
  const [city, setCity] = useState(null);
  const areas = useData(city ? `/api/areas?city=${city}` : null);
  // ...

Вынос пользовательской логики в хук делает поток данных более явным. Вы передаёте url — и получаете data. “Скрывая” эффект внутри хука useData, вы также защищаете компонент ShippingForm от добавления ненужных зависимостей внутрь него. Чем дольше развивается проект, тем больше эффектов вашего приложения будут вынесены в пользовательские хуки.

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  // 🔴 Избегайте: использования пользовательских хуков "жизненного цикла"
  useMount(() => {
    const connection = createConnection({ roomId, serverUrl });
    connection.connect();

    post('/analytics/event', { eventName: 'visit_chat' });
  });
  // ...
}

// 🔴 Избегайте: создания пользовательских хуков "жизненного цикла"
function useMount(fn) {
  useEffect(() => {
    fn();
  }, []); // 🔴 React Hook useEffect has a missing dependency: 'fn'
}

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  // ✅ Хорошо: два разных эффекта, разделённых по назначению

  useEffect(() => {
    const connection = createConnection({ serverUrl, roomId });
    connection.connect();
    return () => connection.disconnect();
  }, [serverUrl, roomId]);

  useEffect(() => {
    post('/analytics/event', { eventName: 'visit_chat', roomId });
  }, [roomId]);

  // ...
}

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  // ✅ Супер: названия пользовательских хуков отражают их назначение
  useChatRoom({ serverUrl, roomId });
  useImpressionLog('visit_chat', { roomId });
  // ...
}

Пользовательские хуки помогают улучшить подходы к написанию кода

Эффекты — это “лазейка”: вы используете их только для того, чтобы “выйти за пределы React” и когда нет более хорошего встроенного средства для решения вашей проблемы. В дальнейшем, целью команды React будет сокращение количества эффектов, которые вы будете использовать в приложении, путём предоставления более узконаправленных инструментов для решения более узконаправленных проблем. Оборачивание эффектов в пользовательские хуки поможет легче адаптироваться к будущим изменениям в React.

Давайте вернёмся к нашему примеру:

В примере выше, useOnlineStatus был создан с помощью пары useState и useEffect. На деле это не самое надёжное решение: оно не учитывает некоторые пограничные случаи. Оно предполагает, что isOnline уже true, но это может не сработать, если пользователь изначально не в сети. Можно использовать браузерное API navigator.onLine для проверки, но прямое использование не позволит серверу отрендерить начальную HTML-разметку. Вкратце, мы можем улучшить этот код.

Как раз для нашего случая, в React 18 был представлен хук useSyncExternalStore который берёт на себя ответственность за решение этих проблем за вас. Вот как хук useOnlineStatus, может быть переписан, используя новый API:

Заметьте, как вам не нужно менять свой компонент чтобы мигрировать на новое API:

function StatusBar() {
  const isOnline = useOnlineStatus();
  // ...
}

function SaveButton() {
  const isOnline = useOnlineStatus();
  // ...
}

Есть дополнительные выигрыши при оборачивании эффектов в пользовательские хуки:

1. Вы делаете поток данных от и к вашему компоненту наиболее явным.
2. Центром логики вашего компонента становится его намерение, и они не перегружаются логикой имплементации эффектов.
3. При добавлении новых функций в React, вам не придётся изменять код компонентов.

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

import { use } from 'react'; // Ещё не доступно!

function ShippingForm({ country }) {
  const cities = use(fetch(`/api/cities?country=${country}`));
  const [city, setCity] = useState(null);
  const areas = city ? use(fetch(`/api/areas?city=${city}`)) : null;
  // ...

Есть больше одного способа реализации

Допустим, вы хотите создать анимацию появления с помощью браузерного API requestAnimationFrame. Можно начать с эффекта, создающего зацикленную анимацию. Во время каждого кадра, вы можете изменять прозрачность DOM-элемента, который передан в ref, пока прозрачность не станет равна 1. Начнём:

Чтобы сделать код более читаемым, можно извлечь логику в пользовательский хук useFadeIn:

Можно оставить код useFadeIn как есть, но вы можете ещё доработать его. Можно вынести код инициализации анимации из useFadeIn в другой пользовательский хук useAnimationLoop:

Однако совсем не обязательно было делать именно так. Как и в случае с обычными функциями, только вам решать, где проводить границы между частями вашего кода. Можно было бы подойти к задаче совершенно иначе: вместо того чтобы оставлять логику внутри эффекта, вы могли бы перенести основную императивную логику в классы:

Эффекты позволяют связывать React с внешними системами. Чем больше необходимо связи между эффектами (может, чтобы делать цепочку анимаций), тем больше смысла полностью вынести логику в пользовательские хуки, как в примерах выше. После этого вынесенный код становится “внешней системой”. Это позволяет эффектам оставаться простыми и читаемыми, поскольку теперь они занимаются только общением с той самой “внешней системой”.

Пример выше предполагает, что анимация будет написана на Javascript. Однако простые анимации вроде появления или исчезания легче делать с помощью CSS анимаций:

Иногда хуки вообще не нужны!