title: useEffect continuously fires GET requests
body: <p>I'm learning React and trying to make a small project by myself for the first time, but I'm having trouble with <code>useEffect</code>.</p>
  <p>I'm trying to autofill a form with information from my backend. I can get it to autofill, but it continuously sends GET requests. This is what I have:</p>
  <pre class="lang-js prettyprint-override"><code>  useEffect(() =&gt; {
        axios
          .get('/admin/edit-product' + location.search)
          .then((res) =&gt; {
            const updatedControls = {
              ...controlsState,
              title: {
                ...controlsState.title,
                value: res.data.title,
              },
              image: {
                ...controlsState.image,
                value: res.data.image,
              },
              price: {
                ...controlsState.price,
                value: res.data.price,
              },
              description: {
                ...controlsState.description,
                value: res.data.description,
              },
            };
            setControlsState(updatedControls);
          })
          .catch((err) =&gt; console.error(err));
    }, [controlsState, location.search]);
  </code></pre>
  <p>I thought that the dependency array was supposed to stop it from running continuously, but I guess I'm missing something else.</p>
  <p>Not sure if it's needed, but this is what my original state looks like:</p>
  <pre class="lang-js prettyprint-override"><code>  const [controlsState, setControlsState] = useState({
      title: {
        elementType: 'input',
        elementConfig: {
          type: 'text',
        },
        label: 'Product Title: ',
        value: '',
      },
      image: {
        elementType: 'input',
        elementConfig: {
          type: 'url',
        },
        label: 'Image URL: ',
        value: '',
      },
      price: {
        elementType: 'input',
        elementConfig: {
          type: 'number',
        },
        label: 'Price: ',
        value: '',
      },
      description: {
        elementType: 'textarea',
        elementConfig: {
          name: 'description',
          htmlFor: 'description',
        },
        label: 'Description: ',
        value: '',
      },
    });
  </code></pre>
  <p>and <code>location</code> is from react-router-dom <code>useLocation</code></p>