世界一優しいReactの基本その6 -再レンダリングとは-

はじめに

前回はReactのStateを学びました。今回はReactの再レンダリングについてを書いていきたいと思います。

再レンダリング

Reactの重要な機能のPropsやStateについてマン出来ましgたが、これらに加えて再レンダリングについて知る必要があります。前回作ったボタンを押すとカウントアップするAppですが、画面をリロードしていないのに、ボタンを押すとカウント数が自動で更新されていました。これはコンポーネントが再レンダリングされたからです。

sandboxApp: https://codesandbox.io/s/use-staet-test-xykxgd

setStateによってState変数が更新された時に、コンポーネントは再び最初の処理が実行されます。
試しに、console.logを仕込むとボタンをクリックするたびにconsole.logが表示されるのでわかりやすいです。

App.jsx

import { useState } from "react";

export const App = () => {
    // ボタンをおすと、これが毎回実行される
    console.log("再レンダリング");
    
    // useStateを用いてnumを管理する
    const [num, setNum] = useState(0);

    // buttonを押したときにsetStateを用いてカウントアップする
    const onClickButton = () => {
        setNum(num + 1);
    };
    
    return (
    <div>
      <h1>カウント数</h1>
      <p>{num}</p>
      <button onClick={onClickButton}>クリック</button>
    </div>
    );
  
};

Stateが変更されると、最初から関数コンポーネントが処理され、差分があるDOM（要素）を検知し、変更を反映して画面病がをおこなっています。これを再レンダリングと呼びます。

ただし、再レンダリング時に全て関すを再実行するわけではなく、初回の実行時と再レンダリングの実行時では実行されるものとされないものがあります。例えば、useState(0);のような0として初期値を入れているものは再レンダリング時には実行されません。

副作用とuseEffect

React Hooksの便利機能でuseStateを使ってきましたが、useEffectという便利機能があります。
useEffectはコンポーネントの副作用を制御する機能です。

import { useEffect } from 'react';

useEffecのフォーマットです。パッと見すごくわかりにくいですが、useEffectはある値が変わった時だけ、ある処理を実行するという使い方になります。依存する値が変わった変わったときだけ、実行する関数を実行する、というだけです。

useEffect(実行する関数, [依存する値]);

例えばnumという値が変わったときだけalertを実行する場合は以下のようにかけます

import { useEffect } from 'react';

export const App = () => {
    // numかわったときだけalertが実行される
    useEffetct( () => {
        alert("Numが変更された！！);
    }, [num]);
}

第1引数にはアロー関数で処理を記載し、第2引数の依存する値にnum(必ず配列)を記載します。
この特定のときだけ、という制御をうまく使うことによって再レンダリングのときにこれだけ実行したいというような制御が可能になります。小さいアプリケーションを作っているうちは再レンダリングの処理はきになりませんが、規模が大きくなるほどこういった制御が必要になってきます。

まとめ

Reactでは再レンダリングが実行されることによってブラウザをリロードしなくてもリアルタイムに画面が変更されます。
しかし、正しい制御をしないと再レンダリングが重くなってしまいます。そのためにuseEffectという機能を学びました。