Maximum update depth exceeded with react context api - reactjs

Question

I've got three themes in my project and I want to handle the theme switching process with React Context API, but I get this "Maximum update depth exceeded" error. how can I handle this?
here is my data layer:
import React from "react";
// Data Layer
export const StateContext = React.createContext();
// Provider
export const StateProvider = ({ reducer, initialState, children }) => (
<StateContext.Provider value={React.useReducer(reducer, initialState)}>
{children}
</StateContext.Provider>
);
export const useStateValue = () => React.useContext(StateContext);
here is my reducer:
export const initialState = {
theme: "",
};
export const reducer = (state, action) => {
if (action.type === "SET_THEME") {
return {
...state,
theme: action.userTheme,
};
} else {
return state;
}
};
here is index.js:
import { StateProvider } from "./context/StateProvider";
import { initialState, reducer } from "./context/reducer";
ReactDOM.render(
<React.StrictMode>
<StateProvider initialState={initialState} reducer={reducer}>
<App />
</StateProvider>
</React.StrictMode>,
document.getElementById("root")
);
The user switch the themes inside the navbar component, here is my navbar:
import { useStateValue } from "../context/StateProvider";
export const Nav = () => {
const [state, dispatch] = useStateValue();
const setTheme = (theme) => {
dispatch({
type: "SET_THEME",
userTheme: theme,
});
};
return (
<>
<div onClick={setTheme("theme-orange")}>
<a id="orange" href="javascript:void(0)">
orange
</a>
</div>
<div onClick={setTheme("theme-green")}>
<a id="green" href="javascript:void(0)">
green
</a>
</div>
<div onClick={setTheme("theme-blue")}>
<a id="blue" href="javascript:void(0)">
blue
</a>
</div>
</>
)
}
and finally here is the App.js:
import { useStateValue } from "./context/StateProvider";
function App() {
const [{ theme }] = useStateValue();
return (
<div className={theme}> // Theme applied from context
<Nav />
<Home />
<About />
<Portfolio />
<Contact />
</div>
);
}

Answer 1

You are performing setState on render on Nav component. Try:
<div onClick={() => setTheme("theme-orange")}>
<a id="orange" href="javascript:void(0)">
orange
</a>
</div>