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

Reactは、PropsまたはStateが更新されるたびに、コンポーネントを自動的に再レンダリングします。

どちらも変更されない場合は、再レンダリングは発生しません。

しかし、初心者はコンポーネントを再レンダリングするのが非常に難しいと感じることがよくあります。

まず、コンポーネントを再レンダリングするために使用できる方法を見て、本当に再レンダリングを強制するべきか、 Reactに処理させるべきかについて説明します。

Reactコンポーネントを再レンダリングさせる方法とタイミングを真に理解するには、Reactの内部動作を理解する必要があります。

つまり、コンポーネントを強制的に再レンダリングするべきかどうかを学習すれば、Reactの内部動作を理解するのに非常に役立ちます。

Reactコンポーネントを強制的に再レンダリングする必要はあるのか？
- Reactの状態が正しく更新されない

Reactコンポーネントを強制的に再レンダリングする必要はあるのか？

Reactにおいて、Stateは不変であることが求められます。

したがって、通常はコンポーネントを強制的に再レンダリングすることは好ましくありません。

実際、Reactにおける自動再レンダリングの失敗は、コードベースに根本的なバグがあることが多いです。

このようなバグの一般的な例としては、Stateの不正な更新が挙げられます。

たとえば、Stateを変更する際に、元のStateオブジェクトを変更してしまうと、Reactは変更を検出できず、再レンダリングが正しく行われないことがあります。

これを回避するためには、Stateオブジェクトを直接変更するのではなく、新しいオブジェクトを作成して更新するようにする必要があります。

また、Reactコンポーネントにおける再レンダリングの最適化については、Reactの公式ドキュメントに詳細な情報が掲載されています。

Reactの再レンダリング最適化 - どこで勘違いしているのか？

例えば、「React.memo」を使用することで、Propsが変更された場合のみ再レンダリングされるようにすることができます。

バグが原因な一般的な例を示します。

Reactの状態が正しく更新されない

Reactで状態を管理する場合、useStateフックを使用することが一般的です。

しかし、状態の更新方法によっては思わぬバグが発生することがあります。

たとえば、以下のようにuseStateフックを使用し、ボタンをクリックするとユーザーデータを更新するコンポーネントがあるとします。

const App = () =>  {
  const [user, setUser] = useState({ name: "", age: 0, });

  const updateUser = () => {
    user.name = "Taro";
    setUser(user)
  }

  return (
    <div>
      <h1>Name: {user.name}</h1>
      <button onClick={updateUser}>
       Click me
      </button>
    </div>
  );
}

上記のコンポーネントでは、ボタンがクリックされてもユーザーの名前が更新されません。

これは、Reactが状態の変化を検知できないためです。

Reactでは、状態の現在の値と新しい値が同じオブジェクトを参照しているかどうかを確認しています。

しかし、上記のコードでは、ユーザーオブジェクトのnameプロパティを更新しようとしていますが、setUserメソッドで同じオブジェクトを参照しているため、Reactは状態の変化を検知できません。

この問題を解決する方法は、更新された値で新しいオブジェクトを作成することです。

スプレッド構文（...）を使用して、状態オブジェクトのコピーを作成し、新しいオブジェクトで更新したいプロパティを変更します。

つまり、以下のようにupdateUser関数を書き換えます。

  const updateUser = () => {
    setUser({
      ...user,
      name: "Taro",
    })
  }

これで、誤って更新された状態を再レンダリングできるようになります。

See the Pen React 強制再レンダリング useCallback and useStateフック例1 by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

Reactで状態を管理する際には、このような注意点を念頭に置いてコーディングすることが重要です。

不適切に更新されたProps

Reactでは、Propsを誤って更新することがあると、通常はバグが発生します。

そのため、Propsを正しく更新することが重要です。

例えば、以下のようなコードでは、初回ロード後にClockコンポーネントは更新されません。

let time = new Date();

const App = () =>  {
useEffect(() => {
const intervalId = setInterval(() => {
time = new Date()
}, 1000);
    return () => clearInterval(intervalId);
  }, []);

return (
    <Clock time={time} />
  );
}

上記のコードを修正するには、time変数を毎秒のランタイムで更新して、Clockコンポーネントに渡す必要があります。

これは、以下のようにsetInterval()を使用することで実現できます。

const App = () =>  {
const [time, setTime] = useState(new Date());

useEffect(() => {
const intervalId = setInterval(() => {
setTime(new Date());
 }, 1000);
    console.log(time)
return () => clearInterval(intervalId)
}, [])
return (
    <div>
    </div>
  );
}

code-pen-demo

こうすることで、time状態が更新され、App親コンポーネントが再レンダリングされ、その結果Clockの子コンポーネントも更新された時刻で再レンダリングがトリガーされます。

Reactでは、状態の更新が再レンダリングのトリガーとなり、その更新がPropsを通じて伝搬されることになります。

したがって、状態の更新は非常に重要です。

useEffectとuseStateフックを使用することで、状態の更新を簡単に行うことができます。

Reactは、デフォルトで自動レンダリングすることにより、複雑なアプリケーションの構築と実行に十分な性能を発揮します。

しかし、開発者は時折、デフォルトの動作をバイパスし、コンポーネントを手動で再レンダリングする必要があります。

このような場合、クラスコンポーネントではforceUpdate メソッドを呼び出すことによって強制的に再レンダリングすることができます。

この記事では、クラスコンポーネントにおける再レンダリングについては深く掘り下げませんが、forceUpdate メソッドを使用してクラスコンポーネントを強制的に再レンダリングする方法を以下に示します。

クラスコンポーネントの更新を強制する

class App extends React.Component {
constructor(props) {
 super(props);
  this.state = {
   counter: 0
};
this.changeClick = this.changeClick.bind(this)
}

changeClick = () => {
//強制的に再レンダリング
this.forceUpdate()

this.state.counter = + 1
}
render() {
 return (
<div>
 <p>
counter: {this.state.counter}.
 </p>
<button 
type="button" 
onClick={this.changeClick}>Change
</button>
</div>
    );
  }
}

上記の例では、コンポーネントがマウントされたときの状態が更新されます。

See the Pen React クラス強制再レンダリング by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

setState()を使用せず、ボタンをクリックするとReactのforceUpdate()メソッドで0から1へ強制的に再レンダリングさせている事が確認できます。

StateコンポーネントまたはPropsの変更が行われるたびに自動的にトリガーされます。

このように、クラスコンポーネントでは再レンダリングをトリガーするための組み込みメソッドを提供しています。

ですがこの方法はお勧めできません。

新しいレンダリングを作成するには、常にPropsとStateを使用する必要があります。

基本的には、テストやその他のエッジケースでの使用となります。

Reactでの関数コンポーネントを強制的に再レンダリングする必要がある場合は、いくつかの方法があります。

関数コンポーネントの更新を強制する

Reactには、クラスコンポーネントに存在するようなforceUpdate()で強制再レンダリングするための公式APIやReactフックは存在しません。

つまり、関数コンポーネントでは、インスタンスthisがないので、this.forceUpdate()を呼び出すことができません。

しかし、関数コンポーネントでも強制再レンダリングをする方法があります。

具体的には、useState、useReducer、useCallback、useEffectなどのフックを使ってコンポーネントを強制的に再レンダリングできます。

例えば、useStateフックを使ったカスタムフックを作成し、それを使ってコンポーネントを再レンダリングすることができます。

useStateは、現在の状態を表す値とそのセッターを返します。

セッターを使用して値を更新すると、関数コンポーネントが再レンダリングされます。

以下に、useForceUpdateという名前のカスタムフックの例を示します。

// custom hook

const useForceUpdate = () => {
const [count, setCount] = useState(0); 
return () => setCount(e => count + 1); 
}

let value = 0;

const App = () => {

const forceUpdate = useForceUpdate();
    
return (
<div>
<h1>Count: {value++}</h1>
<button onClick={forceUpdate}>
 re-render
</button>
</div>
    );
}

See the Pen React 強制再レンダリング useStateフック by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

上記の例では、useForceUpdateというカスタムフックを定義しています。

これは、コンポーネントの状態をインクリメントして、Reactに再レンダリングを指示するためのものです。

このカスタムフックを使うと、ボタンがクリックされるたびにコンポーネントが再レンダリングされます。

以上のように、Reactフックを使って関数コンポーネントを強制的に再レンダリングすることができます。

ただし、過剰な再レンダリングを引き起こさないように注意してください。

では、useReducerフックを使用して強制的に再レンダリングする例を見てみましょう。

以下は、このフックを単体で使用した簡単な例です。

const App = () => {
const [, updateState] = useReducer((x) => x + alert(1, 0))

return (
<div className="App">
<button onClick={() => updateState()}>
Force Update
</button>
</div>
  );
}

See the Pen React 強制再レンダリング useReducer by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

上記では、useReducerフックの配列内に異なる関数を使用しています。

通常、この配列内には状態を格納するための変数が含まれますが、今回はそれを省略しています。

ボタンがクリックされるたびにupdateState関数が実行され、再レンダリングが強制的に行われます。

この例は、簡単であると同時に、useReducerフックが再レンダリングを引き起こす方法を示しています。

このような機能は、コンポーネントの状態を管理する際に非常に有用です。

公式React ドキュメントでも、カウンターを使用し状態が変化していない場合でも再レンダリングを強制することが可能な事が記載されております。

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

useCallback、useState、useEffectフックでの使用例

Reactでは、コンポーネントの状態(State)が更新された時に、自動的に再レンダリングされます。

しかし、状態が更新されない場合でも、強制的に再レンダリングする必要がある場合があります。

そのような場合には、useCallbackフックを使用することができます。

useCallbackフックは、メモ化されたコールバック関数を返します。

この関数は、親コンポーネントから子コンポーネントに安全に渡すことができます。

これにより、子コンポーネントが再レンダリングされることがないようになります。

例えば、以下のようなコードがあります。

状態に新しいオブジェクトを作成するという、興味深い方法です。

const [, updateState] = useState();
const forceUpdate = useCallback(() => updateState({}), []);

const App = () => {

const [, updateState] = useState();

const forceUpdate = useCallback(() => updateState({}), []);

 console.log("rendering...");

return (
<div className="App">
<button onClick={forceUpdate}>
Click me
</button>
   </div>
 );
}

See the Pen React 強制再レンダリング useReducer フック by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

上記のコードでは、空の状態を作成し、useCallbackフックを使用して、メモ化されたコールバック関数を作成しています。

これにより、コンポーネントのライフサイクルを通じて、コールバック関数が一定に保たれ、子コンポーネントにPropsとして安全に渡すことができます。

そして、forceUpdate関数を使用して、コンポーネントが強制的に再レンダリングされるようになります。

しかし、このアプローチは再検討する必要があります。

ほとんどの場合、更新を強制する必要がある場合は、何か間違ったことをしている可能性があります。

強制的に再レンダリングすることは、パフォーマンスの低下や、予期しない結果をもたらす可能性があるためです。

上記のコード以外にも、updateState関数にコールバックを渡すことも可能です。

以下のようなコードがあります。

const  App = () => {
const [, updateState] = useState(0);
const forceUpdate = useCallback(() => updateState((x) => x + console.log("rendering...")), []);

return (
<div className="App">
<button onClick={() => forceUpdate()}>
Click me
</button>

</div>
  );
}

See the Pen React 強制再レンダリングコールバックバック by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

上記のコードでは、初期状態を0として、useCallbackフックを使用して、メモ化されたコールバック関数を作成しています。

そして、updateState関数にコールバックを渡すことで、状態の更新と再レンダリングをトリガーしています。

それでは、実用的な例をインクリメントとデクリメントで解説していきます。

まず、以下のコードをご確認ください。

import React, { useState, useCallback } from 'react';

const App = () => {
  const [, setCount] = useState(0);

  const incrementCount = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  const decrementCount = useCallback(() => {
    setCount(prevCount => prevCount - 1);
  }, []);

  return (
    <div className="App">
      <button onClick={incrementCount}>Increment</button>
      <button onClick={decrementCount}>Decrement</button>
    </div>
  );
}

export default App;

上記のコードでは、状態変数の値を使用せず、第一要素を無視しています。この場合、setCount関数を使用して状態を更新することはできますが、実際の値を参照することはありません。

useStateフックの第一要素を無視して状態を更新する場合でも、その値をブラウザ上に表示するには、他の手段を使用する必要があります。

例えば、useEffectフックを使用して状態の変化を監視し、その値を表示することができます。

以下に、useEffectを使って状態の値を表示する例を示します。

import React, { useState, useCallback, useEffect } from 'react';

const App = () => {
  const [, setCount] = useState(0);

  const incrementCount = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  const decrementCount = useCallback(() => {
    setCount(prevCount => prevCount - 1);
  }, []);

  useEffect(() => {
    // 状態の値が変化したときに実行されるコード
    console.log("Count:", setCount);
  }, [setCount]);

  return (
    <div className="App">
      <button onClick={incrementCount}>Increment</button>
      <button onClick={decrementCount}>Decrement</button>
    </div>
  );
}

export default App;

上記のコードでは、useEffectフックを使用して状態の値の変化を監視しています。

依存配列にsetCountを指定することで、setCountが変化するたびにコールバック関数が実行されます。

useEffectの中で、状態の値を表示するためにconsole.logを使用していますが、これをブラウザ上に表示するためには、実際のHTML要素に表示する方法を追加する必要があります。

例えば、<h1>要素を使って状態の値を表示することができます。

import React, { useState, useCallback, useEffect } from 'react';

const App = () => {
  const [, setCount] = useState(0);
  const [displayCount, setDisplayCount] = useState(0);

  const incrementCount = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  const decrementCount = useCallback(() => {
    setCount(prevCount => prevCount - 1);
  }, []);

  useEffect(() => {
    setDisplayCount(count);
  }, [count]);

  return (
    <div className="App">
      <h1>Count: {displayCount}</h1>
      <button onClick={incrementCount}>Increment</button>
      <button onClick={decrementCount}>Decrement</button>
    </div>
  );
}

export default App;

上記の修正コードでは、displayCountという新しい状態変数を導入し、useEffect内でcountの値をdisplayCountに反映させるようにしています。<h1>要素内でdisplayCountを表示しています。

これにより、状態の値がdisplayCountに反映され、<h1>要素内で表示されます。

useEffectの依存配列にはcountを指定しているため、countが変化するたびにuseEffectのコールバック関数が実行され、displayCountが更新されます。

つまり、countの値を状態として保持しつつ、displayCountを介してブラウザ上に表示することができます。

setCountを使用して状態を更新する際には、自動的に再レンダリングがトリガーされ、useEffect内のコールバック関数が実行されます。

したがって、countの値をブラウザ上に表示するためには、displayCountを使ってその値を反映させる必要があります。

これにより、useStateの第一要素を無視しつつも、状態の値をブラウザ上に表示することができます。

フォームの入力値のリセット

import { useState, useCallback } from 'react';

const App = () => {
  const [, setInputValue] = useState('');

  const clearInput = useCallback(() => {
    setInputValue('');
  }, []);

  return (
    <div className="App">
      <input
        type="text"
        value={''} // 第一要素を無視して空の値を設定
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={clearInput}>Clear</button>
    </div>
  );
}

export default App;

上記の例では、useStateフックを使用してフォームの入力値を管理しています。

しかし、第一要素（inputValue）を無視しています。代わりに、setInputValue関数のみを受け取っています。

clearInputコールバック関数は、ボタンがクリックされたときに呼び出されます。この関数内で、setInputValue('')を呼び出しています。これにより、入力フィールドの値が空にリセットされます。

入力フィールドは、valueプロパティを空の文字列に設定しています。

ここでは、第一要素を無視しているため、実際の入力値を反映することはありません。代わりに、常に空の文字列が表示されます。

また、入力フィールドの変更はonChangeイベントハンドラを使用して処理され、このイベントハンドラは、入力値が変更されるたびに呼び出され、setInputValue関数を使用して新しい値を設定します。

これにより、入力フィールドの値を制御しつつ、ボタンをクリックすることで入力値をリセットすることができます。

タブ切り替え

import { useState, useCallback } from 'react';

const App = () => {
  const [, setActiveTab] = useState('tab1');

  const changeTab = useCallback((tab) => {
    setActiveTab(tab);
  }, []);

  return (
    <div className="App">
      <button onClick={() => changeTab('tab1')}>Tab 1</button>
      <button onClick={() => changeTab('tab2')}>Tab 2</button>

      {activeTab === 'tab1' && <div>Content of Tab 1</div>}
      {activeTab === 'tab2' && <div>Content of Tab 2</div>}
    </div>
  );
}

export default App;