Maximum update depth exceeded with react context api

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>