useState react hook does not set the array state

Question

I am trying to set the videos state to the items array of the response from the api but when I console.log the videos it returns an empty array.... Here is the code to fetch the api in which I set the videos state

const [videos, setVideos] = useState([]);
const handleFormSubmit = async (searchterm) => {
    await fetch(
      `https://www.googleapis.com/youtube/v3/search?${params.toString()}&q=${searchterm}`
    )
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
        setVideos(data.items);
        console.log(videos);
      });
  };

How do I set the items array to the videos state?

setVideos is not a synchronous operation, the videos array will change the next time the functional component is rendered. — Rustam D9RS
– Rustam D9RS, Commented Aug 12, 2020 at 10:57
You can't log updated state right after calling setVideos. Your state is getting updated, your component will have to re-render to see the updated state. Also make sure you have a catch block to catch and handle any errors that might occur during the request. — Yousaf
– Yousaf, Commented Aug 12, 2020 at 11:00
Not related to your problem but either use async-await syntax or promise chaining, don't mix both of them. — Yousaf
– Yousaf, Commented Aug 12, 2020 at 11:08

Giovanni Esposito · Accepted Answer · 2020-08-12 10:56:55Z

7

Ciao, unfortunately with hooks you cannot log videos after setVideos call because setVideos is async.

To get the last value of videos you have to use useEffect hook in this way:

useEffect(() => {
   console.log(videos);
}, [videos]);

answered Aug 12, 2020 at 10:56

Giovanni Esposito

11.3k1 gold badge19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stark Jeon Over a year ago

Yeah Exactly what I want to say

Stark Jeon · Accepted Answer · 2020-08-12 11:15:03Z

1

TLDR

React Hooks work async setState -> render -> state binding

Answer

react hooks is working like that

setState
schedule render component ( I mean state changed component)
and render with changed state

So, You couldn't access video at that console.log(video)

Reference

edited Aug 12, 2020 at 11:15

answered Aug 12, 2020 at 10:58

Stark Jeon

1,1651 gold badge10 silver badges24 bronze badges

Comments

hgb123 · Accepted Answer · 2020-08-12 10:55:15Z

0

You are using async/await, so it should be

const [videos, setVideos] = useState([])
const handleFormSubmit = async (searchterm) => {
  const response = await fetch(
    `https://www.googleapis.com/youtube/v3/search?${params.toString()}&q=${searchterm}`
  )
  const data = await response.json()
  console.log(data)
  setVideos(data.items)
  console.log(videos)
}

answered Aug 12, 2020 at 10:55

hgb123

14.9k3 gold badges24 silver badges43 bronze badges

5 Comments

Giovanni Esposito Over a year ago

Nono, setVideos is async!!! Your solution it doesn't work at all!!!

prem kulkarni Over a year ago

Yes, I tries doing that but it still returns an empty array! :(

Yousaf Over a year ago

OP is trying to log the updated state right after calling setVideos which won't work. Using promise chaining inside an async function isn't the problem here.

hgb123 Over a year ago

@premkulkarni did you add the API key for the request?

Stark Jeon Over a year ago

The way I see it it doesn't matter cuz of it working same process

Collectives™ on Stack Overflow

useState react hook does not set the array state

3 Answers 3

1 Comment

TLDR

Answer

Reference

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

TLDR

Answer

Reference

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related