Reactでコンポーネントの再レンダーを強制する方法

Reactでstateが変化していない場合でも再レンダーを強制したいことがあります。

例えば、以下のコンポーネントは読み込むとconsole.logで 'App Render' が表示されますが、stateが変化していない場合でも再レンダーをしたい場合などです。

App.tsx

function App() {
  console.log('App Render')

  return (
    <>
      <h1>App Sample</h1>
    </>
  )
}

export default App

JavaScriptのlocation.reload()のような再レンダー用のReactフックが用意されているかと思っていたのですが用意されておらず、以下のようにuseReducerを使用すれば実装可能だと公式サイトに書かれていました。

App.tsx

import { useReducer } from 'react'

function App() {
  console.log('App Render')
  const [ignored, forceUpdate] = useReducer(x => x + 1, 0)

  function handleClick() {
    forceUpdate()
  }

  return (
    <>
      <h1>App Sample</h1>
      <button onClick={handleClick}>forceUpdate()</button>
    </>
  )
}

export default App

フックに関するよくある質問 – React

ただし、この書き方だとVS Codeで一般的なESListありの環境だと「'ignored' is assigned a value but never used.」という警告が表示されます。

警告はignoredを「_」にして、「// eslint-disable-next-line @typescript-eslint/no-unused-vars」コメントを追記すれば消えるので、警告が気になる方は以下のようにすることをオススメします。

App.tsx

import { useReducer } from 'react'

function App() {
  console.log('App Render')
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [_, forceUpdate] = useReducer(x => x + 1, 0)

  function handleClick() {
    forceUpdate()
  }

  return (
    <>
      <h1>App Sample</h1>
      <button onClick={handleClick}>forceUpdate()</button>
    </>
  )
}

export default App

Reactでコンポーネントの再レンダーを強制する方法

関連した記事