useEffect の死とその中での動的派生の役割

タイトルは少し「クリック餌」ですが、その考えは間違っていません。

私は useEffect が悪いフックだという意見は持っていません。実際にはまったく逆です。しかし、派生マシンとして機能する React では、状態の同期に useEffect を使用することは最良の選択肢ではなく、コア チームによって推奨されていません。

しかし、ちょっと待って、状態を同期する必要がある場合はどうでしょうか?

はい、それは非常にまれなケースであり、おそらくより良い解決策のオプションがあるとします。ただし、アプリに投稿があり、ユーザーが「いいね！」ボタンをクリックしたときに楽観的な更新を処理するローカル状態が必要であると想像してください。外部状態 (バックエンドから取得) と同期して、同様のことが起こったかどうかを実際に確認します。

変更可能な派生

これは、状態と導出を同時に実行できるプリミティブが必要な場合です。概念的に言えば、それは変更可能な派生であると考えることができます。 Ryan Carniato がこれについて優れたブログ投稿をしていますが、反応性を管理する React の方法に関連していくつかの制限がありますが、この新しいプリミティブは導出と状態を 1 つだけで行うことができます。
デフォルトの動作として派生し、最後に更新された信頼できるソース (サーバーからのデータ プロップ) を取得します。
ユーザーが「いいね！」ボタンをクリックしたときの状態。この変更は一時的なもので、次の依存関係の変更時に上書きされます。

もちろん React にはありませんが、そのようなプリミティブを想像することはできます。良い点:

• useEffect からユースケースが 1 つ削除されます。
• これにより、状態として処理できる導出があることが明らかになります。

useMemoState

const [internalState, setInternalState] = useMemoState(() => data, [data]);

フックは通常の useMemo と同様に 2 つの引数を受け入れます。最初の引数はメモ関数で、通常は初回に実行され、戻り値は状態になります。 2 番目の引数は、値を追跡し、必要に応じてメモを再計算するためのよく知られた依存関係の配列です。これは、状態/メモ値と状態を一時的に変更するセッターの 2 つの値を含むタプルを返します。

フックの使用は次の例のようになります:

function MemoState ({ data }: { data: State}) {
  const [internalState, setInternalState] = useMemoState(() => data, [data]);

  return (
    <section>
      <p>name: {internalState?.title}</p>
      <p>{internalState?.like ? "liked post" : "not liked post"}</p>
      <button onClick={() => {
        // likePost();
        setInternalState(state => ({
          ...state,
          like: !state.like
        }))
      }}>Like Button</button>
    </section>
  )
}

こうすることで、このフックが何を行っているのか、何ができるのかを正確に知ることができ、ここで useEffect の必要性がなくなり、問題が状態と派生を同時に必要とするこの概念的なギャップを埋めることができます。皮肉なことに、結果としてエフェクトが不要になります。

React で同様のことを行うにはどうすればよいでしょうか?

React ルールに従い、フックを安全に保つために、今日の React で useEffect を使用して同様のものを作成する必要があります。このようなフックは今後も作られるとは思えませんが、それは誰にも分かりませんよね?

ここで useEffect の使用を避けるには、ミニ状態ライブラリなどの外部コードを使用して処理するか、厳密な React プリミティブを維持したい場合は useRef を使用して値の同期を保つ必要があります。

このアプローチの問題は、React ルールに違反することであり、ドキュメントでは推奨されていません。なぜなら、エフェクトなしで動作させる唯一の方法は、コンポーネントのレンダリング中に参照を同期することであり、まったく安全ではありません。

シンプルかつ安全に保つために、フックの例は次のようになります:

const [internalState, setInternalState] = useMemoState(() => data, [data]);

以上がuseEffect の死とその中での動的派生の役割の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。