React hooks have revolutionized how we write components in React, making our code more readable, maintainable, and functional. Whether you're a seasoned developer or just starting out, these hooks are essential tools that can significantly improve your projects. In this blog, weβll explore some of the most useful React hooks, along with examples of how to use them effectively.
βοΈ 1. useState - Manage State in Functional Components
What It Does:
useState is the go-to hook for managing state in functional components. It allows you to add state to your components, which can then be updated over time.
Why It's Important:
State management is crucial for creating dynamic, interactive components. useState lets you store and update values that need to change, like form inputs or user interactions.
Example in Practice:
Imagine a simple form where users can type their name. You need to store that name somewhere, and useState provides the perfect solution:
import React, { useState } from 'react';
function NameForm() {
const [name, setName] = useState('');
const handleChange = (event) => {
setName(event.target.value);
};
return (
<div>
<input type="text" value={name} onChange={handleChange} />
<p>Your name is: {name}</p>
</div>
);
}
Here, the useState hook stores the name input, and setName updates it as the user types.
π 2. useEffect - Handle Side Effects
What It Does:
useEffect allows you to perform side effects in your components, such as data fetching, directly interacting with the DOM, or setting up subscriptions.
Why It's Important:
Side effects are essential for making your app dynamic. Without useEffect, your functional components would have no way to perform tasks that aren't purely about rendering.
Example in Practice:
Fetching user data when a component loads is a common task:
import React, { useEffect, useState } from 'react';
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
useEffect(() => {
fetch(`https://api.example.com/user/${userId}`)
.then((response) => response.json())
.then((data) => setUser(data));
return () => console.log('Cleanup if needed');
}, [userId]);
return (
<div>
{user ? <p>User name: {user.name}</p> : <p>Loading...</p>}
</div>
);
}
Here, useEffect fetches data when the component mounts and updates whenever the userId changes.
π 3. useContext - Simplify State Sharing
What It Does:
useContext allows you to access shared state across your components without manually passing props through each level of the component tree.
Why It's Important:
It eliminates the need for prop drilling, making your code cleaner and easier to manage, especially in larger applications.
Example in Practice:
Consider a theme setting that multiple components need to access:
import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
function ThemedButton() {
const theme = useContext(ThemeContext);
return <button className={`btn-${theme}`}>Themed Button</button>;
}
function App() {
return (
<ThemeContext.Provider value="dark">
<ThemedButton />
</ThemeContext.Provider>
);
}
Here, useContext allows the ThemedButton to access the theme directly, without passing it through props.
π 4. useReducer - Manage Complex State
What It Does:
useReducer is used for managing complex state logic by dispatching actions to a reducer function. It offers more control than useState, making it ideal for complex state transitions.
Why It's Important:
When your state logic becomes too complex for useState, useReducer can help you manage it more effectively, particularly when the next state depends on the previous one.
Example in Practice:
Managing a shopping cart with actions like adding or removing items:
import React, { useReducer } from 'react';
const initialState = { cart: [] };
function reducer(state, action) {
switch (action.type) {
case 'add':
return { cart: [...state.cart, action.item] };
case 'remove':
return { cart: state.cart.filter((item) => item.id !== action.id) };
default:
return state;
}
}
function ShoppingCart() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<ul>
{state.cart.map((item) => (
<li key={item.id}>
{item.name}
<button onClick={() => dispatch({ type: 'remove', id: item.id })}>
Remove
</button>
</li>
))}
</ul>
<button
onClick={() =>
dispatch({ type: 'add', item: { id: 1, name: 'New Item' } })
}
>
Add Item
</button>
</div>
);
}
Here, useReducer handles the state transitions for adding and removing items from the cart.
π 5. useMemo - Optimize Performance
What It Does:
useMemo is used to memoize the result of an expensive computation, ensuring that it only recalculates when necessary.
Why It's Important:
In complex or large applications, optimizing performance is critical. useMemo prevents unnecessary recalculations, which can slow down your app.
Example in Practice:
Filtering a list based on a search term:
import React, { useMemo } from 'react';
function FilteredList({ items, filter }) {
const filteredItems = useMemo(() => {
console.log('Filtering items');
return items.filter((item) => item.includes(filter));
}, [items, filter]);
return (
<ul>
{filteredItems.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
Here, useMemo ensures that the filtering only happens when items or filter changes, avoiding unnecessary computations.
π 6. useCallback - Stabilize Function References
What It Does:
useCallback returns a memoized version of a callback function, which helps prevent unnecessary re-renders of components that rely on that function, especially when passing callbacks as props.
Why It's Important:
Stabilizing function references is crucial when passing functions to child components to avoid re-renders that can degrade performance.
Example in Practice:
Preventing a button from re-rendering unnecessarily:
import React, { useState, useCallback } from 'react';
function Button({ onClick }) {
console.log('Button rendered');
return <button onClick={onClick}>Click me</button>;
}
function App() {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount((c) => c + 1);
}, []);
return (
<div>
<p>Count: {count}</p>
<Button onClick={increment} />
</div>
);
}
Here, useCallback ensures that the increment function reference remains stable, so the Button component doesnβt re-render unless it needs to.
𧩠7. useRef - Persist Values and Access DOM Elements
What It Does:
useRef gives you a way to persist values across renders without causing a re-render when the value changes. It also provides access to DOM elements directly.
Why It's Important:
Sometimes, you need to maintain a mutable value or directly interact with a DOM element (like focusing an input field), and useRef is the perfect tool for that.
Example in Practice:
Automatically focusing an input field when a component mounts:
import React, { useRef, useEffect } from 'react';
function FocusInput() {
const inputRef = useRef(null);
useEffect(() => {
inputRef.current.focus();
}, []);
return <input ref={inputRef} type="text" />;
}
Here, useRef is used to focus the input field automatically when the component mounts, providing a better user experience.
Conclusion
These React hooks can be game-changers for your next project, making your code cleaner, more efficient, and easier to manage. By understanding when and how to use these hooks, you can take full advantage of Reactβs capabilities and build better, more performant applications.
Top comments (11)
It is not a blog and doesn't bring anything new to the table.
It is for those who don't know , if you know that's good
I understand that this might be redundant for seniors/experts but it really helps early-stage developers like me to revise what they have been learning.
Thank you for the revision @vyan ! Also adding snippets on latest hooks such as useQuery would be a good update.
Yeah Sure
Nothing new. Post bout useQuery with server actions would be more helpful.
I will
The title is a click bait ππ
Uh... I don't know about most useful. Or even being useful for early stage devs since these are basically the fundamental hooks one needs to know about when learning react.
But I could offer an addition to the list perhaps.
I find
useStateand using two variables to get and set state to be a bit cumbersome, and the moment I need to do more it's... well, more code.useEasyStatein this blog post is kinda cool. (Disclaimer: I'm associated with the team that made this)Why It's Time to Ditch useState and Upgrade to useEasyState!
shivam singh for Middleware γ» Aug 29
Half of these.hooks will vanish soon with React 19..Thank God! Like useMemo and useCallback and useEffect! These three hooks are so stupid.
Nice!
Nothing new
Some comments have been hidden by the post's author - find out more