react 再レンダリングの抑制について

context apiを利用した場合、contextのオブジェクトを参照しているコンポーネントは再レンダリングを促される。

これを抑制するための案

1. そもそもcontextを細分化して関心のあるオブジェクトを絞る
2. contextの値を参照する前にコンポーネントを挟ま込みmemo化する。reduxのconnectが行なっていることに近い。

fluxは利用したい。それを実現する手段としてuseReducerを使いたい

useContextを、wrapしたカスタムフックを提供する
そのカスタムフックはProviderとhocを提供する。hocには値を参照するためのもの、値を更新するためのinterfaceが渡される

結局connect、、

3. contextに渡す値をrefにする。このrefの値が変化した際にレンダリングするか否かはコンポーネントの判断に任せる。

ぱっと見コードが見づらい。コンポーネントでレンダリングを強制するためのsetStateが必要になる

4. Proxyを利用する。reactの実装を確認する

レンダリングコストを許容してcontextの影響範囲をアプリになんの支障もない粒度にとどめる。

5. 値を購読するオブザーバーを用意して強制レンダリングをするためのsetstateをsubscribeする