自己補正するコンポーネント: レンダリング中に状態更新する公式テクニックの解釈

DRANK

Reactにおいてプロダクトの品質を高く保つには、Reactのやり方に合ったコードを書くことが重要です。公式ドキュメントの名物ページ「そのエフェクトは不要かも」には、useEffectの望ましくない使い方と、それに代わるテクニックが紹介されています。この記事で取り上げるのは、その中でも「props が変更されたときに一部の state を調整する」のセクションで紹介されている、レンダリング中にステートを更新するテクニックです。このテクニックは一見すると奇妙で、知ってはいるけど使っていいのかよく分からないという方も多そうです。しかし、一見突飛に見える記述でも、深く理解すれば実はReactのデザインに完璧に則っているというのがReactの公式ドキュメントの特徴です。技術に対する向き合い方として、公式の説明であっても妄信せず批判的に見ることはとても重要です。しかし、Reactの場合は最終的には「すごく考えたけどやっぱり公式ドキュメントが正しかった」に戻ってきてしまうことがとても多いのです。この記事では、皆さんがこの境地にたどり着く助けとなるべく、レンダリング中に状態を更新するテクニックについて考えていきます。テクニックの概要まずは、公…