useEffect show a warning if I call a function in throw props?

Question

I'm using hook in react and I see this warning in my console, I search google but did not find best solution can any one tell me why this warning comes and how to 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 ");
  }, []);

Answer 1

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

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 aditional 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

Answer 2

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>

Answer 3

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

const { firtstTimeCourseList } = props;
useEffect(() => {
    firtstTimeCourseList();
    console.log("____UserEffect call function here ");
  }, [firtstTimeCourseList]);