[Suggestion]: Document: How use(Context) work with React.memo

[dislido]

Summary

When the context value changes, React will re-render the components using 'useContext(Context)'.
'use(Context)' can be called conditionally, the memorized components will be updated only when 'use(Context)' is called in the last rendering.

Page

https://react.dev/reference/react/use#reading-context-with-use

Details

A bad example (This behavior does not seem to cause any problems in common usage)

import React, { useState, useContext, use, useRef } from "react";

const MyContext = React.createContext({ value: 1 });

const CompUseCtx = React.memo(() => {
  const { value } = useContext(MyContext);
  return <div>useContext value {value}</div>;
});

const RandomUseContext = React.memo(() => {
  const renderCount = useRef(0);
  renderCount.current++;
  if (Math.random() > 0.3) {
    const { value } = use(MyContext);
    return (
      <div>
        use value {value} renderCount {renderCount.current}
      </div>
    );
  }
  return <div>renderCount {renderCount.current}</div>;
});

export default function App() {
  const [value, setValue] = useState(1);
  return (
    <MyContext.Provider value={{ value }}>
      value: {value}
      <button onClick={() => setValue((prev) => prev + 1)}>+1</button>
      <CompUseCtx />
      <RandomUseContext />
    </MyContext.Provider>
  );
}