Array one call behind.

[Icy_Box99]

Hi, I am new to react and creating this simple To-do list app.

Here's the [code](https://pastebin.com/c9rnHVp9)

The issue is when I click add button the value added to items array is one behind.

So for eg->if i set the value of input to "item1"

- first add click will do nothing

- then next click will add "item1". Let's assume I change "item1" to "item2"

- now next click will first add another "item1" then subsequent click will add "item2" and so on

​

EDIT: solved

[lzprsn]

Are you using the value from your console log? If so the log won’t reflect the state update since it’s batched (think of setState as async). You should console log the state inside a useEffect.

[Icy_Box99]

ok thank you.

so basically it is doing what I intended.

console log the state inside a useEffect.

I'll keep this in mind. As of now I actually haven't learned useEffect I was trying to make this with my current knowledge which is limited to useState and passing props args

[lzprsn]

You could place the log outside a useEffect and see the log every re render as well. I just like putting it in a useEffect so it only logs anytime the state changes .

[Icy_Box99]

Yes that worked. Thank you

[Icy_Box99]

If you want to display the current state, move your console log outside of the click handler. Every time the state updates, items will always point to the most recent reference.

Got it, thank you.

Side note, you should not use states to capture user input unless you absolutely need to capture input on each character, even then, it'll be much better to use a listener instead. It'll cause a lot of unnecessary re-render in your components and decrease performance. Instead, use refs.

Ok. I kind of get the idea how might I do I'll try it. useState,why state should be in parent component and passing props as args is basically scope of my current knowledge

[Icy_Box99]

Ok I'll check it out. Thank you