useEffect no vuelve a representar el componente principal principal cuando cambio el estado 'botón de clic' en otro componente. Cuando recargo la página, la magia se acumula. ¿Cómo debo volver a renderizar el componente principal <App /> en este evento sin recargar la página?
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); };Lo que está buscando se explica aquí (Contexto - Reaccionar) .
Básicamente, debe usar React Context para compartir el estado entre los componentes principal y secundario. Si un componente secundario quiere cambiar el tema, puede tomar el gancho setTheme del contexto y llamarlo según sea necesario.
si desea tener un modo claro y oscuro, debe poder acceder al estado en todos los lugares para hacerlo, debe aprender sobre la API de contexto de reacción o intentar aprender Redux si desea crear una aplicación a gran escala