A context's value is an inline object created in the provider's render. Many consumers read it. Even when only one field changes, all consumers re-render. What is the precise reason, and the fix?
function App() {
const [user, setUser] = useState(null);
const [theme, setTheme] = useState('light');
return (
<Ctx.Provider value={{ user, theme, setUser, setTheme }}>
<Tree />
</Ctx.Provider>
);
}