useContextを「setState」と反応させる

Question

最近、useContextHookでContextReactApiを使い始めました。状態変数、つまりconst someState = useState（state、setState）がある場合、一部の開発者はsetSateをプロバイダー値に直接渡し、それを子コンポーネントで呼び出すことを確認しました。それは良い習慣ですか？

コンテキストを使用しない場合は、子コンポーネントのsetStateに「アクセス」するためのハンドラーを作成する必要があります。私はまだハンドラー関数を使用しており、それらをプロバイダー値に渡して、子のコンテキストからインポートしています。

コンテキストでsetStateを渡すことは良い習慣ですか？通常、setStateをコンポーネントに直接渡すことはできないため、まだ疑問があります。パフォーマンスに違いはありますか、または考慮すべきその他の欠点はありますか？

ありがとうございました。

Answer 1

私が正しく理解した場合、違いは、ある方法では状態が親コンポーネントから設定され、別の方法では状態が子コンポーネントから設定されることです。状態を変更してループレンダリングを回避するために、そのようにする場合があります。欠点はないはずですが、ハンドラー関数を使用するのが通常の方法です。

Answer 2

編集：私は実際にあなたを間違えたと思いますが、よくわかりません。あなたが州を持っているあなた自身のプロバイダーを書くならば、私の返事はその場合に有効です。セッターを提供するデフォルトのプロバイダーを使用するだけの場合は、Amelの返信に同意します。

---

私は個人的にはそうしませんが、それはもっと意見です。ただし、いつものように、それはあなたが達成したい目標にかなり依存します。

これを行うことの良い面は、useStateによって指定された状態セッターが各再レンダリングで常に同じままであるということです。カスタム値を渡す場合は、useContextを使用して変更をリッスンしているすべてのコンポーネントが再レンダリングされるため、頻繁に変更されないようにする必要があります。

それでも、状態を設定するためのコールバックを使用して、カスタムオブジェクト（たとえば、useMemoから取得して不要な再レンダリングを回避する）を渡すことをお勧めします。将来、より多くのものを提供したい場合は、拡張する方が簡単です。

このようなもの（非常に単純な例、もちろんこのようには意味がありません、それは理解のためだけです）：

function MyProvider({children}) {
   const [state, setState] = useState(0);
   const provided = useMemo(() => ({
       value: state,
       setValue: (value) => setState(value)
   }, [value]);
   return <MyContext.Provider value={provided}>{children}</MyContext.Provider>;
}

コンテキストが使用されるすべての場所でコードを変更せずに拡張する方が簡単です。しかし、それがあなたが達成したいことであるならば、私はまだセッターだけを渡すことに特に悪いことは何もないと思います。