title: React hooks useState getting diferrent value from redux state
body: <p>I have react component look like this following code:</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import { useDispatch, useSelector } from &quot;react-redux&quot;;
  import { Link, useParams } from &quot;react-router-dom&quot;;
  import { createClient, getClients } from &quot;../redux/actions/clients&quot;;
  
  function UpdateClient(props) {
    let params = useParams();
  
    const { error, successSubmit, clients } = useSelector(
      (state) =&gt; state.clients
    );
    const [client, setClient] = useState(clients[0]);
  
    const dispatch = useDispatch();
  
    useEffect(() =&gt; {
      dispatch(getClients({ id: params.id }));
    }, []);
  
    const submitClient = () =&gt; {
      dispatch(createClient(client));
    };
  
    return (
     &lt;div&gt;{client.name}  {clients[0].name}&lt;/div&gt;
    );
  }
  
  export default UpdateClient;
  </code></pre>
  <p>And the result is different <code>client.name</code> return <code>test1</code>,
  while <code>clients[0].name</code> return correct data based on route parameter id (in this example parameter id value is 7) which is <code>test7</code></p>
  <p>I need the local state for temporary saving form data. I don't know .. why it's become different?</p>
  <p>Can you please help me guys? Thanks in advance</p>