強制的にレンダリングをさせるHooks

import { useState, useCallback } from 'react';

/** 強制的に再レンダリングさせる */
export const useForceUpdate = () => {
  const [, forceUpdate] = useState<undefined | boolean>(undefined);
  return useCallback(() => {
    forceUpdate((s) => !s);
  }, []);
};

使い方

const forceUpdate = useForceUpdate();

...

<p onClick={() => forceUpdate()}>強制的にアップデート</p>

関連記事