React.FCでもforceUpdateしたい

React管理下にない値の変更時に描画を更新したい。

あまり使いたいものでもないですが、React.Componentでは適切なタイミングでthis.forceUpdate()を使うことになります。

今回は関数コンポーネントで作成中にforceUpdateに当たる処理が必要になったのでどうにかしようという内容です。

これを簡単に言い換えるとHookが欲しい。

しかし、そのものはないようなので他Hookを使って同様の結果になるようにします。

forceUpdateを使うためのuseForceUpdateを考えます。

const useForceUpdate = () => {
  const [value, setValue] = React.useState(0);
  return () => setValue(value => ++value);
}

const useForceUpdate = () => {

const [value, setValue] = React.useState(0);

return () => setValue(value => ++value);

}

再描画するためだけのStateを更新する関数を作り、呼び出して更新させます。

ただ１回呼び出すためにこれを書くのも少し変な気がする。

Stateの更新をコールバック化して呼び出す。

  const [, setState] = React.useState();
  const forceUpdate = React.useCallback(() => setState({}), []);

1 2	const [, setState] = React.useState(); const forceUpdate = React.useCallback(() => setState({}), []);

これならコンポーネント内にちょっと書くだけで使えます。

より簡略化するならuseReducerを使ってdispatchとして定義すればいいです。

const [, forceUpdate] = React.useReducer(x => ++x, 0);

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

これは公式の「forceUpdate のようなものはありますか？」にあるやつをさらに簡潔にしたものです。

今回はしかたなく使っていますが、煩雑になりがちなのでできるだけ使わなくて済むやり方を見つけたいですね。