React useState not rendering with objects - reactjs

Question

The Button Component has a event listener onClick which calls changeTheme(). The Content component is a div with some text which is passed a theme prop 'style'. When I click the button, the theme is changed for 2 consecutive clicks. After that no matter how many times I click the button, theme doesn't change.Why is that?
function ParentElement() {
const dark={
color:'white',
backgroundColor:'darkgray',
}
const light={
color:'darkgray',
backgroundColor:'white'
}
const [currentTheme,setTheme]=useState(light)
function changeTheme(e){
//toggle theme
currentTheme==light?setTheme(dark):setTheme(light)
}
return (
<div>
<Button changeTheme={changeTheme}/>
<Content style={currentTheme} />
</div>
)
}
function Content({style}) {
return (
<div style={style}>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
)
}

Answer 1

It stops working after two times because you are comparing object references, which are changing after the call to setState.
Since currentTheme is initialized to light, the first call to currentTheme == light ? setTheme(dark) : setTheme(light) goes in "the true branch" and sets currentTheme to dark. However setTheme — as any change of state object in React — returns a new object reference, so from this point onwards currentTheme reference will be different from the reference of light or even of dark, although at this point the theme is dark.
Therefore, from now the condition always go in "the false branch", which sets the theme to light.
In JavaScript, a comparison of objects as you are doing is a comparison of references.
You can fix the issue by e.g. comparing the theme name (a string), as it will be a comparison by value:
function ParentElement() {
const dark = {
name: 'dark',
style: {
color: 'white',
backgroundColor: 'darkgray'
}
}
const light = {
name: 'light',
style: {
color: 'darkgray',
backgroundColor: 'white'
}
}
const [currentTheme, setTheme] = useState(light)
function changeTheme(e) {
//toggle theme
currentTheme.name === light.name ? setTheme(dark) : setTheme(light)
console.log(currentTheme);
}
return (
<div>
<Button changeTheme={changeTheme}/>
<Content style={currentTheme.style} />
</div>
)
}

Answer 2

You can also do this way and archive this.
import React, { useState, useMemo } from "react";
const themes = {
dark: {
color: "white",
backgroundColor: "darkgray"
},
light: {
color: "darkgray",
backgroundColor: "white"
}
};
function ParentElement() {
const [themeMode, setThemeMode] = useState("light");
const changeTheme = (e) => {
//toggle theme
const newThemeMode = themeMode === "light" ? "dark" : "light";
setThemeMode(newThemeMode);
};
const currentTheme = useMemo(() => {
return themes[themeMode];
}, [themeMode]);
return (
<div>
<button onClick={changeTheme}>change Theme</button>
<Content style={currentTheme} />
</div>
);
}

Answer 3

Just in case you would like to understand what is actually happening here:
light is an object. When you set the default theme by useState(light) react sets a reference to the light object.
In your changeTheme handler, you are checking if the currentTheme and light are referencing the same object currentTheme==light, you are not checking if they are similar. That is in fact a huge difference here. On the first click, the outcome is true and the theme switches to dark.
On the second click, the theme switches to light but this time react is deep copying the light object under the hood. The reference to the light object is lost. Every time you check for currentTheme==light, the outcome will be false from now on, and the theme will never switch to dark again.
To solve this, you would have to make a deepEqual check (not recommended) or introduce another flag or variable to track the currently selected theme.

Answer 4

Reacts useState hook sets state asynchronous, which means it won't do it immediately. In this case, when you might want to use the useState callback. So try this:
currentTheme === light ? setTheme(() => dark) : setTheme(() => light)
I would also consider doing the check for current theme with the help of the callback, to make sure you compare with the actual state, like so:
setTheme((prevTheme) => prevTheme === light ? dark : light)
What I've learned is that when you want to modify your state based on the previous one, you want to take the previous state from the statehook callback, which makes sure you get the previous state.

Answer 5

first light will always be true since Boolean({}) will always resolve to true... you need to to check for example themes[key] and toggle based on that