title: Cannot update a component (`ContextProvider`) while rendering a different component
body: <p>I am doing a web application with react and I am getting this warning:</p>
  <pre><code>Warning: Cannot update a component (`ContextProvider`) while rendering a different component (`NavBar`). To locate the bad setState() call inside `NavBar`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
  </code></pre>
  <p>I have been looking for a solution but I haven't been able to fix the problem.</p>
  <p>This is my code:</p>
  <p>Main.jsx</p>
  <pre><code>ReactDOM.createRoot(document.getElementById('root')).render(
    &lt;React.StrictMode&gt;
      &lt;BrowserRouter&gt;
        &lt;AuthProvider&gt;
          &lt;Routes&gt;
            &lt;Route path=&quot;/*&quot; element={&lt;App /&gt;} /&gt;
          &lt;/Routes&gt;
        &lt;/AuthProvider&gt;
      &lt;/BrowserRouter&gt;
    &lt;/React.StrictMode&gt;
  )
  </code></pre>
  <p>App.jsx</p>
  <p>Here, I separate the routes that require authentication. The ... means that there are some more routes there.</p>
  <pre><code>function App() {
    return (
      &lt;Routes&gt;
        &lt;Route path='/' element={&lt;Layout /&gt;}&gt; 
          {/* public routes */}
          &lt;Route element={&lt;RequireNoAuth /&gt;}&gt;
            &lt;Route path='/login' element={&lt;Login /&gt;} /&gt;
            &lt;Route path='/register' element={&lt;Register /&gt;} /&gt;
          &lt;/Route&gt;
  
          {/* protected routes */}
          &lt;Route element={&lt;RequireAuth /&gt;}&gt;
            &lt;Route path='/' element={&lt;Home /&gt;} /&gt;
            ...
          &lt;/Route&gt;
        &lt;/Route&gt;
      &lt;/Routes&gt;
    )
  }
  </code></pre>
  <p>Home.jsx</p>
  <p>This is the file where the error occurs, specifically in the component <code>AdministrationLayout</code>, which I call the <code>Contextprovider</code>.</p>
  <pre><code>const Home = () =&gt; {
      return (
          &lt;AdministrationLayout&gt;
              &lt;Container fluid&gt;
                  &lt;Row&gt;
                      &lt;Col&gt;
                          &lt;h3&gt;{i18n.t(&quot;dashboard.title&quot;)}&lt;/h3&gt;
                      &lt;/Col&gt;
                  &lt;/Row&gt;
              &lt;/Container&gt;
          &lt;/AdministrationLayout&gt;
      )
  }
  </code></pre>
  <p>AdministrationLayout.jsx</p>
  <pre><code>const AdministrationLayout = ({ children }) =&gt; {
      return (
          &lt;div className='cms-container'&gt;
              &lt;ContextProvider&gt;
                  &lt;NavBar /&gt;
                  &lt;ContentContainer&gt;
                      { children }
                  &lt;/ContentContainer&gt;
              &lt;/ContextProvider&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>Finally, this is my contextProvider:</p>
  <pre><code>export const ContextProvider = ({ children }) =&gt; {
      const [showMenu, setShowMenu] = useState(true);
      const [activeMenu, setActiveMenu] = useState(readActiveMenu());
      const [screenSize, setScreenSize] = useState(undefined);
  
      const handleMenuClick = (menuSection) =&gt; {
          setActiveMenu(menuSection);
          saveActiveMenu(menuSection);
      }
  
      return (
          &lt;StateContext.Provider
              value={{ showMenu, setShowMenu, activeMenu, setActiveMenu, screenSize, setScreenSize}}
          &gt;
              { children }
          &lt;/StateContext.Provider&gt;
      );
  }
  </code></pre>
  <p><strong>NavBar.jsx</strong></p>
  <pre><code>const NavBar = () =&gt; {
      const auth = useAuth();
      const navigate = useNavigate();
      const location = useLocation();
      const from = location.state?.from?.pathname || &quot;/&quot;;
  
      const { showMenu, setShowMenu, setActiveMenu } = useStateContext();
      const [showNotificationsOptions, setShowNotificationsOptions] = useState(false);
      const [showUserOptions, setShowUserOptions] = useState(false);
  
      const handleLogout = () =&gt; {
          setActiveMenu(&quot;dashboard&quot;);
          auth.logout();
          navigate(from, { replace: true });
      }
  
      const toogleNotificationsOptions = () =&gt; {
          setShowNotificationsOptions((prevState) =&gt; !prevState);
      }
  
      const toogleUserOptions = () =&gt; {
          setShowUserOptions((prevState) =&gt; !prevState);
      }
  
      return (
          &lt;div className='navbar-container'&gt;
              &lt;div className='top-bar-container'&gt;
                  &lt;div className='button-menu-container'&gt;
                      &lt;NavBarButton customFunction={setShowMenu((prevState) =&gt; !prevState)} icon={&lt;FaBars /&gt;} classStyle='button-menu' /&gt;
                      &lt;div className='title'&gt;
                          &lt;span&gt;TEJIDOS&lt;/span&gt;
                          &lt;span&gt;PULIDO&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className='session-menu-container'&gt;
                      &lt;NavBarButton customFunction={toogleNotificationsOptions} icon={&lt;FaBell /&gt;} classStyle='button-menu' /&gt;
                      &lt;div className='session-container'&gt;
                          &lt;div className='session-name'&gt;{auth.token}&lt;/div&gt;
                          &lt;div className='session-button' onClick={toogleUserOptions}&gt;
                              &lt;FaUserAlt /&gt;
                              &lt;FaChevronDown /&gt;
  
                              {(showUserOptions) 
                                  ?   &lt;div className='user-options-contianer'&gt;
                                          &lt;div onClick={handleLogout}&gt;{i18n.t(&quot;shared.logout&quot;)}&lt;/div&gt;
                                      &lt;/div&gt;
                                  :   null
                              }
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
    }
  </code></pre>