実を言うと、hooksを触り始めたのはここ最近で、

偉そうなことは言えないのだが、

付け焼き刃の知識でhooksを触ると痛い目を見るようだ。

というはなし。

 

state使いたいならuseState、

ライフサイクルに関わる事ならuseEffect使えばいいんでしょ？

と思っていた時期が僕にもありました。

 

しかしそれは大間違いでした。

その考えで先に進むと、たどる未来はあほみたいな再描画と

その影響によるバグでした。

 

stateについて言いたいことは、

描画に直接響かないものはuseRefを考えましょうと言う事。

知識が甘い(僕です)人は、ref? 基本使わないあれじゃんwww

と小馬鹿にしてきそうです。

 

しかしuseRefは、refの代用だけでなく、

再描画に影響せず、値を保持しておく使い方ができます。

 

次にuseStateで生成されたset関数は、

可能な限り前回の値を使ったほうがいいようです。

 

stateの更新はなんらかのイベント内で行うことが多いと思いますが、

そのイベント関数、そのままだと再描画時に毎回生成されます。

 

可能な限りuseCallbackを使用して、関数のメモ化を図るべきなのですが、

これまたuseCallbackをそのまま使用しても

メモ化の効果を受けられない場合があります。

 

少し考えればわかりそうな内容の為、詳細ははぶきますが、

可能な限り

`setHoge(prevHoge => !prevHoge)`

などのように前回の値を利用するのがコツのようです。

 

useEffect・・だけにとどまりませんが、

hooksのほとんどは第二引数に依存関係にある値を指定できます。

空配列を指定すると、mount,unmount時のみ動くeffectが書ける話が出ますが、

依存している値を指定すれば、その値の更新にもeffectが発火します。

 

これを利用すれば、無駄な再描画を防げるだけでなく、

正しいタイミングで再描画がかけられるようになるわけです。

 

一部のhooksのみを使う。。なんていう道は存在しないようです。

Hooks怖い子。