使用 i18next 时如何处理 ESLint react-hooks 'exhaustive-deps' 规则？

Question

I have add react-hook/exhaustive-deps and Im having issues deciding how to do things.

Let's say that I have a function that does an Ajax call to get user data. If there is an error then it informs the user about it.

const { t } = useTranslation();
useEffect(() => {
  async function getUser() {
     setLoading(true);
     try {
       const { user } = await queryUser(userId);
       setUser(user);
     } catch(error) {
       setLoading(false);
       if(!error.isAuthenticated) {
         t('home');
       }
     }
  }
  
  if (id) {
    getUser();
  }
}, [t, id])

When the user decides to change the language, Does it mean that it will execute this code again? How can I avoid that? I don't want a second Ajax call because the language has changed.

I know that I can disable the rule but Im reading everywhere that it is more convenient not to do it. Is there any best practices or blog post related to handling common uses cases for react-hook/exhaustive-deps?

Answer 1

It seems when you change language new instance of t is being returned...

This is known situation in general, when sometimes you might want only to read some value inside useEffect but not react to its change, and react team plans to create a hook for it called useEvent , but officialy it is not available yet.

Till then, I think closest you could do is something like below. Add a new useEffect before your main useEffect .

let storedT = useRef();
React.useEffect(() => {
    storedT.current = t;
});

useEffect(() => {
    async function getUser() {
        setLoading(true);
        try {
            const {
                user
            } = await queryUser(userId);
            setUser(user);
        } catch (error) {
            setLoading(false);
            if (!error.isAuthenticated) {
                console.log(storedT.current("home"))
            }
        }
    }

    if (id) {
        getUser();
    }
}, [id])

Now, since the storedT is a ref , you don't need to add it as a dependency in your second useEffect , and you can use it there directly.

But this pattern may have some problems for example if you pass the storedT to a child component, which calls it inside her own useEffect , then child components useEffect might run first, hence storedT won't be initialized. More info on this pattern and its possible problems.

---

If you don't like above pattern, then maybe as a last resort you could also use:

  // eslint-disable-next-line react-hooks/exhaustive-deps