Slug: react-hook

Mastering React Hooks A Complete Developer's Guide
2024-01-23
ReactHooksJavaScriptWeb Development
Mastering React Hooks: A Simple Guide
React Hooks make building web apps easier. Let's learn how to use them with clear examples!
What are React Hooks?
Hooks let us use special React features in simple functions. They start with "use" and make our code cleaner and easier to understand.
useState: Managing Data in Components
Think of useState like a box that can hold and update information.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div className="p-4 text-center">
<p className="text-xl mb-4">Count: {count}</p>
<button
onClick={() => setCount(count + 1)}
className="bg-blue-500 text-white px-4 py-2 rounded"
>
Click me!
</button>
</div>
);
}
Real-World Example: User Form
function UserForm() {
const [user, setUser] = useState({
name: '',
email: ''
});
return (
<form className="space-y-4">
<input
type="text"
value={user.name}
onChange={e => setUser({...user, name: e.target.value})}
placeholder="Enter your name"
className="w-full p-2 border rounded"
/>
<input
type="email"
value={user.email}
onChange={e => setUser({...user, email: e.target.value})}
placeholder="Enter your email"
className="w-full p-2 border rounded"
/>
</form>
);
}
useEffect: Doing Things at the Right Time
useEffect helps us perform actions when something changes.
function ProfileCard() {
const [profile, setProfile] = useState(null);
useEffect(() => {
// This runs when the component appears
fetch('https://api.example.com/profile')
.then(res => res.json())
.then(data => setProfile(data));
}, []); // Empty array means run once
return (
<div className="p-4 bg-white rounded shadow">
{profile ? (
<div>
<h2>{profile.name}</h2>
<p>{profile.bio}</p>
</div>
) : (
<p>Loading...</p>
)}
</div>
);
}
useRef: Remembering Things Without Updates
useRef is like a sticky note that remembers information without causing updates.
function AutoFocusInput() {
const inputRef = useRef(null);
useEffect(() => {
// Focus the input when it appears
inputRef.current.focus();
}, []);
return (
<input
ref={inputRef}
type="text"
className="p-2 border rounded"
placeholder="This will focus automatically"
/>
);
}
Tips for Using Hooks
- Always put hooks at the top of your component
- Don't put hooks inside loops or conditions
- Only use hooks in React components or custom hooks
- Keep your components simple and focused
Common Patterns
Loading Data
function DataList() {
const [items, setItems] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch('https://api.example.com/items')
.then(res => res.json())
.then(data => {
setItems(data);
setLoading(false);
});
}, []);
if (loading) return <div>Loading...</div>;
return (
<ul className="space-y-2">
{items.map(item => (
<li key={item.id} className="p-2 bg-gray-100 rounded">
{item.name}
</li>
))}
</ul>
);
}
Happy coding! 🚀