3

I'm using hooks in React, and I see this warning in my console. I searched using Google Search, but I did not find the best solution. Why does this warning come and how can I resolve to this?

Line 9:6: React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array. However, 'props' will change when any prop changes, so the preferred fix is to destructure the 'props' object outside of the useEffect call and refer to those specific props inside useEffect react-hooks/exhaustive-deps printWarnings @ webpackHotDevClient.js:120 handleWarnings @ webpackHotDevClient.js:125 push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:190 push../node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:56 (anonymous) @ main.js:283 push../node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:281 push../node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:53 WebSocketTransport.ws.onmessage @ websocket.js:36

My code is this:

useEffect(() => {
    props.firtstTimeCourseList();
    console.log("____UserEffect call function here ");
}, []);
3
  • what do you mean by throw props? Nov 7, 2019 at 11:07
  • we used this function in props.firstTimeCourseList(); Nov 7, 2019 at 11:08
  • None of the answers solved your problem?
    – Dupocas
    Nov 11, 2019 at 14:32

3 Answers 3

6

You should pass all dependencies when declaring the second argument off useEffect.

The problem is firtstTimeCourseList is a callback provided via props, which means it doesn't have an stable signature therefore changes every render, always triggering the effect. You can wrap your callback with an additional layer of dependency check with useCallback

const Component = ({ handlerFromParent }) => {
    // Assuming that the handler doesn't have to change
    const stableHandler = useCallback(handlerFromParent, [])

    useEffect(() => {
        stableHandler()
   }, [stableHandler])
}

For more details, check this article from Dan Abramov.

1
  • useCallback should be used in the Parent that creates handlerFromParent to avoid stale closure problem (see my answer).
    – HMR
    Nov 7, 2019 at 11:28
5

You should use useCallback in the component where you create handlerFromParent. Consider the following example:

const { useState, useCallback } = React;
function App() {
  const [count, setCount] = useState(1);
  const add = () => setCount(count => count + 1);
  const aCallback = () => count;
  return (
    <div>
      {count}
      <button onClick={add}>+</button>
      <Child aCallback={aCallback} />
    </div>
  );
}
function Child({ aCallback }) {
  const cb = useCallback(aCallback, []);
  return <div>{cb()}</div>;
}
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

And here is the example where useEffect is used in the parent:

const { useState, useCallback } = React;
function App() {
  const [count, setCount] = useState(1);
  const add = () => setCount(count => count + 1);
  const aCallback = useCallback(() => count, [count]);

  return (
    <div>
      {count}
      <button onClick={add}>+</button>
      <Child aCallback={aCallback} />
    </div>
  );
}
function Child({ aCallback }) {
  return <div>{aCallback()}</div>;
}
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

1
  • 1
    Nice answer! Showing an use case where the callback need to change.
    – Dupocas
    Nov 7, 2019 at 11:46
3

If useEffect has any dependencies, those need to be added in square brackets.

const { firtstTimeCourseList } = props;
useEffect(() => {
    firtstTimeCourseList();
    console.log("____UserEffect call function here ");
  }, [firtstTimeCourseList]);
2
  • You have to define the firtstTimeCourseList const outside the useEffect.
    – HMR
    Nov 7, 2019 at 11:15
  • This could cause the effect to run too many times, to solve that you can use useCallback but that could cause stale closure when not done in the parent (see my answer).
    – HMR
    Nov 7, 2019 at 11:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.