Question 200053 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – ReactJs: Why is the `useEffect` not running even once in this case?

I have a web application which should show the contents in different languages based on a value chosen from the dropdown. The chosen language is stored in a LanguageContext and the page should update with new strings when the language is changed.

We have StringsContext and StringsProvider taken from a createContext().

I have an AppProvider written like this:

function AppProvider({ children, languageStrings }) {
  const val = useLoader(languageStrings);
  const [isTranslationsLoading, intl] = val;
  if (isTranslationsLoading) {
    return null;
  }
  return <StringsProvider value={intl}>{children}</StringsProvider>;
}

And useLoader written like this:

const useLoader = (languageStrings = {}) => {
  const { language } = useLanguageContext();

  const [intl, setIntl] = useState(null);
  const [isTranslationsLoading, setIsTranslationsLoading] = useState(false);
  const [translationLoadingError, setTranslationLoadingError] = useState('');

  const fetchStrings2 = () => {
    .
    .
    .// some function call
    .

  };
  
  console.log('before useEffect');
  useEffect(() => {
    console.log('inside useEffect');
    fetchStrings2();
  }, [language]);
  console.log('after useEffect');

  return [isTranslationsLoading, intl, translationLoadingError];
};

Now when I run this, I’m expecting the useEffect() above to be executed once during initilization. Rest of the console logs are printing but execution is not going inside useEffect(). I couldn’t understand why.

Tags:

2

Answers


  1. 0

    Based on the code you provided, there are a few potential issues that could prevent the useEffect from being executed:

    1. Make sure that the language value is changing when the dropdown selection is changed. The useEffect will only be triggered if the value of language changes.

    2. Check if the useLoader function is being called correctly and that the languageStrings argument is being passed in. Double-check that the languageStrings object is not empty.

    3. Verify that the useLanguageContext hook is returning the correct language value. Ensure that the useLanguageContext hook is properly implemented and returning the expected value.

    Additionally, there are a few improvements you can make to the code:

    1. You can simplify the useLoader function by combining the state variables into a single object. This can make the code more readable and reduce the number of state updates.
    const useLoader = (languageStrings = {}) => {
  const { language } = useLanguageContext();

  const [state, setState] = useState({
    intl: null,
    isTranslationsLoading: false,
    translationLoadingError: '',
  });

  const fetchStrings2 = () => {
    // Fetch language strings and update the state accordingly
  };

  useEffect(() => {
    fetchStrings2();
  }, [language]);

  return [state.isTranslationsLoading, state.intl, state.translationLoadingError];
};
    1. In the AppProvider component, you can destructure the values returned by the useLoader hook directly to improve code readability:
    function AppProvider({ children, languageStrings }) {
  const [isTranslationsLoading, intl, translationLoadingError] = useLoader(languageStrings);

  if (isTranslationsLoading) {
    return null;
  }

  return <StringsProvider value={intl}>{children}</StringsProvider>;
}

    By making these improvements and verifying that the necessary values are being passed correctly, the useEffect should be triggered when the language value changes.

    Login or Signup to reply.
  2. 0

    I think the problem comes from "useLoader" because "useEffect" hook work with react functional component, and every component in react must start with uppercase letter.
    So, try changing "useLoader" to "UseLoader".

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search