React docs betaのuseStateの解説を読んだときに得た知見

<h2>useStateの引数には関数を渡すことができる</h2>
以下のように<code>createInitailTodos</code>呼び出しの結果の値を初期値として設定することができるが、この場合毎回のレンダリングで<code>createInitailTodos</code>が呼び出されてしまう。<code>createInitailTodos</code>が返す値はコンポーネントの初回のレンダリングにしか必要がないので毎回のレンダリングで<code>createInitailTodos</code>が呼び出され初期値が計算されるのは無駄である。
<pre><code class="language-tsx">const TodoList: FC = () =&gt; {
 const [todos, setTodos] = useState&lt;Todo[]&gt;(createInitailTodos()); 

 // ...
};
</code></pre>
setStateに関数を渡すことでこの無駄な呼び出しを防ぐことができる。
<pre><code class="language-tsx">const TodoList: FC = () =&gt; {
 const [todos, setTodos] = useState&lt;Todo[]&gt;(createInitailTodos); 

 // ...
};

</code></pre>
上のように書くことで<code>createInitailTodos</code>はTodoListコンポーネントの初回レンダリングのときにのみ呼び出されることになる。無駄な関数呼び出しが減るためパフォーマンスの向上が期待できる。
<h2>propsが変化したときにstateを変化させる</h2>
「前回のpropsに基づいてstateを決定する」には次のように書く。
例えば「ボタンを押してカウントを増減させる機能」に加え「カウントが前回の値よりも増加したのか減少したのかを表示する機能」を実装する場合次のように実装することができる。
以下の実装ではレンダー中に<code>set</code>関数を使用しており、普通は避けられるべき実装である。（if文の条件を間違えると無限ループに陥るため。Reactは同じ値でstateを更新すると子コンポーネントのレンダリングや副作用の実行を回避するがstateを持つコンポーネント自身はレンダリングされる可能性がある。）
レンダリングの途中で<code>set</code>が呼ばれた場合、そのコンポーネントがレンダリングされた直後、子のコンポーネントがレンダリングされる前にそのコンポーネントが再レンダリングされる。
<pre><code class="language-tsx">import { useState } form &#x27;react&#x27;;

type Props = {
 count: number;
};

export const CountLabel: FC&lt;Props&gt; = ({
 count
}) =&gt; {
 const [prevCount, setPrevCount] = useState(count);
 const [trend, setTrend] = useState&lt;&#x27;increasing&#x27; | &#x27;decreasing&#x27; | null&gt;(null);

 if (prevCount !== count) {
 setPrevCount(count);
 setTrend(count &gt; prevCount ? &#x27;increasig&#x27; : &#x27;decreasing&#x27;);
 }

 return (
 &lt;&gt;
 &lt;h1&gt;{count}&lt;/h1&gt;
 {trend &amp;&amp; &lt;p&gt;The count is {trend}&lt;/p&gt;}
 &lt;/&gt;
 );
};
</code></pre>

useStateの知見