title: Switch themes when local storage changes onClick in react
body: <p>I am trying to switch themes between dark and light based on the theme key stored in the local storage. I have a function that changes the key value in the local storage on click. however, the click does not render the component and the user has to refresh the page to see the updated theme.</p>
  <p>Here is the App.js component the check the local storage and set the default theme if null in local storage:</p>
  <pre><code>import React from  'react';
  
  
  const App = () =&gt; {
    
      return (
          &lt;Router&gt;
              &lt;div className=
                       {
                           window.localStorage.getItem('theme') === null ?
                               window.localStorage.setItem('theme','theme-light'):
                               window.localStorage.getItem('theme')
                       }&gt;
                  &lt;Switch&gt;
         
                      &lt;Route exact path='/'&gt; &lt;LandingPage/&gt; &lt;/Route&gt;
                      &lt;Route exact path='/register'&gt; &lt;RegisterPage/&gt; &lt;/Route&gt;
                      &lt;Route exact path='/login'&gt; &lt;LoginPage/&gt; &lt;/Route&gt;
                      
                  &lt;/Switch&gt;
              &lt;/div&gt;
          &lt;/Router&gt;
      );
  }
  
  export default App;
  </code></pre>
  <p>Here is the function that contains a function to set the new theme in the local storage, onclick the key value does change in the local storage, however, the page does not re-render and requires the user to refresh the page manually to fetch the updated theme from local storage.</p>
  <p>I want theme to switch on click.</p>
  <pre><code>import React,{useState, useEffect} from 'react'
  import {RiMoonLine} from 'react-icons/ri'
  import {FiSun} from 'react-icons/fi'
  
  
  const UserProfilePromoter = () =&gt;{
  
      const [user, setUser] = useState({})
  
      const items = { ...localStorage }
      const localUser = JSON.parse(window.localStorage.getItem('user'))
  
    useEffect(()=&gt;{
        if(localUser){
            const userId = localUser.id
            const userFullName = `${localUser.firstname} ${localUser.lastname}`
            const username = localUser.username
            const avatar = localUser.avatar
            setUser({
                ...user,
                id: userId,
                name: userFullName,
                username: username,
                avatar: avatar,
                theme: items.theme
            })
        }
  
    },[])
  
  
      const onThemeChange = (e) =&gt; {
          let currentTheme = window.localStorage.getItem('theme')
  
          console.log(currentTheme)
  
          if(currentTheme === 'theme-light') {
              window.localStorage.setItem('theme', 'theme-dark')
              setUser({
                  ...user,
                  theme: 'theme-dark'
              })
          } else {
              window.localStorage.setItem('theme', 'theme-light')
              setUser({
                  ...user,
                  theme: 'theme-light'
              })
          }
      }
  
   
  
      return(
          &lt;&gt;
              {
                  localUser &amp;&amp;
                  &lt;div className=&quot;profilePrompterContainer&quot;&gt;
                      &lt;div className=&quot;ProfilePrompterAvatarWrapper&quot; role=&quot;button&quot;&gt;
                          &lt;div className=&quot;ProfilePrompterAvatar ProfilePrompterWrapper&quot;&gt;
                              &lt;img src={user.avatar}
                                   className=&quot;profilePrompterUserAvatar&quot; alt={`sosums_user_${user.name}`}
                              /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;ProfilePrompterNameTag&quot; role=&quot;button&quot; &gt;
                          &lt;div className=&quot;userFullNameContainer&quot;&gt;
                              &lt;div className=&quot;userFullNameText&quot;&gt;{user.name}&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className=&quot;profilePrompterUsernameText size12&quot;&gt;
                              {!user.username ? &lt;div className='setUserNameText'&gt; @Set Username &lt;/div&gt;: user.username}
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;ProfilePrompterBtnGroup&quot; onClick={onThemeChange}&gt;
                          &lt;button type=&quot;button&quot; className=&quot;iconBtn&quot;&gt;
                              &lt;div className=&quot;iconContentWrapper&quot;&gt;
                                  &lt;span className='iconContent'&gt;
                                      {
                                          window.localStorage.getItem('theme')=== 'theme-light' ? &lt;RiMoonLine/&gt;:
                                              &lt;FiSun/&gt;
                                      }
                                  &lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
                      
                  &lt;/div&gt;
              }
              {
                  !localUser &amp;&amp; &lt;div className=&quot;noLocalUser&quot;&gt; &lt;/div&gt;
              }
  
          &lt;/&gt;
      )
  }
  
  export default UserProfilePromoter
  </code></pre>