How can fix the warning errors present in the dependency array of the useEffect

Question

I want to resolve all warnings in my project but i don't know what dependencies should i include inside the dependency array. Below i share the code:

import React, { useState, useEffect } from 'react';
import { Redirect } from 'react-router-dom';
import Layout from '../components/Layout';
import { getPicture, getAlbums, updatePicture } from './ApiAdmin';

const UpdatePicture = ({ match }) => {

 ...

 const init = (pictureId) => {
    getPicture(pictureId).then(data => {
        if (data.err) {
            setValues({ ...values, err: data.err })
        } else {
            // populate the state
            setValues({
                ...values,
                name: data.name,
                album: data.album._id,
                formData: new FormData()
            })
            initAlbums()
        }
    })
 }

 const initAlbums = () => {
    getAlbums().then(data => {
        if (data.err) {
            setValues({
                ...values,
                error: data.err
            });
        } else {
            setValues({
                albums: data,
                formData: new FormData()
            });
         }
    });
 }

 const redirectUser = () => {
    if (redirectToProfile) {
        if (!error) {
            return < Redirect to="/" />
        }
     }
  }

 useEffect(() => {
    init(match.params.pictureId);
    redirectUser(); // allows display the changes when a picture is updated
 }, []);

...


}

And this is the warning that throws me:

React Hook useEffect has missing dependencies: 'init', 'match.params.pictureId', and 'redirectUser'. Either include them or remove the dependency array react-hooks/exhaustive-deps

I appreciate who can help me with this.

Does this answer your question? [How to fix missing dependency warning when using useEffect React Hook?](https://stackoverflow.com/questions/55840294/how-to-fix-missing-dependency-warning-when-using-useeffect-react-hook) — glinda93, Jul 15 '20 at 03:05

score 1 · Answer 1 · answered Jul 15 '20 at 03:14

1

Refer to the reactjs doc here. Is it safe to omit functions from the list of dependencies?

answered Jul 15 '20 at 03:14

Eric

1,279
1
11
8

score 0 · Accepted Answer · answered Jul 15 '20 at 03:01

0

Just include them in your dependency array

useEffect(() => {
    init(match.params.pictureId);
    redirectUser(); // allows display the changes when a picture is updated
 }, [init, match.params.pictureId, redirectUser]);

These are all things that when they change should invoke a new run of useEffect. I recommend making init and redirectUser function use useCallback so they don't make it the useEffect run on each render unless they change (they will also have dependency arrays!).

answered Jul 15 '20 at 03:01

Diesel

5,099
7
43
81

Hello @Diesel, thanks for your time! But when i add the dependencies, in the terminal appear this error: Failed to compile. Line 32:9: 'init' is not defined no-undef Line 32:15: 'match' is not defined no-undef Line 32:39: 'redirectUser' is not defined no-undef – jaimeduque17 Jul 15 '20 at 04:16
Forget it, with the useCallback I was able to resolve the warning. Thanks – jaimeduque17 Jul 15 '20 at 04:30

How can fix the warning errors present in the dependency array of the useEffect

2 Answers2