React useEffectEvent: Прощай, головная боль от замыканий устаревших значений

Недавно вышедший React 19.2 представил стабильную версию хука useEffectEvent, призванного решить давнюю проблему "замыканий устаревших значений" (stale closures), которая доставляет неудобства многим разработчикам. Этот хук позволяет создавать внутри эффектов стабильные обработчики событий, которые всегда имеют доступ к актуальным props и состоянию, не вызывая при этом нежелательных повторных рендеров. Традиционно, если функция внутри useEffect захватывала переменную из предыдущего рендера, она продолжала использовать её устаревшее значение, что демонстрируется примером с setInterval и count.

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

useEffectEvent предлагает элегантное решение: вынести нереактивную логику в отдельную функцию, обернутую в useEffectEvent. Эта функция, называемая "событием эффекта", ведет себя как обработчик события, вызываемый изнутри эффекта, и всегда имеет доступ к последним значениям props и состояния без необходимости быть в массиве зависимостей useEffect. Благодаря этому можно безопасно удалить такие пропсы, как theme, из массива зависимостей, предотвращая излишние перезапуски эффекта.

До появления useEffectEvent для обхода проблемы замыканий устаревших значений часто использовался useRef, где последнее значение состояния или пропса сохранялось в ref.current. Однако такой подход требовал ручного обновления, снижал читаемость кода, не обеспечивал реактивности в эффектах и не поддерживался линтером. useEffectEvent устраняет эти недостатки, предлагая встроенное и более чистое решение.

Использовать useEffectEvent следует, когда вам нужно получить актуальные props или состояние, не вызывая перезапуск эффекта, или чтобы избежать отключения правил ESLint для пропущенных зависимостей. Важно не злоупотреблять им как способом игнорирования зависимостей и не передавать события эффектов между компонентами. Для оптимальной работы рекомендуется объявлять useEffectEvent рядом с соответствующими эффектами и передавать реактивные значения в качестве аргументов функции события эффекта, если требуется именно их реактивность. Не забудьте обновить плагин ESLint для корректной работы с новым хуком.

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

Оригинал статьи: React useEffectEvent: Goodbye to stale closure headaches