0

I have a state property in _app.js that I want to update when a property changes in App.tsx. It's related to updating theming to darkmode.

Is there a way to notify _app.js when a property changes in App.tsx?

Below is an example of _app.js where changes to the context property is being monitored. However this doesn't work probably because the context check is outside the provider whichi is returned by _app.js

function MyApp({ Component, someProps }) {
  
    const myContext = useContext(MyContext);

    React.useEffect(() => {
          alert('helloworld');
        }, myContext.darkMode);

return (<MyContext.Provider value={someProps}>
                <Component {...pageProps} />
        </MyContext.Provider>);

export default MyApp;
doorman
  • 15,707
  • 22
  • 80
  • 145
  • 2
    Not sure what is app.tsx in your case, but you can always use any of the state management libraries or simply you can use the React Context API to make a shared state. This thread pretty much covers all the options: https://stackoverflow.com/q/38901106 – brc-dd Nov 06 '21 at 20:39
  • Thanks for the link, app.tsx is the app component. Since _app.js is used by the ssr and to initialize the page I am not sure how to useeffect there to detect when a variable changes in a context. Please see the updated question. – doorman Nov 06 '21 at 21:18
  • 1
    Check out this codesandbox - https://codesandbox.io/s/brave-lamport-t5t6l?file=/pages/_app.tsx – brc-dd Nov 07 '21 at 09:34

0 Answers0