React App 仅在第一次状态更改时重新渲染，即使更改成功，第二次更改也看不到更改

Question

I am tryin to implement dark mode in a React app. I have given a toggle on my child component to change the theme to dark mode. So lets say if we start with dark mode and we click on toggle then theme changes to light one. Now, if toggle a second time, the theme does not change but the state value does change.

As I understand, if a state changes component should re-render and it does so but only once!

Please let me know what is going wrong.

App.js
------
import themes from '../theme';
import Container from '../common/container';

const App = function(props) {

 const [darkMode, setDarkMode] = React.useState(true);

 const changeTheme = function(){
  console.log('Dark Mode is ' + darkMode + ', Setting it to ' + !darkMode)
  setDarkMode(!darkMode)
 }
 
 return (
  <Router>
    <ThemeProvider theme={ darkMode ? themes.darkTheme : themes.lightTheme}>
      <CssBaseline />
      <Container darkMode={darkMode} changeTheme={changeTheme}>
        </Container>
    </ThemeProvider>
  </Router>
 );
}

As you can see the App component has state darkMode and its toggle is passed to the child component Container.

Container.js
------------

const Container = function(props) {
 return (
  <Box>
    <AppBar position="static">
        <Toolbar>
            .
            .
          <IconButton color="primary" onClick={(event) => props.changeTheme()}>{ props.darkMode ?
          <Brightness4Icon /> : <BrightnessHighIcon /> }</IconButton>

           <Button variant="contained" color="primary">Login</Button>
        </Toolbar>
    </AppBar>
    <Box>
      {props.children}
    </Box>
  </Box>
 )
}

So in Container component, if you click on IconButton, the changeTheme funtion of App Component will be called.

Now, the result of this code is - I am able to change the theme only on first click be it dark mode first or light mode first. The Second and further clicks does not change the theme.

Also, as you have noticed I have a log statement in changeTheme. PF the attached console screenshot.

So, as per my understanding App should re-render if darkMode changes. But is only does for the first time.

Thanks for your help!

Answer 1

I am not exactly sure what is wrong with your code, but if you are using Context there is no need to pass darkMode to Container .

I made a quick working example off of your code, modify it to fit your needs.

import React from 'react'
import ReactDOM from 'react-dom'

const ThemeContext = React.createContext("light");

function App() {
  const [darkMode, setDarkMode] = React.useState(true);

  const changeTheme = function(){
    console.log('Dark Mode is ' + darkMode + ', Setting it to ' + !darkMode)
    setDarkMode(!darkMode)
 }  

  return (
    <ThemeContext.Provider value={darkMode ? "dark" : "light"}>
      <Container changeTheme={changeTheme}/>
    </ThemeContext.Provider>
  )
}

function Container({changeTheme}) {
  const theme = React.useContext(ThemeContext);

  return <React.Fragment>
    {theme}

    <button onClick={changeTheme}>Toggle Theme</button>
  </React.Fragment>;
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

As you can see, in the Container you can use useContext to get the theme value, there is no need to pass it as a property, that's the whole point of contexts.

You can test the code above in this CodeSandbox

If this is unclear, you can read more about the useContext hook in the React Docs . There is also an example of theme context implementation.