title: React component render twice using useState
body: <p>I'm having a really hard time to figure out what's happening when there is nothing being used to trigger re-render the component. </p>
  
  <p><code>Events.js</code> Component renders twice when I remove the <code>useState()</code> from the <code>Event.js</code> it renders once, but I need to keep it. when I use <code>useEffect()</code> inside Event components, renders fourth time.</p>
  
  <p>I just kept the dummy data to give you to fill the emptiness and tried to remove <code>React.memo</code>, nothing happens. the problem is with the <code>Event.js</code> component I believe. I'm also using the Context API, but forth time rendering is too much.</p>
  
  <p>useEffect inside <code>App.js</code> is getting some value from the localStorage, I can't access that direct 'cause the value is undefined by default   </p>
  
  <p>sandbox code here: <a href="https://codesandbox.io/s/event-manager-reactjs-nbz8z?file=/src/Pages/Events/Events.js" rel="nofollow noreferrer">https://codesandbox.io/s/event-manager-reactjs-nbz8z?file=/src/Pages/Events/Events.js</a> 
  The <code>Events.js</code> file is located on <code>/Pages/Events/Events.js</code></p>
  
  <p>example code is below</p>
  
  <p>Event.js ( child component )</p>
  
  <pre><code>function Events() {
  
      // Sate Managing
      const [allEvents, setAllEvents]   = React.useState(null);
      console.log('Rendering EventsJs', allEvents);
  
      React.useEffect(() =&gt; {
           setAllEvents(['apple', 'banana']);
      }, []);
  
  
  
      return (
          &lt;div className="events"&gt;
  
                  { console.log('Event Rendered.js =&gt;') }
  
          &lt;/div&gt;
      )
  }
  
  
  export default React.memo(Events, (prevProps, nextProps) =&gt; {
          return true;
  } );
  </code></pre>
  
  <p>App.js ( parent component )</p>
  
  <pre><code>import { BrowserRouter, Route, Redirect } from 'react-router-dom';
  
  function App() {
  
    const [userId, setUserId] = React.useState(null);
  
    React.useEffect(() =&gt; {
      setUserId(1);
    }, []);
  
  
    // Login
  
    return (
      &lt;BrowserRouter&gt;
  
        &lt;Navigation /&gt;
  
        &lt;Route  path='/events' component={Events} /&gt;
  
        {console.log('App Rendered')}
  
      &lt;/BrowserRouter&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>Error:</p>
  
  <p><a href="https://i.stack.imgur.com/BTFd2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BTFd2.png" alt="enter image description here"></a></p>