Why does the dependency of the useEffect not work?

Question

I have a code on the pages in the useEffect where I change the url.

First Page

useEffect(() => {
    navigate(`/${i18n.language}`)
}, [i18n.language])

Second Page

useEffect(() => {
    navigate(`${BIOGRAPHY_PAGE_ROUTE}/${i18n.language}`)
}, [i18n.language])

Etc.

But on one page, the dependency does not work and the useEffect is not called.useEffect code:-

useEffect(() => {
    navigate(NEWS_PAGE_ROUTE + `/${id}/${i18n.language}`)
}, [i18n.language])

Why does everything work on other pages and the useEffect works, but on one it does not work.

Check if the `i18n.language` value changes on the affected page — Badal Saibo, Aug 10 '22 at 11:18
Seems like you are trying to navigate from `/NEWS_PAGE_ROUTE/1` to `/NEWS_PAGE_ROUTE/2`, if that's the case, you can take a look at [this question](https://stackoverflow.com/questions/68825965/react-router-v6-usenavigate-doesnt-navigate-if-replacing-last-element-in-path/71642098#71642098) — Enfield Li, Aug 10 '22 at 11:19

score 1 · Answer 1 · answered Aug 10 '22 at 11:47

you have to put it like this, that allows you to be aware of the changes, sometimes it works as you have in your example, but when you install the eslint dependency in my case I work with next.js it tells me that it is wrong, I have to correct it for production

first place

[i18n.language]

second place

[BIOGRAPHY_PAGE_ROUTE, i18n.language]

page, dependency

 [id, i18n.language]

Why does the dependency of the useEffect not work?

1 Answers1