React useStateメモ

constとuseStateで初期値のみ利用する場合との違い

# const
const client = new HogeClient()
# useState
const client = useState(new HogeClient())

useStateを利用するとコンポーネントが再レンダリングしても変数が再生成されない
(1度だけ作成)

再利用の必要がある場合 -> useState
再利用の必要がない場合 -> const

認証機能のようにクライアントを再利用するケースが多い場合はuseStateを利用する

hookエコシステム

useContextとuseState

useStateが再レンダリングでも再生成されないことから、useCallbackの依存変数に利用することで、関数再生成を抑えることによるパフォーマンス向上が狙える

const client = useState(new HogeClient())

const memorizedFunction = useContext(()=>{},[client]);