title: Update variable in all screens of the App React Natice
body: <p>My app is both in French and English. I want the user to be able to change the language on any page and when they navigate to any other screen I want the change to be reflected.</p>
  <p>For instance, I have A.js</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>const A = (props) =&gt; {
    const [language, setLanguage] = useState('')
    return (
     &lt;View style ={styles.container}&gt;
              &lt;Button onPress ={()=&gt;setLanguage('french')}&gt;{language==="french" ? changer la langue : change the language}
              &lt;/Button&gt;
          &lt;/View&gt;  
    )
  }</code></pre>
  </div>
  </div>
  
  Now when I go to any screen after pressing the button I want the content to be rendered in French and if I change the language in another screen I want <code>changer la langue</code> to be rendered in this screen</p>
  <p>Memory leakage</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>const [language, setLanguage] = useState('') 
      const [visible, setVisible] = useState(false)
      const {t} = useTranslation();    
      const fetchLanguage =  async () =&gt;{
          try{
              const currentLanguage = await AsyncStorage.getItem('language')
              if (currentLanguage === null ){
                  setVisible(true)
              }
              else{
                  setLanguage (currentLanguage)
                  i18n.changeLanguage(currentLanguage)
              }
          }catch (e){
              console.log(e)
          }
         
      }
      useEffect (()=&gt;{
          fetchLanguage()
      }, [])</code></pre>
  </div>
  </div>
  </p>