title: React Hook useEffect has a missing dependency: 'props'
body: <p>I am trying to use react hooks (this is my first time) but I get this error when using useEffect like the above componentDidMount: 'React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array. However, 'props' will change when <em>any</em> 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'</p>
  <p>I'm trying to make a GET request to an API, and that needs some props in the url. This is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function SomeComponent(props) {
    const [data, setData] = useState({});
    const [loading, setLoading] = useState(true);
    const [hasError, setErrors] = useState(false);
    
    useEffect(() =&gt; {
      async function fetchData() {
        try {
          let response = await Axios.get( `/some-url/${props.obj.id}/abc`,
            
          );
          let { data } = response.data;
          setData(data);
          setLoading(false);
          props.totalStats({data });
        } catch (error) {
          setErrors(error);
          setLoading(false);
        }
      }
      fetchData();
    }, []);
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I've been looking and tried these solutions, but they don't work for me:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const { id } = props.obj.id;
  const {totalStats} = props.totalStats
  
  useEffect(()=&gt;{
  //Here is the code
  //I replace the $ {props.obj.id} by the id and the function props.totalStats by //totalStats
  },[id,totalStats]</code></pre>
  </div>
  </div>
  </p>
  <p>Doing it that way I obtained an undefined in the id and in the call to the function.</p>
  <p>Then I tried doing it this way:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>useEffect(()=&gt;{
  //here is the code like the first one
  
  },[props])</code></pre>
  </div>
  </div>
  </p>
  <p>But this makes n number of requests to the api</p>