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 modify a state with the setter function

2. A set function call affects only the next rendering process

3. For successive state updates, pass a function into your state’s setter method

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 function component’s setter function does not auto-merge a new state into the existing one

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

6. Each component invocation has a completely isolated state

7. State is a private feature of the component declaring it

8. A parent component can share its states with its children

9. A component, initializer, and updater function run twice in strict and development mode

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