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);
};
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.
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