Introduction
React has transformed web development with its component-based architecture, and React Hooks have made it even more powerful. Introduced in React 16.8, Hooks allow developers to use state, lifecycle methods, and other features in functional components — without writing a single class component.
In this blog, we’ll cover what React Hooks are, provide a complete list of built-in Hooks with examples, and show how to use them in real-world applications. We’ll also touch on custom Hooks, best practices, and how Hooks fit into modern React development.
Whether you are a beginner or an experienced developer, this guide will help you master Hooks in your projects.
What Are React Hooks?
React Hooks are functions that let you “hook into” React features like state, lifecycle, context, and more from functional components.
Before Hooks, these features were only available in class components, making code more complex and harder to reuse. Hooks simplify the process, making functional components powerful, reusable, and easy to maintain.
Advantages of React Hooks:
- Simplifies state management and lifecycle logic.
- Encourages code reuse with custom Hooks.
- Makes components more readable and maintainable.
- Compatible with modern React features like Concurrent Mode and Suspense.
Categories of React Hooks
React Hooks can be categorized as:
- Basic Hooks
- Additional Hooks
- Custom Hooks
We’ll cover all the built-in Hooks with practical examples.
Complete List of React Hooks With Examples
Here’s a practical guide to the most commonly used React Hooks:
1. useState
The useState Hook lets you add state to a functional component.
import React, { useState } from ‘react’;
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
Use Case: Managing simple state like counters, input fields, toggles, etc.
2. useEffect
useEffect performs side effects in functional components, such as fetching data, subscribing to events, or manually changing the DOM.
import React, { useState, useEffect } from ‘react’;
function DataFetcher() {
const [data, setData] = useState([]);
useEffect(() => {
fetch(‘https://api.example.com/items’)
.then(res => res.json())
.then(data => setData(data));
}, []); // Empty dependency array = runs once
return (
<ul>
{data.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
);
}
Pro Tip: Check out our guide on Tips to Performance Optimization In React App to make your useEffect calls more efficient.
3. useContext
useContext lets you access React context easily without nesting multiple <Context.Consumer> components.
import React, { useContext } from ‘react’;
import { ThemeContext } from ‘./ThemeContext’;
function ThemedButton() {
const theme = useContext(ThemeContext);
return <button style={{ background: theme.background }}>Click Me</button>;
}
Use Case: Global state management, theming, or user authentication contexts.
4. useRef
useRef creates a mutable object that persists for the lifetime of the component. It’s commonly used to access DOM elements or store mutable values without triggering re-renders.
import React, { useRef } from ‘react’;
function FocusInput() {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<>
<input ref={inputRef} type=”text” />
<button onClick={focusInput}>Focus Input</button>
</>
);
}
Use Case: DOM access, animation control, or persisting previous values.
5. useReducer
useReducer is a more powerful alternative to useState for complex state logic.
import React, { useReducer } from ‘react’;
const initialState = { count: 0 };
function reducer(state, action) {
switch(action.type) {
case ‘increment’:
return { count: state.count + 1 };
case ‘decrement’:
return { count: state.count – 1 };
default:
return state;
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: ‘increment’ })}>+</button>
<button onClick={() => dispatch({ type: ‘decrement’ })}>-</button>
</div>
);
}
Use Case: Complex state in large apps, multi-step forms, or business logic.
6. Additional Built-in Hooks
| Hook | Purpose |
|---|---|
| useMemo | Memoizes expensive computations. |
| useCallback | Memoizes functions to prevent unnecessary re-renders. |
| useLayoutEffect | Similar to useEffect, but fires synchronously after all DOM mutations. |
| useImperativeHandle | Customizes the instance value that is exposed when using ref. |
| useDebugValue | Displays debug info in React DevTools. |
Tip: Combining useMemo and useCallback can significantly improve your app performance.
7. Custom Hooks
Custom Hooks allow you to extract reusable logic. They always start with use and can contain other Hooks.
import { useState, useEffect } from ‘react’;
function useFetch(url) {
const [data, setData] = useState([]);
useEffect(() => {
fetch(url)
.then(res => res.json())
.then(setData);
}, [url]);
return data;
}
Use Case: API fetching, form handling, or authentication logic can be abstracted using custom Hooks.
Real-World Examples of React Hooks
- Fetching API Data with useEffect & useState
- Form handling with useReducer
- Authentication token management using custom Hook
- Theme switching using useContext
Developers looking for ReactJS Development Services can implement these patterns in projects efficiently. If you want expert guidance, a [ReactJS Development Company like GrapesTech Solutions] can help.
Best Practices for Using React Hooks
- Follow the Rules of Hooks: Always call Hooks at the top level of a function. Don’t call them inside loops, conditions, or nested functions.
- Use Custom Hooks for Reusable Logic: Reduce code duplication and keep components clean.
- Combine useMemo & useCallback for Performance: Prevent unnecessary re-renders in large apps.
- Keep Side Effects in useEffect: Avoid putting complex logic in render.
- Use Context Wisely: Don’t overuse context; it can cause re-renders for all consumers.
Hooks in Modern React Trends
Hooks are now central to ReactJS Development Trends in 2025:
- Replacing class components for clean architecture.
- Combined with Context API for state management without Redux.
- Integrated into frameworks like Next.js for server-side rendering.
Last Words
React Hooks have transformed React development by enabling cleaner, reusable, and more maintainable functional components. From useState to useReducer, Hooks allow developers to write modern, optimized React code.
If you want to build scalable applications or need expert guidance on React projects, consider working with a trusted ReactJS Development Company like GrapesTech Solutions.
