title: React: Setting input state inside useEffect not working
body: <p>I'm developing an app using React and Redux. I'm trying to pre-populate my input using API data. For this purpose, i'm getting my API data inside useEffect. And also i'm setting my state inside that. The issue is the input is not getting populated with the API data. It is empty, But when i reload the page, it gets populated and works fine.</p>
  
  <p>Here is my code:</p>
  
  <p><strong><em>EditQuestion.js</em></strong></p>
  
  <pre><code>const EditQuestion = ({ getQuestionById, question: { question, loading }, match: { params } }) =&gt; {
    const [formData, setFormData] = useState({ title: "" });
  
    useEffect(() =&gt; {
      // Get data from API
      getQuestionById(params.id);
  
      // Populate `title` input with API Data
      setFormData({
        title: question !== null &amp;&amp; question.title ? question.title : ""
      });
  
    }, [getQuestionById, params.id]); // If `question` object is passed to this dependency array, `GET_QUESTION` is dispatched in an infinite endless loop 
  
    const onChange = e =&gt;
      setFormData({ ...formData, [e.target.name]: e.target.value });
  
    const onSubmit = e =&gt; {};
  
    const { title } = formData;
  
    return (
      &lt;form onSubmit={e =&gt; onSubmit(e)}&gt;
          &lt;input 
              type="text" 
              name="title" 
              placeholder="e.g How to encrypt a string in C" 
              value={title} 
              onChange={e =&gt; onChange(e)}
          /&gt;
          &lt;input type="submit" value="Ask question" /&gt;
      &lt;/form&gt;
    );
  };
  
  EditQuestion.propTypes = {
    getQuestionById: PropTypes.func.isRequired,
    question: PropTypes.object.isRequired
  };
  
  const mapStateToProps = state =&gt; ({
    question: state.question
  });
  
  export default connect(
    mapStateToProps,
    { getQuestionById }
  )(EditQuestion);
  </code></pre>
  
  <p><strong><em>question.js</em></strong> (action)</p>
  
  <pre><code>// Get question by ID
  export const getQuestionById = id =&gt; async dispatch =&gt; {
    try {
      const res = await axios.get(`/api/question/${id}`);
  
      dispatch({
        type: GET_QUESTION,
        payload: res.data
      });
    } catch (err) {
      dispatch({
        type: QUESTION_ERROR,
        payload: { msg: err.response.statusText, status: err.response.status }
      });
    }
  };
  </code></pre>
  
  <blockquote>
    <p>NOTE: If i pass the <strong><code>question</code></strong> object to useEffect hook dependency
    array (As ESlint is telling me to do so), input gets populated but the <strong><code>GET_QUESTION</code></strong> is
    dispatched in an infinite endless loop. As i've seen in the
    <a href="https://github.com/zalmoxisus/redux-devtools-extension" rel="nofollow noreferrer">ReduxDevToolsExtension</a> tab in chrome</p>
  </blockquote>
  
  <p>Any idea to get this issue solved?</p>