What is state in React?

We write components in React, A LOT of components, and many times we want them to undergo visual changes as a result of user or computer interactions. For this purpose, a component needs to “remember” things about itself. This is where state comes in. State is a component’s memory.
Any exciting application you build is likely to change over the time the user is exploring it.

The changes could be as basic as toggling a drop down menu or as complex as fetching data from an API.

React provides primitives to manipulate the state of your apps, more specifically components, to make them dynamic. In this lesson, we will learn how to use state in React.

In React, state is a built-in object that allows components to create and manage their own data.

It is an essential concept for building dynamic and interactive user interfaces, enabling components to keep track of information that may change over time and re-render in response to these changes.

Key Characteristics of State

1. Mutable:
   Unlike props, which are read-only, state is mutable and can be changed.
   Changes to state trigger re-renders of the component to reflect the new state.

2. Private:
   State is local to the component and cannot be directly accessed or modified by other components.
   It is intended to encapsulate data that is specific to the component’s functionality.

3. Managed Internally:
   State is managed within the component itself, often initialized in the constructor (for class components) or using hooks (for functional components).

Understanding the useState Hook in React

The useState hook is a fundamental hook in React that allows functional components to manage state. It is used to add state variables to functional components, enabling them to handle dynamic data and trigger re-renders when the state changes.

Syntax and Usage

The useState hook is called inside a functional component and returns an array with two elements:

• > State Variable: The current value of the state.
• > State Setter Function: A function that updates the state and triggers a re-render.

Here is the syntax for using the useState hook:

stateValue: This is the current state value.
setStateValue: This is the function used to update the state.
initialValue: This is the initial value of the state, which can be any type (string, number, array, object, etc.)

Example: Counter Component

In this example:

const [count, setCount] = useState(0); initializes a state variable count with an initial value of 0.
setCount is used to update the count state when the button is clicked.

Best Practices of the useState

1. Initialize State with Proper Default Values:

• Ensure you initialize state with meaningful default values to avoid issues during rendering.

1. Avoid Complex State Logic:

• If a state variable requires complex logic or computations to update, consider using the useReducer hook instead of useState.

1. Use Functions for State Updates Based on Previous State:

• When updating state based on the previous state value, pass a function to the state setter to ensure you get the latest state.

setCount(prevCount => prevCount + 1);

1. Keep State Local and Manageable:

• Try to keep state management as local as possible within components. For global state management, consider using state management libraries like Redux or Context API.

The useState hook is a powerful and essential tool for managing state in React functional components. By understanding and utilizing useState effectively, you can create dynamic and interactive components that respond to user input and changing data.

Knowledge check

The following questions are an opportunity to reflect on key topics in this lesson.

What is state?
What is the useState hook and how would you use it?
What happens to a component when one of its states is changed?
What are some of the rules of hooks?