title: Problem with separating ContextProvider from app.jsx
body: <p>I just started using createContext/useContext and after successfuly implementing it I would like now to put it in seperate file. The problem is that i am getting error of too many re-renders and I don't really know whats the problem. Could you give me a clue what might be wrong? Below I have put context code,app.js and example of component where context is actually used.</p>
  <pre><code>***context***
  import React, { createContext, useState } from &quot;react&quot;;
  
  export const DarkModeContext = createContext({
    isDarkMode: false,
    toggleIsDarkMode: () =&gt; {},
  });
  
  export const DarkModeContextProvider = ({ children }) =&gt; {
    const [isDarkMode, setIsDarkMode] = useState(false);
    const toggleIsDarkMode = setIsDarkMode((prev) =&gt; !prev);
  
    const value = {
      isDarkMode,
      toggleIsDarkMode,
    };
  
    return (
      &lt;DarkModeContext.Provider value={value}&gt;
        {children}
      &lt;/DarkModeContext.Provider&gt;
    );
  };
  *** App.js***
  import { useContext } from &quot;react&quot;;
  import { BrowserRouter as Router, Route, Routes } from &quot;react-router-dom&quot;;
  import Navbar from &quot;../components/Navbar&quot;;
  import MainSection from &quot;../components/MainSection/MainSection&quot;;
  import CountryPage from &quot;../components/CountryPage&quot;;
  import { Wrapper } from &quot;./App.styles&quot;;
  import { DarkModeContext, DarkModeContextProvider } from &quot;./DarkModeContext&quot;;
  
  function App() {
    const { isDarkMode } = useContext(DarkModeContext);
    return (
      &lt;DarkModeContextProvider&gt;
        &lt;Router&gt;
          &lt;Wrapper dark={isDarkMode}&gt;
            &lt;Navbar /&gt;
            &lt;Routes&gt;
              &lt;Route path=&quot;/&quot; element={&lt;MainSection /&gt;}&gt;&lt;/Route&gt;
              &lt;Route
                path=&quot;/country/:countryCode&quot;
                element={&lt;CountryPage /&gt;}
              &gt;&lt;/Route&gt;
            &lt;/Routes&gt;
          &lt;/Wrapper&gt;
        &lt;/Router&gt;
      &lt;/DarkModeContextProvider&gt;
    );
  }
  
  ***part of component***
  import {useContext} from &quot;react&quot;
  import { DarkModeContext } from &quot;../../App/DarkModeContext&quot;;
  
  export default function CountryPage() {
    const { isDarkMode } = useContext(DarkModeContext);
  return (
      &lt;CountryPageWrapper dark={isDarkMode}&gt;
        &lt;StyledLink dark={isDarkMode} to=&quot;/&quot;&gt;
  </code></pre>