Dark theme / with hooks - reactjs

Question

Hello I have a custom hook to define my theme
code:
export default function App() {
const [theme, setTheme] = usePersistedState('light');
const toggleTheme = () => {
setTheme(theme.type === 'light' ? 'dark' : 'light');
};
return (
<ThemeProvider theme={theme}>
<GlobalStyle />
<div className="App">
<button onClick={toggleTheme}>a</button>
</div>
</ThemeProvider>
);
and here is my hook:
import { darkTheme, lightTheme } from '../themes/index';
function usePersistedState(key) {
const [state, setState] = useState(() => {
switch (key) {
case 'dark':
return darkTheme;
case 'light':
return lightTheme;
default:
return lightTheme;
}
});
console.log(state);
useEffect(() => {
localStorage.setItem(key, JSON.stringify(state.type));
}, [key, state]);
return [state, setState];
}
export default usePersistedState;
basically every time my state changes I save it to local storage, but for some reason it only works the first time
when I try to change my theme the second time I do not enter my switch
edit:
as i show in the gif the first time i get an object because i enter my switch, but when i try to change the theme i get only a text cuz i dont enter my switch

Answer 1

The argument you provide to useState will apply only on the first render.
On the next renders, what you provide to setState function will be applied (you provide 'light' or 'dark', so state value will be 'light' or 'dark')
For your use case, in which you want the switch case to run every state change, useReducer is a better option than useState (in my opinion).
import { useReducer } from 'react';
import { darkTheme, lightTheme } from '../themes/index';
function usePersistedState(key) {
const [state, dispatch] = useReducer(reducer, null, getTheme(key)); // first argument is the reducer function. second argument is the initial state. third argument is an init function (for complex initialization)
const reducer = (state, action) => { // this will run on every state change (on every dispatch call)
return getTheme(action.type)();
}
const getTheme = (themeType) => () => {
switch (themeType) {
case 'dark':
return darkTheme;
case 'light':
return lightTheme;
default:
return lightTheme;
}
}
console.log(state);
useEffect(() => {
localStorage.setItem('themeType', JSON.stringify(state));
}, [state]);
return [state, dispatch];
}
export default usePersistedState;
And from your component you call dispatch like so:
export default function App() {
const [theme, setTheme] = usePersistedState('light');
const toggleTheme = () => {
setTheme(theme.type === 'light' ? {type: 'dark'} : {type: 'light'});
};
return (
<ThemeProvider theme={theme}>
<GlobalStyle />
<div className="App">
<button onClick={toggleTheme}>a</button>
</div>
</ThemeProvider>
);

Answer 2

I think you forgot to add the object wrapper on the toogle with { type: ... }
const toggleTheme = () => {
setTheme({type: theme.type === 'light' ? 'dark' : 'light'});
};