Context adds dependency between the consumer and provider.
const Context = createContext(0);const A = memo(() => {console.log("A");return <B />;});function B() {const count = useContext(Context);console.log("B");return null;}function C() {console.log("C");return null;}function App() {const [state, setState] = useState(0);useEffect(() => {setState((state) => state + 1);}, []);console.log("App");return (<Context.Provider value={state}><A /><C /></Context.Provider>);}const root = createRoot(document.getElementById("root"));root.render(<App />);
const Context = createContext(0);const A = memo(() => {console.log("A");return <B />;});function B() {const count = useContext(Context);console.log("B");return null;}function C() {console.log("C");return null;}function App() {const [state, setState] = useState(0);useEffect(() => {setState((state) => state + 1);}, []);console.log("App");return (<Context.Provider value={state}><A /><C /></Context.Provider>);}const root = createRoot(document.getElementById("root"));root.render(<App />);
click on the console.log lines to input your answer.