can someone explain to me why the next code re renders all children components from the provider
import { createContext, useContext, useState } from "react";
const ThemeContext = createContext();
const App = () => {
const [theme, setTheme] = useState(false);
console.log("App running");
return (
<ThemeContext.Provider value={{ theme, setTheme }} children={<Child1 />} />
);
};
const Child1 = () => {
console.log("Child1 running");
return (
<div className="child1">
<Child2 />
</div>
);
};
const Child2 = () => {
console.log("Child2 running");
return (
<div className="child2">
<Child3 />
</div>
);
};
const Child3 = () => {
const { theme, setTheme } = useContext(ThemeContext);
console.log("Child3 running");
return (
<div className="child3">
<p>{theme ? "dark" : "light"}</p>
<button onClick={() => setTheme(!theme)}>Change theme</button>
</div>
);
};
export default App;
console everytime button is clicked, all components re rendering
App running
Child1 running
Child2 running
Child3 running
App running
Child1 running
Child2 running
Child3 running
but if context provider is wrapped in a component as follows
import { createContext, useContext, useState } from "react";
const ThemeContext = createContext();
const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState(false);
console.log("ThemeProvider running");
return (
<ThemeContext.Provider value={{ theme, setTheme }} children={children} />
);
};
const App = () => {
console.log("App running");
return <ThemeProvider children={<Child1 />} />;
};
const Child1 = () => {
console.log("Child1 running");
return (
<div className="child1">
<Child2 />
</div>
);
};
const Child2 = () => {
console.log("Child2 running");
return (
<div className="child2">
<Child3 />
</div>
);
};
const Child3 = () => {
const { theme, setTheme } = useContext(ThemeContext);
console.log("Child3 running");
return (
<div className="child3">
<p>{theme ? "dark" : "light"}</p>
<button onClick={() => setTheme(!theme)}>Change theme</button>
</div>
);
};
export default App;
console when button is clicked
ThemeProvider running
Child3 running
ThemeProvider running
Child3 running
ThemeProvider running
Child3 running
only the component consuming the context (and the component context provider) are re rendering
how exactly react manages this situation
EDIT:
react version is 17.0.1 btw