In React, managing state is crucial for building dynamic and interactive user interfaces. The useState hook provides a simple and intuitive way to add state to functional components. Let’s dive into the basics of useState and how to use it effectively.
What is useState?
useState is a hook in React that allows functional components to manage state. It takes an initial state as an argument and returns an array with two elements: the current state value and a function to update that value.
How to use useState
Using useState is easy. Here’s a basic example:
import React, { useState } from 'react';
function ExampleComponent() {
const [state, setState] = useState(initialState);
return (
// JSX code
);
}
You can also add multiple state variables by calling useState multiple times:
function Form() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
return (
<form>
<input value={name} onChange={(e) => setName(e.target.value)} placeholder="Name" />
<input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
</form>
);
}
The useState hook makes it simple to add and manage state in functional React components. By understanding its basic usage, you can make your components more dynamic and interactive.
