React コンポーネントを強制的にレンダリングする

1. React コンポーネントを強制的にクラスコンポーネントでレンダリングする
2. React コンポーネントを関数コンポーネントで強制的にレンダリングする

デフォルトでは、React コンポーネントは、state や props の変更によって再レンダリングするようにトリガーされます。ほとんどの場合、React のベストプラクティスに従っている場合、この動作は目的の結果を達成するのに十分すぎるほどです。

場合によっては、フレームワークのデフォルトの動作では不十分であり、コンポーネントを手動で再レンダリングする必要があります。その前に、コードを注意深く調べてください。再レンダリングを強制することは、限られた数の状況でのみ実行可能なオプションです。

React コンポーネントを強制的にクラスコンポーネントでレンダリングする

正しく使用すると、React クラスコンポーネントの setState() メソッドを呼び出すと、常に再レンダリングがトリガーされます。shouldComponentUpdate() ライフサイクルには、この動作を防ぐ条件付きロジックが含まれている場合があります。

setState() を呼び出しているのにコンポーネントが更新されない場合は、コードに問題がある可能性があります。forceUpdate() メソッドを使用する正当な理由があることを確認してください。

this.forceUpdate()

render() メソッドが state または props 以外のデータに依存していて、そのデータの変更に基づいて再レンダリングをトリガーする場合は、forceUpdate() メソッドを使用できます。

コード例：

class App extends Component {
  render() {
    return (    
    <div>
        <h1>{Math.random()}</h1>
        <button onClick={() => this.forceUpdate()}>Force Update</button>
    </div>)
  }
}

この場合、state または props を変更しても更新はトリガーされません。それを行うのは forceUpdate() メソッドです。

ベストプラクティス

React 開発者は、最後の手段として forceUpdate() のみを使用する必要があります。レンダリング関数は、props と state からのみ読み取る必要があります。これらのガイドラインに従うことで、React コンポーネントのシンプルさと効率を確保できます。

forceUpdate() メソッドを頻繁に使用することはお勧めしません。頻繁に使用する習慣がある場合は、コードを調べて、改善できるかどうかを確認することをお勧めします。

React コンポーネントを関数コンポーネントで強制的にレンダリングする

関数コンポーネントには、forceUpdate() メソッドは含まれていません。ただし、useState() または useReducer フックを使用して、強制的に再レン​​ダリングすることは可能です。

useState

クラスコンポーネントの setState() メソッドと同様に、useState() フックは、更新された state オブジェクトの値が異なる限り、常に更新をトリガーします。

useState() フックを使用して更新を強制するカスタムフックを作成できます。このような再利用可能なフックのサンプルコードは次のとおりです。

const useForceUpdate = () => {
  const [ignored, newState] = useState();
  return useCallback(() => newState({}), []);
}

ご存知のとおり、useState() フックは、state の現在の値とそのセッターの 2つの値を返します。この場合、必要なのは newState セッターだけです。

useReducer

useState フックは内部で useReducer を使用するため、このフックを直接使用して、より洗練されたソリューションを作成できます。React 公式ドキュメント推奨ソリューションは useReducer() も使用します。サンプルソリューションは次のとおりです。

const [any, forceUpdate] = useReducer(num => num + 1, 0);
function handleChange(){
    forceUpdate();
}

useReducer() フックは、現在の state 関数と dispatch 関数を返します。上記の例では、[variableName, dispatchName] 構文を使用してこれらの値を格納します。

この例では、handleChange() ハンドラーを呼び出すと、コンポーネントが毎回更新されます。

フックは、このように使用するためのものではありません。これらのソリューションをテストまたは異常値のケースに使用してみてください。