useEffect can't update the state

Question

I have a part of code that loads the stored language of i18n. I am trying to get the language, change the state to true and then show the page on screen.

The code doesn't update the "yesLanguage" state and it still return false..

The code must return TRUE "yesLanguage".

The goal of the code is to set default language of application before showing the screen then showing the screen with a default language (language the the user recently set).

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */
/*
 import React from 'react';
 import {Text} from 'react-native';

  //import {SignUpScreen} from './src/components/PlayAround/ResponsiveLayout';
  import {HomeScreen} from './src/screens/HomeScreen';
 
 
  function App (props){
    return(
      <HomeScreen />
    );
  }
  
  
  
  export default App;
  */

import React,{useState,useEffect} from 'react';
import  './translations/i18n';
import {View, Text,Pressable} from 'react-native';
import {useTranslation} from 'react-i18next';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {HomeScreen} from './src/screens/HomeScreen';
import 'intl-pluralrules';



function App(props){


const {t, i18n} = useTranslation();
const [currentLanguage,setLanguage] = useState('ar');
const [yesLanguage , setYesLanguage] = useState(false);





const changeLanguage = value => {
    
    
    i18n
    .changeLanguage(value)
    .then(() => setLanguage(value))
    .catch(err => console.log(err));
    AsyncStorage.setItem('currentLnaguage',value);
    
};


React.useEffect(()=>{
    AsyncStorage.getItem('currentLnaguage').then(val => {
        
        //console.log(val+'useeee2');
        let newDefaultLang = val ? val :"ar"; // or Change ar with the default language
        i18n.locale = newDefaultLang;
        changeLanguage(newDefaultLang);
        //
        setYesLanguage(true);
        console.log(newDefaultLang+"qqqq");
    });
    
},[]);

console.log(yesLanguage);
//AsyncStorage.clear();
return yesLanguage && <HomeScreen buttonTitle={t('ordernow')} deliveryText={t('delivery')} />

};

export default App;

update here is my i18n file code

import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';
//import LanguageDetector from 'i18next-browser-languagedetector';
import en from './en/en.json';
import ar from './ar/ar.json';
import he from './he/he.json';
import AsyncStorage from '@react-native-async-storage/async-storage';
import React from 'react';


/*
i18n
.use(initReactI18next).init({
  lng: 'en',
  fallbackLng: 'en',
  resources: {
    en: en,
    ar: ar,
  },
  interpolation: {
    escapeValue: false // react already safes from xss
  }
});*/


const getDefaultLang = async () => {

  
  
  const storedLang = await AsyncStorage.getItem('currentLnaguage');
  
  
  /*if(storedLang!= null){
    i18n.defaultLocale = storedLang;
    i18n.locale = storedLang;
    i18n.fallbacks = true;
  }*/

  

  return i18n
    .use(initReactI18next) 
    .init({
      resources: {
        en: en,
        ar: ar,
        he: he
      },
      lng: storedLang ? storedLang : 'ar', 
      //lng: storedLang || "ar",
      interpolation: {
        escapeValue: false, 
      },

      fallbackLng: ['en', 'ar','he'],
    });
};

export default getDefaultLang();

his useEffect will run once, it is what he want. The probleme is maybe your async task doesn't have the context of your application. To try it, you can `console.log(setYesLanguage)` to see what informations you have! — Melvynx, Oct 25 '21 at 15:57
does this console.log(newDefaultLang+"qqqq"); work properly? — Abu Sufian, Oct 25 '21 at 16:00
Ok, so no problem. So the easy way for us is to create a codesandbox! — Melvynx, Oct 25 '21 at 17:20
Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — coreyward, Oct 25 '21 at 19:22

Moustaoui Salaheddine · Answer 1 · 2022-04-03T12:01:18.673

0

If useEffect doesn't work fun, just use the useFocusEffect

import { useFocusEffect } from '@react-navigation/native';
function App(props){
  /* your code here */
    useFocusEffect(
        React.useCallback(() => {
            // your code here
        }, [])
    );
  /* your code here */
}

Edit : you need to called useFocusEffect inside of the body of a function component

edited Apr 03 '22 at 12:01

answered Oct 26 '21 at 23:03

Moustaoui Salaheddine

56
6

Hooks can only be called inside of the body of a function component so this will result in an error – Babou Mar 23 '22 at 04:10
yes @Babou you need to called useFocusEffect inside of the body of a function component – Moustaoui Salaheddine Apr 03 '22 at 11:46

score -1 · Answer 2 · edited Oct 27 '21 at 04:37

There are some useEffect dependecy changes needs to be done and it will work like a charm.

Have a look at the below code with changes and let me know if it works.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React,{useState,useEffect} from 'react';
import  './translations/i18n';
import {useTranslation} from 'react-i18next';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {HomeScreen} from './src/screens/HomeScreen';
import 'intl-pluralrules';

function App(props){

    const {t, i18n} = useTranslation();
    const [currentLanguage,setLanguage] = useState('ar');
    const [yesLanguage , setYesLanguage] = useState(false);

    const changeLanguage = React.useCallback(async value => {
        i18n
        .changeLanguage(value)
        .then(() => setLanguage(value))
        .catch(err => console.log(err));
        await AsyncStorage.setItem('currentLnaguage',value);
    }, []);

    React.useEffect(()=>{
        AsyncStorage
        .getItem('currentLnaguage')
        .then(val => {
            let newDefaultLang = val ? val :"ar"; // or Change ar with the default language
            i18n.locale = newDefaultLang;
            changeLanguage(newDefaultLang);
            setYesLanguage(true);
            console.log(newDefaultLang+"qqqq");
        });
    },[changeLanguage]);

    console.log(yesLanguage);
    return yesLanguage && <HomeScreen buttonTitle={t('ordernow')} deliveryText={t('delivery')} />
};

export default App;

thanks, but I get error rendered more hooks than during the previous render — Mikha Matta, Oct 25 '21 at 20:12
@MikhaMatta I have made some changes in code please have a try again. — Vicky Ahuja, Oct 26 '21 at 03:12
thanks.. I still have a problem: undefined is not an object (evaluating prevDeps.length) — Mikha Matta, Oct 26 '21 at 05:59
@MikhaMatta I think this error is not occurring with the above code as it code not accessing any prevDeps.length property, It must be somewhere else — Vicky Ahuja, Oct 26 '21 at 16:39

useEffect can't update the state

2 Answers2