title: React Hooks useState Array empty with states rendered in the component
body: <p>I have a situation where i can successfully dispatch my states with reducers and i can render it in my component</p>
  
  <p>Here the relevant code</p>
  
  <p>in my <code>action/index.js</code></p>
  
  <pre><code>export const receivedLeaguesList = json =&gt; ({
    type: RECEIVE_LEAGUES_LIST,
    json: json
  });
  
  export function fetchLeaguesList() {
    return function(dispatch) {
      dispatch(requestLeaguesList());
        return axios
          .get("https://www.api-football.com/demo/v2/leagues/")
          .then(res =&gt; {
            let leagues = res.data.api.leagues;
            dispatch(receivedLeaguesList(leagues));
          })
          .catch(e =&gt; {
            console.log(e);
          });
      }
  }
  </code></pre>
  
  <p>my <code>reducers/index.js</code></p>
  
  <pre><code>import { REQUEST_LEAGUES_LIST, RECEIVE_LEAGUES_LIST } from "../actions";
  
  const initialState = {
    leaguesList: [],
    isLeagueListLoading: false
  };
  
  const reducer = (state = initialState, action) =&gt; {
    switch (action.type) {
      case REQUEST_LEAGUES_LIST:
        return { ...state, isLeagueListLoading: true };
      case RECEIVE_LEAGUES_LIST:
        return { ...state, leaguesList: action.json, isLeagueListLoading: false };
      default:
        return state;
    }
  };
  </code></pre>
  
  <p>in my component <code>component/Leagues.js</code></p>
  
  <pre><code>let Leagues = ({ leaguesList, loading, getList }) =&gt; {
    useEffect(() =&gt; {
      getList();
    }, [getList]);
  
  
    const [itemsLeagues] = useState([leaguesList]);
  
    console.log("league list", itemsLeagues);
  
  const mapDispatchToProps = {
    getList: fetchLeaguesList
  };
  </code></pre>
  
  <p>I have reproduced the demo here => <a href="https://codesandbox.io/s/select-demo-71u7h" rel="nofollow noreferrer">https://codesandbox.io/s/select-demo-71u7h</a>?</p>
  
  <p>I can render my <code>leaguesList</code> states in my component doing the map, but why when</p>
  
  <pre><code>  const [itemsLeagues] = useState([leaguesList]);
  
    console.log("league list", itemsLeagues); 
  </code></pre>
  
  <p>returns an empty array ?</p>
  
  <p>See the image<a href="https://i.stack.imgur.com/y2siT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y2siT.png" alt="enter image description here"></a></p>