In React, useState and useEffect are two essential hooks used for managing state and side effects in functional components.
useState:
Use case: useState allows you to add state to a functional component. It returns a pair of values: the current state and a function to update that state.
Example:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}
In this example, useState(0) initializes the count state to 0. The setCount function is used to update the count state when the button is clicked.
useEffect:
Use case: useEffect allows you to perform side effects in functional components, such as fetching data, subscribing to events, or updating the document title.
Example:
import React, { useEffect, useState } from 'react';
function UserProfile() {
const [user, setUser] = useState(null);
useEffect(() => {
// Fetch user data from an API
fetch('https://api.example.com/user')
.then((response) => response.json())
.then((data) => setUser(data));
}, []);
return (
<div>
{user ? (
<div>
<h2>{user.name}</h2>
<p>Email: {user.email}</p>
</div>
) : (
<p>Loading user profile...</p>
)}
</div>
);
}
In this example, useEffect is used to fetch user data from an API when the component mounts (empty dependency array []). The retrieved data is stored in the user state using setUser, and the component renders the user's name and email when the data is available.
These are just a few basic use cases for useState and useEffect. They are powerful hooks that allow you to handle state and side effects in a declarative way, enabling you to build dynamic and interactive React applications.
Top comments (0)