useState Hook

The useState hook is a fundamental React hook that allows functional components to have a state. It provides a way to declare and update state variables within a component.

Syntax:

To use the useState hook, we call it and pass in the initial state (initialState) as an argument. It returns an array with two elements: the current state value (state) and a function (setState) to update the state.

• We can choose any word as the name for a state variable. It is recommended to use a variable name that accurately describes what state is being stored or updated, such as inputValue, page, number, name, and so on;

• Similarly, when using the setState function, we have flexibility in choosing the function name. However, following a specific pattern is a standard convention: the setState function name should start with "set" followed by the name of the corresponding state variable. For example, if the state variable is mail, the corresponding setState function would typically be named setMail.

Note

When we call setState, React re-renders the component and updates the state with the new value. It's important to note that when using useState, the state variable does not need to be an object. It can be a primitive value (like a number, string, or boolean) or a complex value (like an array or object).

Example 1:

Let's build the Counter component, which will maintain its own state. When the Increment button is clicked, we will update the state and trigger a re-render of the component.

In this example, the useState hook is used to declare a state variable count with an initial value of 0. The setCount function is used to update the count variable whenever the button is clicked.

Line by line explanation:

• Line 1: We import the useState hook from the React library to utilize its functionality;
• Line 3: We define the Counter component using the conventional function syntax;
• Line 4: We initialize the state using the useState hook;
  1. count represents the value of the counter. Its initial value is 0, specified within the parentheses of useState(0);
  2. setCount is the function that updates the state when needed.
• Lines 6-8: This JavaScript arrow function handles the logic for updating the state. It is executed when the "increment" button is clicked. Inside the function, we use the setCount function to update the state;
• Lines 10-15: renders the component's markup. On line 12, the current state value (count) is displayed. The button on line 13 utilizes the onClick attribute to define the function to execute when clicked. In this case, we pass the increment function.

Full app code:

Example 2:

Let's construct the Form component with its independent state. We prompt the user to enter their name in the input field, and depending on their input, we will modify the displayed content.

In this example, the useState hook is used to declare a state variable userName with an initial value of an empty string. The setUserName function updates the userName variable whenever we need to do it.

Line by line explanation:

• Line 1: We import the useState hook from the React library to use its functionality;
• Line 3: We define the Form component using the standard function syntax;
• Line 4: We set the initial state using the useState hook;
  1. userName represents the value of the input field, initially set as an empty string (""), specified within the parentheses of useState("");
  2. setUserName is the function that allows us to update the state when needed.
• Lines 6-9: This JavaScript arrow function handles the logic for updating the state. It is triggered when a user types something in the field. We retrieve the input value within the function using event.target.value. We then utilize the setUserName function to update the state with the value from the input field;
• Lines 11-21: The component's markup is rendered.
  1. On line 15, we assign the userName as the initial value for the input using the value attribute;
  2. On line 16, we use the onChange attribute to specify the function to be called when there is a change in the input.

Full app code: