Introduction to useState

State is how React components "remember" information between renders. The useState hook is the primary way to add state to function components.

What is State?

State is data that can change over time and causes the component to re-render when it changes:

How useState Works

useState Syntax

The hook returns an array with exactly two elements:

Different Initial Values

State can hold any JavaScript value:

Exercise: State Declaration

Exercise: State Updates

Exercise: Complex State Update

Key Takeaways

1. State persists between renders - Unlike regular variables
2. useState returns an array - [value, setValue]
3. Naming convention - [thing, setThing]
4. Any value type - Numbers, strings, booleans, arrays, objects
5. Never mutate state - Always return new values