コンポーネントを再レンダリングせずに React.js の Context の状態を更新するにはどうすればよいですか?

Question

つまり、基本的に私は Google Maps API を使用しており、建物をクリックすると、いくつかの情報を含むモーダルが表示されます。モードの状態はコンテキスト内にあり、マップ上のクリック イベントによって更新されます。状態が更新されると、状態は Map コンポーネント自体から更新されるため、マップ全体が再度再レンダリングされます (サイズが小さくなります)。 マップを再レンダリングせずにコンテキストの状態を更新するにはどうすればよいですか?

memo と useCallback を使用しようとしましたが、props (コンテキスト) が更新されているため、マップが再度再レンダリングされます。

Answer 1

マップが頻繁に変更されるコンテキストの値を使用している場合、再レンダリングを防ぐ方法はありません。そんなことしたらもうダメだよ

useContext(Context) は、プロバイダーの値が変更されたときにコンポーネントを再レンダリングします。コンポーネントのコンテキストで何を使用しても、 useContext を使用すると再レンダリングされます。これを防ぐことはできません。それがコンテキストの仕組みです。ただし、コンポーネントがコンテキスト内で頻繁に変更されないものを使用している場合、再レンダリングを停止するために使用できる手法があります。

覚えておきたいコンポーネントを使用する新しいコンポーネントを作成します。そこでコンテキストが呼び出されます。それをプロップとしてコンポーネントに渡します。コンポーネントで React.memo を使用します。ただし、コンポーネントに渡されたすべてのプロパティが記憶されていることを確認する必要があります。

また、メモの 2 番目のパラメータを使用して、レンダリング間で参照を保持しないコンテンツを除外することもできます (何をしているのかわからない場合はお勧めできません。シャットダウンの問題が発生する可能性があります)

const YourComponent = React.memo(({someContextValue}) => ...)
const YourNewComponent = () => {
   const {someContextValue} = useContext(SomeContext)
   // ここで someContextValue は値を頻繁に変更しないものです
   戻る ＃＃＃
}

その場合、コンポーネントの代わりに YourNewComponent を使用する必要があります