𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸 𝗣𝗿𝗶𝗻𝗰𝗶𝗽𝗹𝗲𝘀

React Hook の原則

useEffect を何にでも使うのはやめましょう。多くの開発者がこのフックを誤用しています。これはバグの原因となり、コードの可読性を低下させます。

useEffect の使用を制限しましょう。

1ページにつき useEffect は1つに留めるようにしてください。同じ状態に対して多くのフックを使用すると、混乱を招きます。どのフックがどの状態を更新しているのか、把握できなくなります。

ユーザーイベントに useEffect を使うのはやめましょう。

クリックやタップに useEffect を使用しないでください。代わりにイベントハンドラーを使用しましょう。

• 悪い例: クリック後に状態を更新するために useEffect を使用する。
• 良い例: onClickBar のような関数を使用して状態を更新する。

知っておくべきイベントの種類:

• ページ遷移と初期レンダリング。
• ネットワーク接続の変更。
• WebSocket またはリアルタイムのサーバー更新。

クリックのようなユーザーのアクションは useEffect に含めるべきではありません。これらのアクションには直接イベントハンドラーを使用してください。

Props に基づいてコンポーネントを分割しましょう。

boolean 型の prop を使ってロジックを切り替えている場合は、コンポーネントを分割してください。データの作成と更新の両方を処理するような、一つのコンポーネントを作らないようにしましょう。

多くの "if" 文を含む単一のコンポーネントは肥大化しがちです。これはアプリのメンテナンスを困難にします。

• 悪い例: "isAdd" という prop によってフォームのフィールドを切り替える単一のコンポーネント。
• 良い例: "RegisterComponent" と "UpdateComponent" を作成する。

小さなコンポーネントはテストが容易です。実行速度も速く、コードもクリーンに保てます。

出典: https://dev.to/kkr0423/reactjs-the-principle-of-the-hook-3c31