React State

How to Access and Modify a Function Component’s State

What Exactly Is the useState() Function?

Syntax of the useState() Hook

Example 1: Call the useState Hook without an initialState argument

Example 2: Call the useState Hook with an initialState argument

Why Does useState() Return an Array?

Example 1: Using bracket notation to access a component’s state

Example 2: Using array destructuring to access a component’s state

How to Update a Component’s State

How to Reset a Component’s States

Example 1: The manual way to reset a component’s states

Example 2: The key prop technique of resetting a component’s states

Important Things to Know About React State

1. Always update state with its setter function

2. A state update takes effect on the next render

3. For multiple state updates, pass an updater function to the setter

Example 1: Using the state variable successively in the ongoing rendering to update a component’s state

Example 2: Using updater functions successively in the ongoing rendering to update a component’s state

4. A state setter replaces state instead of merging it

Example 1: Updating a component’s state without the spread operator

Example 2: Using a spread operator to merge a function component’s states

Example 3: Using spread operator to merge a function component’s state array data types

5. You can call useState() multiple times in a component

6. Each component instance has its own isolated state

7. State is private to the component that declares it

8. A parent component can share state with its children through props

9. In strict mode, React may call your component, initializer, and updater functions twice (development only)

Example 1: Using an impure updater function to update a state

Example 2: Using a pure updater function to update a state

Time to Practice with React State

How Did You Go About Creating Your Login (out) Button?

1. Create a new project directory

2. Install React and ReactDOM

3. Create a components directory

4. Create the root component

5. Create the entry script

6. Create the stylesheet

7. Create the web page

8. Run your application

How Does the React State Hook Work Behind the Scenes?

Initial rendering

Hook calls

Subsequent renderings