componentを強制的に再レンダリングする（js, react）

諸般の事情でやむを得ずコンポーネントを再レンダリングしたい時ってありませんか？
普通に作ってる時には滅多に無いと思いますが、配列内の一部のプロパティを更新したが、該当の表示ロジックは当該プロパティではなく配列のインデックスに依存しているだけの場合とか。
素直に値を引き渡す形にリファクタできるならそれに越したことはないんですが、更新を監視するためだけに値を使わないhookを置くのが若干気持ち悪かったり。

そういう時はこうしましょう。
（これも値使わないhook置いてるだけなので微妙っちゃ微妙だが）

const [ignored, forceUpdate] = useReducer(x => x + 1, 0);

function handleClick() {
  forceUpdate();
}

基本的に禁じ手なので使わないに越したことはないですが、必要に応じて影響範囲の狭い箇所で使うくらいは私は許容します。

Hooks FAQ – React

AJavaScriptlibraryforbuildinguserinterfaces

legacy.reactjs.org

こちらの新しい方のサイトにはthis.forceUpdate()メソッドがあるように書いてますが、classコンポーネントならまだしも、関数コンポーネントからは呼べなさそうに見えるのでuseStateなり、適当なhookで再レンダリングを促せばいいと思います。

Component – React

Thelibraryforwebandnativeuserinterfaces

react.dev