PassFront
  1. PassFront
  2. База знаний
  3. Хуки

Как затриггерить useEffect?

Хуки

«Затриггерить» useEffect можно единственным легальным способом: изменить значение одной из его зависимостей (по Object.is) — эффект перезапустится после следующего рендера.

Штатные способы

Изменить зависимость-state:

useEffect(() => {
  load(page);
}, [page]);

setPage(2); // рендер → deps отличаются → эффект

Паттерн «триггер-счётчик» — когда нужно перезапустить эффект «по кнопке», без содержательного изменения данных:

const [reloadKey, setReloadKey] = useState(0);

useEffect(() => {
  fetchData();
}, [reloadKey]);

<button onClick={() => setReloadKey((k) => k + 1)}>Обновить</button>

Через props/context — эффект зависит от пропа; родитель меняет проп — эффект ребёнка срабатывает.

Пересоздание компонента: смена key размонтирует и смонтирует заново — сработают все mount-эффекты ([]).

Что НЕ триггерит эффект

  • Мутация объекта в deps (ссылка та же).
  • Запись в ref.current (рендера нет — deps не сравниваются).
  • setState с тем же значением (Object.is — рендер пропущен).
  • Рендер без изменения deps (эффект с deps не перезапускается «просто от рендера»; перезапускается только эффект без массива).

Оговорка

Если хочется «просто вызвать код по событию» — эффект не нужен: вызывайте функцию прямо в обработчике. Эффекты — для синхронизации с внешними системами, а искусственные триггеры (счётчики) — точечный приём для «перезагрузить», не общий стиль. Для перезапроса данных в React Query есть refetch().

Коротко для собеседования

Эффект триггерится изменением его зависимостей: обновить state/prop из deps, либо искусственный «счётчик перезапуска» setReloadKey((k)=>k+1); полный ремоунт — сменой key. Не работают мутации, ref и сеттер с тем же значением. Но код «по действию пользователя» правильнее вызывать в обработчике, а не искусственно триггерить эффект.

Другие вопросы раздела