すべての React コンポーネントが useDispatch を使用する必要があるのはなぜですか?

Question

はい、この質問はこの質問と重複しているようです:

各コンポーネントには useDispatch が必要ですか?

しかし、それは繰り返されません。さまざまな方法を提供します:

3 つの子コンポーネントがあり、それらはすべて Redux Toolkit のディスパッチ関数を使用しているとします。

通常の方法は次のとおりです:

リーリー

でも、これをやったらどうなるでしょうか?見る： ＃＃＃ リーリー

テストした結果、これもうまく動作しました。なぜ通常の方法で行う必要があるのか​​教えてください。新しいコード (glo ベースのコード) は大きくなりましたが、これはサブコンポーネントが 3 つしかないためです。 30 個以上のサブコンポーネントがある場合、glo ベースのコードははるかに小さくなり、理解しやすくなります。

違いは次のとおりです:

https://i.ibb.co/tKWv2Qc/image.png

これは CodeSandbox のリンクです:

https://codesandbox.io/s/clever-monad-c99q3k?file=/src/features/index.tsx

Answer 1

たとえば、このディスパッチ関数はテストで変更されます。

テストを行わずに一部の環境でこれを実行すること自体は「バグ」ではありませんが、大きなメリットでもありません。
アプリケーションに constdispatch = useAppDispatch(); という行がある場合、おそらく、js パッケージが gzip 圧縮されるとき (最近ではこれが普通です)、とにかく 3 バイトまたは 4 バイトに gzip 圧縮されます。

本当にここのコードを削除したい場合は、useCallback を削除してください。これは、コールバックを HTML に直接渡す場合にはまったく不要です。