The Project | About Us | Contribute | Donations | License

HOME

The useState hook is one of the most fundamental hooks in React. It allows you to add state to functional components, making them more dynamic and interactive. In this section, we will cover the basics of the useState hook, how to use it, and provide practical examples and exercises to solidify your understanding.

What is the useState Hook?

The useState hook is a function that lets you add state to your functional components. It returns an array with two elements:

The current state value.
A function that lets you update the state.

Syntax

const [state, setState] = useState(initialState);

state: The current state value.
setState: A function to update the state.
initialState: The initial value of the state.

Basic Example

Let's start with a simple example to understand how useState works.

Example: Counter Component

import React, { useState } from 'react';

function Counter() {
  // Declare a state variable named "count" with an initial value of 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

Explanation

Importing useState: We import the useState hook from React.
Declaring State: We declare a state variable count and a function setCount to update it. The initial value of count is set to 0.
Using State: We display the current value of count in a paragraph.
Updating State: We update the state by calling setCount with the new value when the button is clicked.

Practical Exercises

Exercise 1: Toggle Visibility

Create a component that toggles the visibility of a text when a button is clicked.

Solution

import React, { useState } from 'react';

function ToggleText() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? 'Hide' : 'Show'} Text
      </button>
      {isVisible && <p>This is a toggled text!</p>}
    </div>
  );
}

export default ToggleText;

Explanation

State Declaration: We declare a state variable isVisible with an initial value of true.
Button Click: We toggle the value of isVisible when the button is clicked.
Conditional Rendering: We conditionally render the paragraph based on the value of isVisible.

Exercise 2: Input Field

Create a component with an input field that displays the current value of the input below it.

Solution

import React, { useState } from 'react';

function InputField() {
  const [inputValue, setInputValue] = useState('');

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <p>Current Input: {inputValue}</p>
    </div>
  );
}

export default InputField;

Explanation

State Declaration: We declare a state variable inputValue with an initial value of an empty string.
Input Change: We update the state with the current value of the input field using the onChange event.
Displaying State: We display the current value of inputValue in a paragraph.

Common Mistakes and Tips

Common Mistakes

Direct State Mutation: Avoid directly mutating the state. Always use the state updater function.
```
// Incorrect
state = newValue;

// Correct
setState(newValue);
```
State Initialization: Ensure the initial state is correctly set. Incorrect initialization can lead to unexpected behavior.

Tips

Functional Updates: When updating state based on the previous state, use the functional form of the state updater.
```
setState(prevState => prevState + 1);
```
Multiple State Variables: Use multiple useState calls for different state variables instead of a single object state.
```
const [count, setCount] = useState(0);
const [name, setName] = useState('');
```

Conclusion

In this section, we covered the basics of the useState hook, including its syntax, usage, and practical examples. We also provided exercises to help you practice and understand how to use useState in different scenarios. Understanding useState is crucial as it forms the foundation for managing state in functional components. In the next section, we will explore the useEffect hook, which allows you to perform side effects in your components.

useState Hook

What is the useState Hook?

Syntax

Basic Example

Example: Counter Component

Explanation

Practical Exercises

Exercise 1: Toggle Visibility

Solution

Explanation

Exercise 2: Input Field

Solution

Explanation

Common Mistakes and Tips

Common Mistakes

Tips

Conclusion

React Course

Module 1: Introduction to React

Module 2: React Components

Module 3: Working with Events

Module 4: Advanced Component Concepts

Module 5: React Hooks

Module 6: Routing in React

Module 7: State Management

Module 8: Performance Optimization

Module 9: Testing in React

Module 10: Advanced Topics

Module 11: Project: Building a Complete Application