useEffect doesn't re-render main parent component-CodePudding

useEffect doesn't re-render the main parent component when I change state 'click button' in other component. When I reload page magic heapens. How should I re-render main <App /> component on this event without reloading page?

const ResponsiveAppBar = () => {
const defaultDark = window.matchMedia(
    '(prefers-color-scheme: dark)'
).matches;

let [theme, setTheme] = useLocalStorage(
    'theme',
    defaultDark ? 'dark' : 'light'
);

React.useEffect(() => {
    console.log('theme changed into: ', theme);
    <App />;
}, [theme]);

const switchTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    console.log(newTheme);
    setTheme(newTheme);
};

CodePudding user response：

What you are looking for is explained here (Context - React).

Basically, you should use React Context to share the state between parent and child components. If a child component wants to change the Theme, you can grab the setTheme hook from the Context and call it as needed.

CodePudding user response：

if you wanna have light and dark mode you have to be able to access the state every where to do that you should learn about react context api or try to learn Redux if you to make a large scale app