title: Child Component doesn't rerender when state of parent component changes
body: <p>I have the following issue: I have an Component that renders other components in it. One of this component gets state variables of my parent component as parameter and are using them actively, but they don't rerender when the state of the parent component changes. Another problem that I am facing is that I have an additional item in my list that navigates that is activated when the user has a special roleID. The changing of the state works completely fine, but in this situation the additional item only gets visible after I changed the path param of my url.</p>
  <p>parent component:</p>
  <pre><code>import React, { useEffect, useState } from 'react';
  import {Row, Col} from 'react-bootstrap';
  import 'bootstrap/dist/css/bootstrap.min.css';
  import '../../App.css';
  import ProfileSettings from './profileSettings';
  import SettingsChooser from './settingsChooser';
  // import SettingRoutings from '../settingRoutings';
  import {BrowserRouter as Router, useHistory, useLocation, useParams} from 'react-router-dom';
  // import Routings from '../Routings.js';
  import UserRequests from './userRequests';
  import useAuth from '../../API/useAuthentification';
  import { CONTROLLERS, useBackend } from '../../hooks/useBackend';
  
  function UserSettings({user}) {
  
      const {title: path} = useParams();
      const [acst, setAcst] = useState(localStorage.accessToken);
      const [rft, setRft] = useState(localStorage.refreshToken);
      const history = useHistory();
      const [items, setItems] = useState(['Profile', 'Requests','Log Out', 'Delete Account']);
      const [authError, setAuthError] = useState(false);
      const [userValues, authentificate] = useBackend(authError, setAuthError, user);
      const [component, setComponent] = useState(&lt;&gt;&lt;/&gt;);
      const [defaultItem, setDefaultItem] = useState(0);
      
  
      useEffect(() =&gt; {
          console.log('render');
          authentificate(CONTROLLERS.USERS.getUserByAccessToken());
      }, [acst, rft]);
  
      window.addEventListener('storage', () =&gt; localStorage.accessToken !== acst ? setAcst(localStorage.accessToken) : '');
      window.addEventListener('storage', () =&gt; localStorage.refreshToken !== rft ? setRft(localStorage.refreshToken) : '');
  
      useEffect(() =&gt; {
          if(userValues?.roleID === 1) {
              items.splice(0, 0, 'Admin Panel');
              setItems(items);
          }
          console.log(items);
      }, [userValues]);
  
      useEffect(() =&gt; {
          // if(path==='logout') setDefaultItem(2);
          // else if(path==='deleteAccount') setDefaultItem(3);
          // else if(path==='requests') setDefaultItem(1);
      }, [])
  
      const clearTokens = () =&gt; {
          localStorage.accessToken = undefined;
          localStorage.refreshToken = undefined;
      }
      useEffect(() =&gt; {
          console.log(path);
          if(path ==='logout' &amp;&amp; !authError) {
              setDefaultItem(2);
              clearTokens();
          }
          else if(path === 'deleteaccount') {
              setDefaultItem(3);
              if(userValues?.userID &amp;&amp; !authError) {
               authentificate(CONTROLLERS.USERS.delete(userValues.userID));
               }
              clearTokens();
              history.push('/movies/pages/1');
          }
          else if(path==='requests') {
              setDefaultItem(1);
              setComponent(&lt;UserRequests user={userValues} setAuthError={setAuthError} authError={authError}/&gt;);
          } else {
              setComponent(&lt;ProfileSettings user={userValues} setAuthError={setAuthError} authError={authError}/&gt;);
          }
      }, [path]);
  
      useEffect(() =&gt; {
          console.log(defaultItem);
      }, [defaultItem])
      
  
   
  
      return (
              &lt;div &gt;
              &lt;Row className=&quot;&quot;&gt;
              &lt;Col className=&quot;formsettings2&quot;   md={ {span: 3, offset: 1}}&gt;
                  &lt;SettingsChooser  items={items} headline={'Your Details'} defaultpath='userSettings' defaultactive={defaultItem} /&gt;
              &lt;/Col&gt;
             &lt;Col  className=&quot;ml-5 formsettings2&quot;md={ {span: 6}}&gt;
                       {authError ? &lt;p&gt;No Access, please Login first&lt;/p&gt; : component}
              &lt;/Col&gt;
              &lt;/Row&gt;
              &lt;/div&gt;
      );
  }
  
  export default UserSettings;
  </code></pre>
  <p>Child component (settingsChooser):</p>
  <pre><code>import React, {useEffect, useState} from 'react';
  import {Card, Form, Button, Nav, Col} from 'react-bootstrap';
  import 'bootstrap/dist/css/bootstrap.min.css';
  import { LinkContainer } from 'react-router-bootstrap';
  import '../../App.css'
  
  function SettingsChooser({items, headline, defaultpath, defaultactive}) {
  
      const [selected, setSelected] = useState(defaultactive);
     
  
      const handleClick = (e, key) =&gt; {
          setSelected(key);
      }
  
      useEffect(() =&gt; console.log(&quot;rerender&quot;), [items, defaultactive]);
  
      useEffect(() =&gt; {
          setSelected(defaultactive);
      }, [])
  
      return(
          &lt;&gt;
          &lt;Card className=&quot;shadow-sm&quot;&gt;
              &lt;Card.Header className=&quot;bg-white h6 &quot;&gt;{headline}&lt;/Card.Header&gt;
          {items.map((item, idx) =&gt;{
              return(
                &lt;LinkContainer to={`/${defaultpath}/${(item.replace(/\s/g,'').toLowerCase())}`}&gt;&lt;Nav.Link onClick={(e) =&gt; handleClick(this, idx)}  className={'text-decoration-none text-secondary item-text ' + (selected === idx? 'active-item' : 'item')}&gt;{item}&lt;/Nav.Link&gt;&lt;/LinkContainer&gt;
              );           
          })}
          &lt;/Card&gt;
          &lt;/&gt;
      );
  }
  
  export default SettingsChooser;
  </code></pre>