子コンポーネントの無駄な再レンダリングを避けるためにuseReducerとコンテキストを利用する例。
reducerを使わずuseStateとuseCallbackしたハンドラーをコンテキストに渡すことでも同等の処理を実現可能だが、コンテキストに操作が複数あるとそれぞれにuseCallbackする必要がありコードが長くなる。reducerの方が結果としてすっきりするので基本的にuseReducerを使う方が良さそう。
注意点として、useReducerが返すdispatchは一意であることが保証されているが、Context.Providerに渡すvalueにdispatch以外も含める場合にはuseMemoでメモ化しておく必要がある。
React Developer ToolsのHighlight updates when components render.を有効にすると再レンダリングの様子がよくわかる。