React useEffect gets error - Missing Dependency

Question

I try to use useEffect but it gets error looks like in below,

React Hook useEffect has a missing dependency: 'data'. Either include it or remove the dependency array

Here is my component,

let id = props.location.pathname.split("--")[1];
let str = props.location.pathname.split("--")[0].substr(1);
const data = {id: id, link: str}

const [title, setTitle] = useState("")

useEffect(() => {
    setTitle("...") // Yükleniyor.
    async function getTitle() {             
        axios.post('/api/data/entry/get', data)
        .then(res => {
        setTitle(res.data.title)
        // TODO: Catch ekle.
        })
    }
    getTitle()
}, [props])

The best way for you to write your code would be to pass id and str as deps to useEffect and form the data object within the useEffect callback — Shubham Khatri, Nov 08 '19 at 08:11

Victor · Answer 1 · 2019-11-08T08:27:51.567

You have to include “data” in the dependency array. This is because your hook uses it inside its callback.

This way, the hook will be called every time one of the variables in the dependency array is changed.

I noticed the “data” object uses values in the properties of the component. You might say “ok then why should I include both props and data?” Well, when defining a dependency array, you need to be as granular as possible. Having it depend on props is way too general. In your case, you should make it depend on nothing but “data”

EDIT

I missed the fact that if you were to add data as a dependency, then the hook would trigger with every re-render. That's because data is a new object with every render, basically. You could separate the members of data into variables and use those as dependencies:

Your component would now look like this:

const id = props.location.pathname.split("--")[1];
const str = props.location.pathname.split("--")[0].substr(1);

const data = useRef({id: id, link: str});

const [title, setTitle] = useState("")

useEffect(() => { /* ... */ }, [id, str]);

Note that I have not tested the code. Please see if this works.

Thanks. But if i don't add props to dependency, useEffect doesn't work every route changes. I tried. and when i add data to dependencies, it posts data every second to server automatically. — mehmetdemiray, Nov 08 '19 at 07:51
@MehmetDemiray that's because `data` is a new object everytime your component renders. How about you use `props.location` instead as a dependency? — Victor, Nov 08 '19 at 08:13

akano1 · Answer 2 · 2019-11-08T08:06:50.780

0

You have to add data to your dependency list, like below

let id = props.location.pathname.split("--")[1];
let str = props.location.pathname.split("--")[0].substr(1);
const data = {id: id, link: str}

const [title, setTitle] = useState("")

useEffect(() => {
    setTitle("...") // Yükleniyor.
    const getTitle = async () => {
      const res = await 
        axios.post('/api/data/entry/get', data)
        setTitle(res.data.title)
        // TODO: Catch ekle.
        };
    getTitle()
}, [props])

edited Nov 08 '19 at 08:06

answered Nov 08 '19 at 07:37

akano1

40,596
19
54
67

when i add data to dependencies, it posts data every second to server automatically. – mehmetdemiray Nov 08 '19 at 07:47

React useEffect gets error - Missing Dependency

2 Answers2