javascript - useEffect show a warning if I call a function in throw props? - Stack Overflow

admin管理员组

文章数量:1291107

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 e 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 ");
}, []);

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 e 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 ");
}, []);

• javascript
• reactjs
• react-redux
• react-hooks

Share Improve this question Follow edited Dec 9, 2022 at 12:13 Peter Mortensen 31.6k2222 gold badges110110 silver badges133133 bronze badges asked Nov 7, 2019 at 11:06 Rohit Azad MalikRohit Azad Malik 32.2k1717 gold badges7171 silver badges9999 bronze badges 3

• what do you mean by throw props? – Gangadhar Gandi Commented Nov 7, 2019 at 11:07
• we used this function in props.firstTimeCourseList(); – Rohit Azad Malik Commented Nov 7, 2019 at 11:08
• None of the answers solved your problem? – Dupocas Commented Nov 11, 2019 at 14:32

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

You should use useCallback in the ponent 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./ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./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./ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

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]);

本文标签： javascriptuseEffect show a warning if I call a function in throw propsStack Overflow