title: Why does code inside useEffect run twice for the first render?
body: <p>Console.log runs twice. Underneath said it is to reason <code>Strict Mode</code>:</p>
  <p><a href="https://stackoverflow.com/questions/60618844/react-hooks-useeffect-is-called-twice-even-if-an-empty-array-is-used-as-an-ar">React Hooks: useEffect() is called twice even if an empty array is used as an argument</a></p>
  <blockquote>
  <p>StrictMode renders components twice (on dev but not production) in
  order to detect any problems  with your code and warn you about them
  (which can be quite useful).</p>
  </blockquote>
  <p>But I don't understand why! It says: <code>in order to detect any problems with your code and warn you about them</code>. But which is the problem? And warning about what thing?</p>
  <p><strong>And is there a way for rid of that(twice running) without removing <code>Strict Mode</code> from the app?</strong></p>
  <p>It's my code:</p>
  <pre><code>import {useEffect, useState} from &quot;react&quot;;
  import BlogList from &quot;./BlogList&quot;;
  
  const Home = () =&gt;{
      const [blogs, setBlogs] = useState([
          { title: 'My new website', body: 'lorem ipsum...', author: 'mario', id: 1 },
          { title: 'Welcome party!', body: 'lorem ipsum...', author: 'yoshi', id: 2 },
          { title: 'Web dev top tips', body: 'lorem ipsum...', author: 'mario', id: 3 }
      ]);
      const [name, setName] = useState('mario');
      const handleDelete = (id) =&gt; {
          const newBlogs = blogs.filter(blog =&gt; blog.id !== id);
          setBlogs(newBlogs);
      }
      useEffect(() =&gt; {
          console.log(&quot;useEffect is run&quot;);
          console.log(name);
      },[name]);
      return(
          &lt;div className=&quot;Home&quot;&gt;
              &lt;BlogList blogs={blogs} title=&quot;All Blogs&quot; handleDelete={handleDelete} /&gt;
              &lt;button onClick={() =&gt; setName('arman')}&gt;Delete name&lt;/button&gt;
              &lt;p&gt;{name}&lt;/p&gt;
          &lt;/div&gt;
      );
  }
  
  export default Home;
  </code></pre>
  <p>The complete code:</p>
  <p><a href="https://codesandbox.io/s/interesting-buck-omruo8" rel="nofollow noreferrer">https://codesandbox.io/s/interesting-buck-omruo8</a></p>