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

您应该在创建 handlerFromParent 的组件中使用 useCallback。考虑以下示例：

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>

这是在父级中使用 useEffect 的示例：

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>