【React】useStateの乱用を避ける

はじめに React の状態管理で最も基本的な方法は、useState フックを使ったローカルな状態管理です。ただ、何でもステートにしておけば良いというものでもありません。今回は、具体的なケースを利用して、useStateを使わない選択肢について説明します。 お題 今回は、全選択可能なチェックボックスを実装することを考えます。以下のような、テーブルの行を複数選択できるようなチェックボックスの UI を想定してみましょう。 各項目には、選択状態を表すチェックボックスがあり、ヘッダー部分には全項目を一括で操作するためのチェックボックスがあります。 各項目のチェックボックスは、チェックが有るか無いかの 2 通りです。ヘッダー部分のチェックボックスは、全項目が選択されているか、全項目が未選択か、選択と未選択が混じっているかの 3 通りになります。ちなみに、HTML のチェックボックスで混じっている

[shingo-sasaki-0529]

別々の状態として扱ってたものが、実はある状態に基づいて機械的に決定する規則があることに突然気づくこと、稀によくある。