useState setter not updating state when called in useEffect

Question

Pretty much what it says on the title. When I console.log(repos) it returns an empty array. Why is the repos state not updating?

import React, { useEffect, useState } from "react";
import axios from "axios";

export default () => {
  const [repos, setRepos] = useState([]);
  useEffect(() => {
    (async () => {
      try {
        let repo_lists = await axios.get(
          "https://api.github.com/users/Coddielam/repos"
          // { params: { sort: "created" } }
        );
        setRepos(repo_lists.data.slice(1).slice(-10));
        console.log(repo_lists.data.slice(1).slice(-10));
        console.log(repos);
      } catch (err) {
        setRepos([
          "Something went wrong while fetching GitHub Api./nPlease use the link below to view my git repos instead ",
        ]);
      }
    })();
  }, []);

  return (
    <div className="content">
      <h2>View my recent git repos:</h2>
      <ul>
        ...
      </ul>
    </div>
  );
};

Answer 1

Answer is very simple. Your useState is updating .. believe me. The reason why you don't see it when you console.log() is because SetRespos is an asynchronous function.

Basically when you declare a function to update you useState value, react will use it as an async function

EXAMPLE

const [example, setExample] = useState('');

useEffect(() => {
  
  setExample('Hello');
  console.log('I'm coming first'); // This will be executed first
  console.log(example); // This will come after this

}, [])

The output will be :

  I'm coming first
  // Blank Line

But still your useState will update after this. If you want to see that do this :

 useEffect(() => {

  console.log(respose); // This will give you the value
}, [respos])

I'm using a separate useEffect to console.log() the value. In the [] (dependency array) we pass respos which simply means that the useEffect will run every time the value of respos changes.

Read more about useStates and useEffects in react's documentation