useStateを調べたら、Reactのレンダリングもついでに分かったよって話

ここ最近Reactに入門してみて、useStateに遭遇して、「何それ」ってなったので今回はそれを解説してきます。
※タイトルがよくないかもしれませんが、
あくまでこの記事は、useStateについてまとめた記事であることをご了承ください。

useStateとは何か？

結論から言うと、useState()は関数コンポーネントでstateを管理するための機能です。
ただ、これだけだと全くわからないと思うので詳しく解説していきます。

useStateを理解するためには以下の２つのことを理解する必要があります。
1. stateとは何か？
2. Reactにおけるレンダリングとは何か？

1. Stateとは何か？

Stateとは値が変わると再レンダリングが発生する変数のことをいいます。
文章だけ見てもよくわからないと思うので例を見ていきます。
stateを使えるようにするには、まずuseStateをインポートすれば使えるようになります。
使い方は他の記事などを参考にしていただけると幸いです。

import React, { useState } from 'react';

export default function CountNumber() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}回クリックしましたよ！</p>
      <button onClick={() => setCount(count + 1)}>
        ここをクリックしてください
      </button>
    </div>
  );
}

実際に画面を見てみましょう。

この例のように、0から１に値が変更されたとき、レンダリングが行われる変数のことをいいます。
次の章で、Reactにおけるレンダリングについて詳しくみていきます。

2.レンダリングとは何か？

よくレンダリングというと、ブラウザに画面を表示することを指すことが多いです。
詳しくは、以下の記事に詳しく書かれていますので、そちらを参照ください

しかしながら、Reactにおけるレンダリングは、ブラウザに表示するレンダリングとは意味が違います。
実際に、公式ドキュメント(Beta版)では言葉の意味を分けるために、Reactにおけるレンダリングはレンダリングと表現し、ブラウザにページを表示することをペイントと言葉を分けています。

公式ドキュメントを読むと、
レンダリングとはReactがコンポーネントを呼び出すことと書いてあります。

“Rendering” is React calling your components.
公式ドキュメント

つまり、Reactにおけるレンダリングという言葉の意味には、画面に何らかを表示させるだけじゃなく、コンポーネントを呼び出して値を更新していくことも言葉の意味に含まれているんです。

どのようなプロセスを経てコンポーネントが呼び出される（レンダリング）のかというと、
1.トリガーをレンダーする
2.コンポーネントをレンダーする
3.DOMにコミットする

マジで意味不明だと思いますが、１つ１つ解説していくので安心してくださいね！

1.トリガーをレンダーする

トリガーと言う言葉には、「引き金」という意味があります。つまり原因ですね。
トリガーは2種類あります。
1つ目は初期レンダリング。要はアプリケーションを起動したときです。
2つ目は画面更新時に発生する再レンダリングです。stateが変更されたときなどですね。

つまり、この２つの時にトリガーが発生するということです。

2.コンポーネントをレンダーする

１つ目でみた、初期レンダリング、もしくは画面更新時に発生する再レンダリングがありましたね。
この２つのうちどれかが発生した時に、Reactはコンポーネントを呼び出して、画面に何を表示するかを決定します。

レンダリングする際には、更新する前と後の差分を見つけています。

3.DOMにコミットする

先程の2での変更部分や、初期レンダリングを経て画面に表示させています。

まとめ

useStateとは関数コンポーネントでstateを管理するための機能であるということ。
そしてstateとは値が変わると再レンダリングが発生する変数のことをいい、レンダリングとは、コンポーネントを呼び出すことだということがわかりました。

【参考資料】