This is the first part of a series exploring React Hooks in depth. In this post, we’ll cover the two most fundamental hooks: useState and useEffect.
The useState hook allows you to add state to functional components:
TypeScriptWhat did you think?
Sign in to react.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}The useEffect hook lets you perform side effects in functional components:
TypeScriptimport { useEffect, useState } from 'react';
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
useEffect(() => {
fetch(`/api/users/${userId}`)
.then(res => res.json())
.then(data => setUser(data));
}, [userId]); // Dependency array
if (!user) return <div>Loading...</div>;
return <div>{user.name}</div>;
}[]: Run once on mountIn Part 2, we’ll explore useContext, useReducer, and custom hooks. Stay tuned!
Web Development
Understanding the fundamentals of React Hooks, starting with useState and useEffect