title: why does javascript render removed components
body: <p>Guys I'm working on a project now and I have a component that is returned by antd <code>Menu</code> item. It has 4 components: <code>Home</code>, <code>Username</code>, <code>Login</code>, and <code>Register</code>:</p>
  <pre><code>const items = [
          {
            label: &lt;Link to='/'&gt;Home &lt;/Link&gt;, //- {JSON.stringify(user)}
            key: 'home',
            icon: &lt;AppstoreOutlined /&gt;,
          },
          {
            label: 'Username',
            key: 'SubMenu',
            icon: &lt;SettingOutlined /&gt;,
            children: [
              {
                label: 'Option 1',
                key: 'setting:1',
              },
              {
                label: 'Option 2',
                key: 'setting:2',
              },
              {
                label: &lt;item onClick={logout}&gt;Logout&lt;/item&gt;,
                key: 'setting:3',
                icon: &lt;LogoutOutlined /&gt;
              },
            ],
          },
          {
            label: &lt;Link to='/register'&gt;Register&lt;/Link&gt;,
            key: 'register',
            icon: &lt;UserAddOutlined /&gt;,
            style: { marginLeft: 1030},   // problem: hard-coded margin
          },
          {
            label: &lt;Link to='/login'&gt;Login&lt;/Link&gt;,
            key: 'login',
            icon: &lt;UserOutlined /&gt;,
            style: { marginLeft: 'auto'},
          },      
        ];
      
      useEffect(() =&gt; {
        if (user) {  // &quot;user&quot; is an object returned by userSelector
          items.splice(2, 2);
        }
      }, [user]);
      console.log(items);
      
      return &lt;Menu  onClick={handleClick} selectedKeys={[current]} mode=&quot;horizontal&quot; items={items} /&gt;;
  </code></pre>
  <p>As you can see, I'm using a <code>useEffect</code> hook here. If the user is not logged in (so <code>user === null</code>), then the if statements in <code>useEffect</code> will not be executed; otherwise the <code>Login</code> and <code>Register</code> components in the array <code>items</code> will be removed and hidden, and only the first 2 are left.</p>
  <p>From <code>console.log(items);</code> we can see what <code>items</code> is like currently. When a user is logged in, it does have only two components:
  <a href="https://i.stack.imgur.com/Xg8ZH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xg8ZH.png" alt="enter image description here" /></a></p>
  <p>However, we can still see <code>Login</code> and <code>Register</code> are there in such a circumstance:
  <a href="https://i.stack.imgur.com/PQaeA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PQaeA.png" alt="enter image description here" /></a></p>
  <p>So why do JS and React render removed components?</p>