React Hook useEffect has a missing dependency: 'xxx' ?

[luojinghui]

Hi, I am researching React Hook recently, it's great.

But I have a problem, I did not find a suitable answer in the React Hook documentation and google to solve my problem.

When I used a function in useEffect and function component together, I encountered a warning that I did not specify a dependency in useEffect, as shown below:

Is there any way to solve my problem? I have thought about it for a long time.

What is the current behavior?

React Hook useEffect has a missing dependency: 'setCenterPosition'. Either include it or remove the dependency array. (react-hooks/exhaustive-deps)

Mini repro in codesandbox:
https://codesandbox.io/s/trusting-kowalevski-oet4b

Any solution, thanks.

Code

function App() {
  const [elePositionArr, setElePositionArr] = useState([
    { left: 0, top: 0 },
    { left: 0, top: 0 },
    { left: 0, top: 0 }
  ]);
  const stageRef = useRef(null);
  const Stage = useRef({ w: 0, h: 0 });
  const currentIndex = useRef(0);

  useEffect(() => {
    // Record the size of the stage
    const stageW = stageRef.current.scrollWidth;
    const stageH = stageRef.current.scrollHeight;

    Stage.current = { w: stageW, h: stageH };

    const index = Math.floor(Math.random() * 3);
    currentIndex.current = index;
    setCenterPosition(index);
  }, []);

  // Centering a block element
  function setCenterPosition(index) {
    let cacheEle = elePositionArr;
    // calc center postion
    const centerOfLeft = Stage.current.w / 2 - 25;
    const centerOfTop = Stage.current.h / 2 - 25;

    cacheEle = cacheEle.map((item, i) => {
      const randomWNum = Math.floor(Math.random() * Stage.current.w) - 50;
      const randomHNum = Math.floor(Math.random() * Stage.current.h) - 50;
      const randomLeft = randomWNum <= 50 ? 50 : randomWNum;
      const randomTop = randomHNum <= 50 ? 50 : randomHNum;
      let newItem;

      if (index === i) {
        newItem = { left: centerOfLeft, top: centerOfTop };
      } else {
        newItem = { left: randomLeft, top: randomTop };
      }

      return newItem;
    });

    setElePositionArr(cacheEle);
  }

  function handleClickLi(index) {
    if (currentIndex.current !== index) {
      setCenterPosition(index);
      currentIndex.current = index;
    }
  }

  return (
    <div className="container">
      <div className="stage" ref={stageRef}>
        {elePositionArr.map((item, index) => (
          <div className="ele" key={index} style={item}>
            {index}
          </div>
        ))}
      </div>
      <ul className="nav">
        {elePositionArr.map((item, index) => (
          <li
            className={currentIndex.current === index ? "active-li" : ""}
            onClick={() => {
              handleClickLi(index);
            }}
            key={"li" + index}
          >
            {index}
          </li>
        ))}
      </ul>
    </div>
  );
}

[gaearon]

This should answer your question:

https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies

[luojinghui]

This should answer your question:

https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies

@gaearon
Did not solve my problem, my problem is more special, my run functionsetElePositionArr wants to fire on componentDidMount and handleClick, but the React Hook function does not meet my requirements and a warning appears.

[luojinghui]

My question is :React Hook cannot call a function in the useEffect and function component to setState operation？

[gaearon]

Leaving open so we can respond to second question.

[asumaran]

I'm having the same ESLint warning but in my case I want to make an async call when my component is mounted.

const ManageTagsModalBody: React.FC<IProps> = ({ children, getTags }) => {
  useEffect(() => {
    getTags();
  }, []);

  return <div>{children}</div>;
};

Line 12:  React Hook useEffect has a missing dependency: 'getTags'. Either include it or remove the dependency array. If 'getTags' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps 

ManageTagsModalBody doesn't depend on any data it's only used as a wrapper to load data anytime the component is rendered. It's worth noting the children component is using the data getTags has fetch.

I'm not sure what to add to the list of dependencies.

[MS44118]

i'm interested for an explanation also.
React Hook useEffect has a missing dependency: 'dispatch'.

  useEffect(() => {
    axios.get('http://localhost:8000/api/future-registrations')
      .then((result) => {
        dispatch(initRegistrationsAction(result.data));
      });
  }, []);

[ifokeev]

Same issue here. Strange rule.

[OnkelTem]

Same here. As simple as in #15865 (comment):

  useEffect(() => {
    dispatch(fetchPosts());
  }, []);

Is there a way to suppress this warning?

[fayway]

As suggested in the warning message, you can do like that

const initFetch = useCallback(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  useEffect(() => {
    initFetch();
  }, [initFetch]);

[shkyung]

@fayway then whenver initFetch and dispatch value changed, useEffect's callback will be execute.
he wants to execute callback once

[fayway]

@shkyung In my case, initFetch will not change cause (store.)dispatch doesn't either

[lbb00]

Maybe it can be like this

const setCenterPosition = useRef(null)
setCenterPosition.current = useCallback( ()=>{} ,[deps])

effect(()=>{ setCenterPosition.current() },[setCenterPosition,otherDeps])

[wickstjo]

This change seems a bit ridiculous and counter productive to be quite frank. Rather rollback to an earlier version and let you think this one through.

[micahbales]

Have the same issue. I only want my fetch to fire on componentDidMount. Adding the dependency to the array results in repeatedly hitting the endpoint.

[Stoner609]

React Hook useEffect has a missing dependency: 'dispatch'.

const [state, dispatch] = useReducer(reducer, initialState);
const { count, step } = state;

useEffect(() => {
  const id = setInterval(() => {
    dispatch({ type: 'tick' }); // Instead of setCount(c => c + step);
  }, 1000);
  return () => clearInterval(id);
}, [dispatch]);

[rhulse]

This seems to be quite a common use case - one that I have run into on my current project.

You want to run an effect hook just one time, but there IS a dependancy, although you only care about the state of that at startup. Currently using
// eslint-disable-next-line react-hooks/exhaustive-deps,
to turn off the linting rule but would be nice to not have to in this case.

[luojinghui]

This seems to be quite a common use case - one that I have run into on my current project.

You want to run an effect hook just one time, but there IS a dependancy, although you only care about the state of that at startup. Currently using
// eslint-disable-next-line react-hooks/exhaustive-deps,
to turn off the linting rule but would be nice to not have to in this case.

Closing Lint is just a temporary solution, the key to this problem is not enough to understand the hook.

[wot48]

Same issue here. I just wanted to fire a function inside useEffect() once, having [] as second parameter does what I want, but it keeps giving this warning.

[NordlingDev]

Such a weird warning because I've never seen it before until today on a new project. It ruins the use case of having something called only once when component has mounted. There doesn't seem to be any workaround except ignoring the lint warning.

[ghost]

Id like to put in my two cents here. In particular with using Axios to cancel a network request. Will create a separate issue if required but felt this issue directly affected myself. So my useApi hook is as follows -

import axios, { AxiosInstance } from "axios";
import axiosRetry from "axios-retry";
import { FetchEnv } from "../../utilities";
import { useStorage } from "../useStorage";

export const useApi = ({ isAuth = false, retries = 3 } = {}) => {
  const cancelToken = axios.CancelToken.source();
  const { getItem } = useStorage();

  const getBaseUrl = () => {
    return FetchEnv({
      defaultValue: "http://api.example.com",
      key: "API_URI"
    });
  };

  const authorizedClient = (client: AxiosInstance) => {
    const session = getItem("SESSION", "sessionStorage");
    const hasAccessToken = Boolean(session.tokens.accessToken);

    if (isAuth && !hasAccessToken) {
      console.error("No access token found to initiate authorized request.");
      return client;
    } else {
      client.defaults.headers[
        "Authorization"
      ] = `Bearer ${session.tokens.accessToken}`;
      return client;
    }
  };

  const buildFetch = (): AxiosInstance => {
    const client = axios.create({
      baseURL: getBaseUrl(),
      cancelToken: cancelToken.token
    });
    axiosRetry(client, { retries });
    return isAuth ? authorizedClient(client) : client;
  };

  return {
    cancelRequest: cancelToken.cancel,
    fetch: buildFetch()
  };
};

To use this hook within a component, simply define it as below then it can be used to make both authenticated and unauthenticated calls either on mount, within a useEffect, as part of an event handler, etc. The cancelRequest is the unique cancel token generated that is paired with the "fetch" axios instance relative to this component.

const { cancelRequest, fetch } = useApi();

If for any reason this component dismounts, the following is called:

  useEffect(() => {
    return () => {
      cancelRequest("Auth network request cancelled");
    };
  }, []);

Now it works perfectly at present. However, the warning, when applied (putting cancelRequest as a useEffect dependency) immediately CANCELS the network request when the fetch method is called. Any advice would be greatly appreciated however it would appear the only solution at present would be to ts-lint disable this moving forward...

[rhulse]

I think the issue here may be the way we are thinking about hooks. @luojinghui's comment suggests that there is more to this than meets the eye. Perhaps we need to think differently? I have been able to remove this problem in one of my hooks with some refactoring. The code is clearer as a result.

It led me to wonder if, in @Stoner609's example just above this, the timing code should be in a useCallback hook? It is still odd having a function (which should be static) as a dependancy though.

[Fieel]

I think this case should be some sort of exception

[jacquesadit]

If you want to run a function only once when the component loads and which takes in parameters then you can use useRef to avoid the warning. Something like this works:

  const InitialPropA= useRef(propA);
  useEffect(() => {
    myFunction(InitialPropA.current);
  }, [myFunction, InitialPropA]);

[Lukortech]

As suggested in the warning message, you can do like that

const initFetch = useCallback(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  useEffect(() => {
    initFetch();
  }, [initFetch]);

As much as I love this witty reply this usually is what happens in my code.
I don't want to have all those pesky warning about dispatch going missing.

I'd love to know exactly what and why happens in that array of mystery :)

[GabeCabrera]

As suggested in the warning message, you can do like that

const initFetch = useCallback(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  useEffect(() => {
    initFetch();
  }, [initFetch]);

this also may create a memory leak in case of something like an API, it will make the call on an infinite loop.

[spmsupun]

@kennylbj well I do unregister but still it not a good practise

Guess I have to handle this from listener class,

[kennylbj]

Seems like your listener is called twice even if the socket id are the same.

I don't think this will happen if the following situation meets:

// call useEffect if and only if sockeId changed.
useEffect(() => {
 const unregister = register(socketId);
 return () => unregister(socketId);
}, [socketId])

Are there any other variables in the dependencies array changed during different renders and cause this behavior?

[spmsupun]

Yeah 3 dependencies, but I figure it out some different way

[shinoshu]

ぴえん

[weiwentao518]

As suggested in the warning message, you can do like that

const initFetch = useCallback(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  useEffect(() => {
    initFetch();
  }, [initFetch]);

wow，非常感谢你🙏

[ahtashamabbasse]

🚀 Below code snippet works really well for me

On Component did mount

const onInit = () => getUsers()
useEffect(onInit, [])

On parameter change

const onInit = () => getUser(id)
useEffect(onInit, [id])

[ymoon715]

Best work-around: react-hooks/exhaustive-deps: "off"
I have never found this eslint feature to be useful. Ever.

[taotao9125]

🚀 Below code snippet works really well for me

On Component did mount

const onInit = () => getUsers()
useEffect(onInit, [])

On parameter change

const onInit = () => getUser(id)
useEffect(onInit, [id])

nice work.

[k-funk]

I don't think the react docs quite cover @luojinghui 's use case, that is also the same that I have:

We have multiple ways of calling a given function, ie: setCenterPosition(). It could be called by watching for state change (hooked up via useEffect), a click handler (called directly), etc.

The react docs suggest

This is why usually you’ll want to declare functions needed by an effect inside of it

But usually in real-world examples, we need to reuse functions like we normally would with instance methods on a class component (this.setCenterPosition(...)), and I'm starting to wonder if hooks are actually good for feature-full, complex components.

I'm not actually sure, but maybe the solution is useCallback

const setCenterPosition = useCallback(() => {
  ...
}, [Stage, elePositionArr, setElePositionArr]);

useEffect() => {
  ...
}, [stageRef, Stage, currentIndex, setCenterPosition]);

...but that's kinda gross to me, and I'm hoping there's a cleaner way. Maybe @gaearon can confirm?

[naveenkash]

facing the same issue i can disable the warning bu using this line at the end of useEffect // eslint-disable-next-line react-hooks/exhaustive-deps but i don't want to use it

Here's My code

`const [items, setItems] = useState([
{
name: "test 1",
id: 1
},
{
name: "test 2",
id: 2
},
{
name: "test 3",
id: 3
},
{
name: "test 4",
id: 4
},
{
name: "test 5",
id: 5
}
]);

useEffect(() => {
const intervalId = setInterval(() => {
setItems(shuffleArray(items));
}, 1000);
return () => {
clearInterval(intervalId);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

[ewmiller]

My solution to this problem has been to simply stop using React Hooks for these cases. If you component needs lots of state logic and lifecycle events like componentDidMount that badly, just use a class component and save yourself the headache. Class components are perfectly fine, and if this thread proves anything, it's that React Hooks are not ready to fully replace them when complex state logic or lifecycle events are needed (nor do they confer any advantage in most of these cases - is your code really that much better for having used React Hooks?).

I'll be limiting my own use of React Hooks to simple ones like useState to set boolean flags and that sort of thing. If a component ever gets complex enough to need useEffect I treat that as a sign that maybe a class component is just a better fit.

(Edited for clarity).

[rommyarb]

This is my solution for now:

const mounted = () => {
  dispatch(something());
}

useEffect(mounted, []);

Thank you @ra30r react/issues/15865#issuecomment-651254164

[ManelGonzalez-ops]

What's the point on adding the function into the dependency Array? What's the point on those warnings? Kinda stupid

[k-funk]

What's the point on adding the function into the dependency Array? What's the point on those warnings? Kinda stupid

Please read an article on the topic. https://reacttraining.com/blog/when-to-use-functions-in-hooks-dependency-array/

[avillarubia]

this works for me

    const dispatch = useDispatch()

    useEffect(() => {
        async function fetch() {
            try {
                const { data } = await getDiscussionByTitle(params.title)
                setDiscussion(data)
            } catch (error) {
                dispatch(addRequestError({ message: error.response.data }))
            }
        }

        fetch()
    }, [params.title, dispatch])

[kwabena53]

As suggested in the warning message, you can do like that

const initFetch = useCallback(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  useEffect(() => {
    initFetch();
  }, [initFetch]);

This is what solved my problem. Don't forget to
import React, { useCallback } from "react"

[GabeCabrera]

This is a reasonably common issue, which can be solved by passing your dependency into the dependency array.

In the OP's example it could be solved by passing setCenterPosition like this.
In any of your cases, you would pass your dependency in the same place, this is not specific to his question.

If this warning is not handled it can cause memory leaks in your application as it can cause infinite loops and re-render issues.

In the case that you want an effect to only be ran once, Chris Coyier has an excellent example here

For more information though, as @gaearon said, it can be found here:
https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies

[vincent38wargnier]

Did anyone find a way to call a function inside a useEffect with empty array callback without warning and without adding bullshit code ?

React has the power to make easy things impossible. I love it.

[Kaydhiman]

This seems to be quite a common use case - one that I have run into on my current project.
You want to run an effect hook just one time, but there IS a dependancy, although you only care about the state of that at startup. Currently using
// eslint-disable-next-line react-hooks/exhaustive-deps,
to turn off the linting rule but would be nice to not have to in this case.

Closing Lint is just a temporary solution, the key to this problem is not enough to understand the hook.

I agree with you @luojinghui Please reopen this issue. I want to know the complete solution for this ...

[AKclown]

I want to execute useEffect only when specific attributes are changed, not the dependent parameters in useEffect. But eslint will warn me, how to solve it

[domotisas]

Hi, a possible solution is to simulate the class constructor @see Adam Nathaniel Davis post:
https://dev.to/bytebodger/constructors-in-functional-components-with-hooks-280m
This works fine for me.

[RacketyWater7]

I want to execute useEffect only when specific attributes are changed, not the dependent parameters in useEffect. But eslint will warn me, how to solve it

Well then put those attributes into the dependency array, and as for avoiding the eslint warning: also put the eslint line (below added) at the end of the useEffect to not let it call warning and work as expected hopefully.
// eslint-disable-next-line react-hooks/exhaustive-deps

[yoieh]

This still feels like an issue or at least a bit confusing... Or am i just dumb and misusing my useEffect?

Example:

const [id, setId] = useState(null)
const [stateData, setStateData] = useState()

useEffect(() => {
  const fetchData = async () => {
      const data = fetch(`/data/${id}`);
  
      if (data) {
          setStateData(data);
      }
  };
  
  if (id) { // only fetch data if id is set
      fetchData();
  }
}, [id]); // React Hook useEffect has a missing dependency: 'setData'. Either include it or remove the dependency array.

Example with out warrning

const [id, setId] = useState(null)
const [stateData, setStateData] = useState()

useEffect(() => {
  const fetchData = async () => {
      const data = fetch(`/data/${id}`);
  
      if (data) {
          setStateData(data);
      }
  };
  
  if (id) { // only fetch data if id is set
      fetchData();
  }
}, [id, setStateData]); // No warning but results in a infinity loop

[k-funk]

This still feels like an issue or at least a bit confusing... Or am i just dumb and misusing my useEffect?

Example:

const [id, setId] = useState(null)
const [stateData, setStateData] = useState()

useEffect(() => {
  const fetchData = async () => {
      const data = fetch(`/data/${id}`);
  
      if (data) {
          setData(data);
      }
  };
  
  if (id) { // only fetch data if id is set
      fetchData();
  }
}, [id]); // React Hook useEffect has a missing dependency: 'setData'. Either include it or remove the dependency array.

Example with out warrning

const [id, setId] = useState(null)
const [stateData, setStateData] = useState()

useEffect(() => {
  const fetchData = async () => {
      const data = fetch(`/data/${id}`);
  
      if (data) {
          setData(data);
      }
  };
  
  if (id) { // only fetch data if id is set
      fetchData();
  }
}, [id, setData]); // No warning but results in a infinity loop

I'm presuming that your variable names are mixed up, and that setData() is actually setStateData(). If so, the reason that you don't need to put useState setters in the dependency is array is because

React guarantees that setState function identity is stable and won’t change on re-renders. This is why it’s safe to omit from the useEffect or useCallback dependency list

Source: https://reactjs.org/docs/hooks-reference.html#usestate

However, it should not be rerunning the useEffect infinitely. I would debug some more and make sure your variable names are what you expect them to be.

If by chance your setData is actually an unstable function (passed down in props?), that could cause an infinite loop.

[yoieh]

I'm presuming that your variable names are mixed up, and that setData() is actually setStateData(). If so, the reason that you don't need to put useState setters in the dependency is array is because

you are right, it should be setStateData()

If by chance your setData is actually an unstable function (passed down in props?), that could cause an infinite loop.

And yes it's an function exported and passed down by a context..

export const StateContext = React.createContext({});

export const StateContextProvider: React.FC = ({ children }) => {
  const [stateData, setStateData] = useState()
  
  const setStateData = (key: string, value: any) => {
      setState((prev) => {
          return {
              ...prev,
              [key]: value,
          };
      });
  };
  
  ....
  
  return (
        <StateContext.Provider
            value={{
                ...state,
              setStateData
            }}
        >
            {children}
        </StateContext.Provider>
    );
};

export const useStateContext = () => React.useContext(StateContext);

Then used like this.

const [id, setId] = useState(null)
const {stateData, setStateData} = useStateContext()

useEffect(() => {
  const fetchData = async () => {
      const data = fetch(`/data/${id}`);
  
      if (data) {
          setStateData(data);
      }
  };
  
  if (id) { // only fetch data if id is set
      fetchData();
  }
}, [id, setStateData]); // No warning but results in a infinity loop

So it seems to be me being dumb and using it wrong.
every time setStateData() runs it seems to trigger an new update.

[k-funk]

I'm presuming that your variable names are mixed up, and that setData() is actually setStateData(). If so, the reason that you don't need to put useState setters in the dependency is array is because

you are right, it should be setStateData()

If by chance your setData is actually an unstable function (passed down in props?), that could cause an infinite loop.

And yes it's an function exported and passed down by a context..

const [stateData, setStateData] = useState()

const setStateData = (key: string, value: any) => {
    setState((prev) => {
        return {
            ...prev,
            [key]: value,
        };
    });
};

....

return (
      <StateContext.Provider
          value={{
              ...state,
            setStateData
          }}
      >
          {children}
      </StateContext.Provider>
  );
};

export const useStateContext = () => React.useContext(StateContext);

Then used like this.

const [id, setId] = useState(null)
const {stateData, setStateData} = useStateContext()

useEffect(() => {
  const fetchData = async () => {
      const data = fetch(`/data/${id}`);
  
      if (data) {
          setData(data);
      }
  };
  
  if (id) { // only fetch data if id is set
      fetchData();
  }
}, [id, setData]); // No warning but results in a infinity loop

So it seems to be me being dumb and using it wrong.

Not dumb. I also find hook dependencies to be rather confusing, and often screw up my code without realizing it.

In your case, you can probably use useCallback() to make your function stable:

const setStateData = (key: string, value: any) => {
  setState(...)
}

->

const setStateData = useCallback((key: string, value: any) => {
  setState(...)
}, []) // shouldn't need `setState` as a dep

[Fiaz-Tariq]

To fix hook dependency warnings, add the below code in the package.json file below the eslintConfig.
{
"plugins": [
"react-hooks"
],
"rules": {
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "off"
}
}