やったこと

Udemy 途中まで視聴

• 「Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版」

学んだこと

再レンダリングされるコンポーネント

• Stateが更新されたコンポーネント
• propsが変更されたコンポーネント
• 再レンダリングされたコンポーネント配下の子要素

変更が激しいコンポーネントを、可能な限り子要素へ持っていくとよさそう。

React.memo

再レンダリングをスキップできる。

React.Callback

関数の新規作成処理を抑えることができる。

  /*毎回新しい関数を生成している扱い*/
  const onClickClose = () => setOpen(false);

  return (
    <>
      <div>
        /*毎回新しい関数をpropsにセットしている、つまりpropsが更新されている扱いとなり、再レンダリングの刑*/
        <ChildArea onClickClose={onClickClose}/>
      </div>
    </>
  );

useEffect

useEffect( 「処理」 , [変更を監視したい変数群] )
第二引数で指定した変数に変更があった場合のみ、第一引数の「処理」を実行する。
第二引数に空配列を渡すと、最初の一回のみ「処理」が実行される。