Как заставить React‑компонент обновиться принудительно

Условие

Необходимо создать простейший способ принудительно вызвать повторный рендер компонента. Для этого используют хук useState, а функция‑триггер вызывается без какой‑либо бизнес‑логики, лишь бы обновить UI.

const [cnt, setCnt] = useState(0);
const analyticsRef = useRef(0);
const [dummy, trigger] = useState(0);

const handleClick = () => {
  setCnt(s => {
    analyticsRef.current = s + 1;
    return s + 1;
  });
};

useEffect(() => {
  return () => {
    sendToAnalytics(analyticsRef.current);
  };
}, []);

Ответ

Достаточно изменить служебный state на новое значение: const forceUpdate = () => trigger(value => value + 1). Это запланирует рендер без изменения бизнес-данных.

Не меняйте analyticsRef внутри updater setCnt: updater должен оставаться чистым и может вызываться повторно. Синхронизируйте ref отдельным эффектом по cnt. Отправка аналитики из unmount-cleanup требует осторожности: dev Strict Mode может вызвать дополнительную очистку, а завершение вкладки не гарантирует доставку сетевого запроса.