How to Use React Hooks

React Hooks revolutionized the way developers write functional components in React. Introduced in React 16.8, Hooks allow developers to use state and other React features without writing class components. This shift simplified code structure, improved reusability, and enhanced developer experience across the React ecosystem. Before Hooks, managing state and side effects required complex class-based patterns with lifecycle methods, making code harder to read, test, and maintain. With Hooks, developers can now encapsulate logic into reusable, composable functions that work seamlessly within functional components.

Today, React Hooks are the industry standard. Whether you're building a small UI component or a large-scale enterprise application, understanding how to use React Hooks effectively is essential. This guide provides a comprehensive, step-by-step walkthrough of React Hooksfrom the basics to advanced patternsalong with best practices, real-world examples, and essential tools to help you master them.

Step-by-Step Guide

Understanding the Core Hooks: useState and useEffect

The two most fundamental React Hooks are useState and useEffect. These Hooks form the foundation for managing state and side effects in functional components.

To begin, import these Hooks from the React library:

javascript

import React, { useState, useEffect } from 'react';

useState allows you to add state to functional components. It returns an array with two elements: the current state value and a function to update it.

Example:

javascript

function Counter() {

const [count, setCount] = useState(0);

return (

);

}

In this example, count is the state variable initialized to 0, and setCount is the function used to update it. Every time the button is clicked, setCount triggers a re-render with the new value.

useEffect handles side effects such as data fetching, subscriptions, or manually changing the DOM. It runs after every render by default, but you can control when it runs by providing a dependency array.

Example: Fetching data on component mount

javascript

function UserList() {

const [users, setUsers] = useState([]);

useEffect(() => {

fetch('https://jsonplaceholder.typicode.com/users')

.then(response => response.json())

.then(data => setUsers(data));

}, []); // Empty dependency array means this runs only once, on mount

return (

{users.map(user => (

• {user.name}

))}

);

}

The empty dependency array [] ensures the effect runs only once, similar to componentDidMount in class components. If you omit the dependency array, the effect runs after every render. If you include specific variables, the effect runs only when those variables change.

Using Other Built-in Hooks

Beyond useState and useEffect, React provides several other built-in Hooks that solve common problems.

useContext

useContext allows you to access React context without wrapping components in a Context.Consumer component. Its ideal for avoiding prop drilling in deeply nested component trees.

First, create a context:

javascript

const ThemeContext = React.createContext('light');

Then provide a value:

javascript

function App() {

return (

);

}

Now consume it in any child component:

javascript

function Toolbar() {

const theme = useContext(ThemeContext);

return (

);

}

Using useContext eliminates the need for multiple layers of Context.Consumer and makes the code cleaner and more readable.

useReducer

useReducer is an alternative to useState for managing complex state logic, especially when state transitions involve multiple sub-values or when the next state depends on the previous one.

It accepts a reducer function and an initial state, and returns the current state paired with a dispatch method.

Example: Managing a counter with actions

javascript

function reducer(state, action) {

switch (action.type) {

case 'increment':

return { count: state.count + 1 };

case 'decrement':

return { count: state.count - 1 };

case 'reset':

return { count: 0 };

default:

throw new Error();

}

}

function Counter() {

const [state, dispatch] = useReducer(reducer, { count: 0 });

return (

);

}

useReducer is particularly useful when state logic becomes complex or when you want to separate state logic from component rendering.

useCallback and useMemo

useCallback memoizes a function, preventing unnecessary re-creations on every render. This is useful when passing callbacks to optimized child components that rely on reference equality to prevent re-renders.

useMemo memoizes a computed value, avoiding expensive calculations on every render.

Example:

javascript

function ExpensiveComponent({ list, filter }) {

const filteredList = useMemo(() => {

return list.filter(item => item.name.includes(filter));

}, [list, filter]);

const handleItemClick = useCallback((id) => {

console.log(Item ${id} clicked);

}, []);

return (

);

}

Without useCallback, handleItemClick would be recreated on every render, potentially causing child components to re-render unnecessarily. useMemo ensures the filtered list is only recalculated when list or filter changes.

useRef

useRef creates a mutable reference object whose .current property is initialized to the passed argument. It persists across re-renders and is commonly used to access DOM elements directly or store mutable values that dont trigger re-renders.

Example: Focusing an input on mount

javascript

function TextInputWithFocusButton() {

const inputEl = useRef(null);

const onButtonClick = () => {

inputEl.current.focus();

};

return (

Focus the input

>

);

}

Unlike state, updating ref.current does not trigger a re-render, making it ideal for storing timers, intervals, or previous values.

useLayoutEffect

useLayoutEffect is similar to useEffect, but it fires synchronously after all DOM mutations. Use it when you need to read layout from the DOM and synchronously re-render.

Example: Measuring element dimensions before paint

javascript

function MeasureExample() {

const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

useLayoutEffect(() => {

const updateDimensions = () => {

setDimensions({

width: window.innerWidth,

height: window.innerHeight

});

};

window.addEventListener('resize', updateDimensions);

updateDimensions();

return () => window.removeEventListener('resize', updateDimensions);

}, []);

return (

Window size: {dimensions.width} x {dimensions.height}

);

}

Use useLayoutEffect sparinglyit can block visual updatesonly when necessary to prevent visual flickering.

Creating Custom Hooks

One of the most powerful features of React Hooks is the ability to create custom Hooks. A custom Hook is a JavaScript function whose name starts with use and that may call other Hooks.

Custom Hooks let you extract component logic into reusable functions. They dont reuse state or side effectsthey reuse logic.

Example: Custom Hook for Fetching Data

javascript

function useFetch(url) {

const [data, setData] = useState(null);

const [loading, setLoading] = useState(true);

const [error, setError] = useState(null);

useEffect(() => {

fetch(url)

.then(response => {

if (!response.ok) {

throw new Error('Network response was not ok');

}

return response.json();

})

.then(setData)

.catch(setError)

.finally(() => setLoading(false));

}, [url]);

return { data, loading, error };

}

Now use it in any component:

javascript

function UserList() {

const { data: users, loading, error } = useFetch('https://jsonplaceholder.typicode.com/users'); if (loading) return

Loading...; if (error) return

Error: {error.message};

return (

{users.map(user => (

• {user.name}

))}

);

}

This pattern promotes code reusability and testability. You can now use useFetch across your entire application without duplicating logic.

Combining Hooks for Complex Logic

React Hooks are designed to be composed. You can combine multiple Hooks to handle complex scenarios.

Example: A form handler with validation and submission

javascript

function useForm(initialValues, validate) {

const [values, setValues] = useState(initialValues);

const [errors, setErrors] = useState({});

const [isSubmitting, setIsSubmitting] = useState(false);

const handleChange = (e) => {

const { name, value } = e.target;

setValues({

...values,

[name]: value

});

};

const handleSubmit = (e) => {

e.preventDefault();

setErrors(validate(values));

setIsSubmitting(true);

};

useEffect(() => {

if (Object.keys(errors).length === 0 && isSubmitting) {

// Submit form logic here

console.log('Submitting:', values);

setIsSubmitting(false);

}

}, [errors, isSubmitting, values]);

return {

values,

errors,

isSubmitting,

handleChange,

handleSubmit

};

}

Use it in a component:

javascript

function LoginForm() {

const validate = (values) => {

const errors = {};

if (!values.email) errors.email = 'Email is required';

if (!values.password) errors.password = 'Password is required';

return errors;

};

const { values, errors, isSubmitting, handleChange, handleSubmit } = useForm(

{ email: '', password: '' },

validate

);

return (

);

}

This approach keeps your component clean and separates concerns effectively.

Best Practices

Follow the Rules of Hooks

React enforces two strict rules for using Hooks:

1. Only call Hooks at the top level Dont call Hooks inside loops, conditions, or nested functions.
2. Only call Hooks from React functional components or custom Hooks Never call them from regular JavaScript functions.

Violating these rules breaks the order of Hooks and leads to unpredictable behavior. React relies on the order of Hook calls to maintain state correctly between renders.

? Correct:

javascript

function MyComponent() {

const [count, setCount] = useState(0);

const [name, setName] = useState('');

useEffect(() => {

document.title = You clicked ${count} times;

}, [count]);

return

}

? Incorrect:

javascript

function MyComponent({ shouldRender }) {

if (shouldRender) {

const [count, setCount] = useState(0); // ? Conditional Hook call

}

return

}

Reacts ESLint plugin eslint-plugin-react-hooks automatically detects violations of these rules. Install it to catch errors early in development.

Keep Hooks Lightweight and Focused

Custom Hooks should have a single responsibility. Avoid creating monolithic Hooks that handle too many concerns. Instead, break them into smaller, composable units.

Example: Instead of one useUserData Hook that fetches profile, posts, and settings, create:

• useUserProfile()
• useUserPosts()
• useUserSettings()

This improves testability, reusability, and maintainability.

Use Dependency Arrays Wisely

Always provide accurate dependency arrays to useEffect, useCallback, and useMemo. Missing dependencies can cause stale closures, while including unnecessary ones can trigger excessive re-renders.

Use the exhaustive-deps ESLint rule to help identify missing dependencies.

When a dependency changes frequently and you dont want to re-run the effect, consider using useRef to store mutable values:

javascript

function MyComponent() {

const [count, setCount] = useState(0);

const countRef = useRef(count);

useEffect(() => {

countRef.current = count; // Update ref on change

});

useEffect(() => {

const timer = setInterval(() => {

console.log('Count:', countRef.current); // Always current value

}, 1000);

return () => clearInterval(timer);

}, []); // No dependency array needed

return setCount(c => c + 1)}>Count: {count};

}

Avoid State in Props When Possible

Instead of passing state down through multiple layers, use context or state management libraries (like Zustand or Jotai) for global state. Overusing props for state sharing leads to prop drilling and brittle component hierarchies.

Use TypeScript for Type Safety

React Hooks work seamlessly with TypeScript. Define types for state, actions, and custom Hooks to catch errors at compile time.

Example:

typescript

interface User {

id: number;

name: string;

email: string;

}

function useUsers(): { data: User[] | null; loading: boolean; error: string | null } {

const [data, setData] = useState(null);

const [loading, setLoading] = useState(true);

const [error, setError] = useState(null);

useEffect(() => {

fetch('/api/users')

.then(res => res.json())

.then(setData)

.catch(setError)

.finally(() => setLoading(false));

}, []);

return { data, loading, error };

}

TypeScript prevents runtime errors and improves developer experience with autocomplete and documentation.

Test Custom Hooks

Custom Hooks are pure logic and should be tested independently. Use @testing-library/react-hooks to test them in isolation.

Example:

javascript

import { renderHook, act } from '@testing-library/react-hooks';

import { useCounter } from './useCounter';

test('useCounter increments correctly', () => {

const { result } = renderHook(() => useCounter());

act(() => {

result.current.increment();

});

expect(result.current.count).toBe(1);

});

Testing Hooks ensures your logic is robust and reduces bugs in production.

Tools and Resources

Development Tools

• React Developer Tools Browser extension for Chrome and Firefox that allows you to inspect component trees, state, and Hooks in real time.
• ESLint with react-hooks plugin Enforces the Rules of Hooks and detects common mistakes.
• TypeScript Adds static typing to React applications, improving code quality and maintainability.
• React Query A powerful library for server state management that replaces manual useEffect data fetching with optimized caching, background updates, and pagination.
• Zustand A lightweight, fast, and scalable state management solution that uses Hooks and avoids boilerplate.
• Jotai An atomic state management library built on React Hooks for fine-grained reactivity.

Learning Resources

• React Official Documentation The most authoritative source for learning Hooks: https://react.dev/learn
• React Hooks FAQ Answers to common questions and misconceptions: https://react.dev/learn/reference/react/hooks
• Frontend Masters React Hooks Course In-depth video tutorials by Dan Abramov and other React experts.
• YouTube: The Net Ninja React Hooks Tutorial Beginner-friendly, practical walkthroughs.
• Dev.to and Medium Community-driven articles on advanced Hook patterns and real-world use cases.

Code Examples and Templates

• CodeSandbox Instantly create and share React projects with Hooks pre-configured.
• GitHub: react-hooks-examples Open-source repositories with dozens of Hook implementations.
• React Patterns A curated collection of reusable component and Hook patterns: https://reactpatterns.com/

Real Examples

Example 1: Real-Time Search with Debouncing

Many applications require search functionality that waits for the user to stop typing before making a request. This prevents excessive API calls.

Using useCallback and useEffect:

javascript

function useDebounce(value, delay) {

const [debouncedValue, setDebouncedValue] = useState(value);

useEffect(() => {

const handler = setTimeout(() => {

setDebouncedValue(value);

}, delay);

return () => {

clearTimeout(handler);

};

}, [value, delay]);

return debouncedValue;

}

function SearchBox() {

const [searchTerm, setSearchTerm] = useState('');

const debouncedSearchTerm = useDebounce(searchTerm, 500);

const [results, setResults] = useState([]);

useEffect(() => {

if (debouncedSearchTerm) {

fetch(/api/search?q=${debouncedSearchTerm})

.then(res => res.json())

.then(setResults);

}

}, [debouncedSearchTerm]);

return (

);

}

Example 2: Dark Mode Toggle with Local Storage Persistence

Preserve user preferences across sessions using useEffect and localStorage.

javascript

function useDarkMode() {

const [isDarkMode, setIsDarkMode] = useState(() => {

const saved = localStorage.getItem('darkMode');

return saved ? JSON.parse(saved) : false;

});

useEffect(() => {

localStorage.setItem('darkMode', JSON.stringify(isDarkMode));

if (isDarkMode) {

document.documentElement.classList.add('dark');

} else {

document.documentElement.classList.remove('dark');

}

}, [isDarkMode]);

return [isDarkMode, setIsDarkMode];

}

function ThemeToggle() {

const [isDarkMode, setIsDarkMode] = useDarkMode();

return (

setIsDarkMode(!isDarkMode)}>

{isDarkMode ? 'Light Mode' : 'Dark Mode'}

);

}

Example 3: Form Validation with Custom Hook

Reusable validation logic for multiple forms:

javascript

function useFormValidation(initialValues, validationSchema) {

const [values, setValues] = useState(initialValues);

const [errors, setErrors] = useState({});

const validate = () => {

const newErrors = {};

Object.keys(validationSchema).forEach(key => {

const error = validationSchema[key](values[key]);

if (error) newErrors[key] = error;

});

setErrors(newErrors);

return Object.keys(newErrors).length === 0;

};

const handleChange = (e) => {

const { name, value } = e.target;

setValues({

...values,

[name]: value

});

};

return {

values,

errors,

handleChange,

validate

};

}

// Usage

const validationSchema = {

email: (value) => !value.includes('@') ? 'Invalid email' : null,

password: (value) => value.length

};

const { values, errors, handleChange, validate } = useFormValidation(

{ email: '', password: '' },

validationSchema

);

Example 4: Real-Time Clock with Cleanup

Use useEffect to set and clear a timer.

javascript

function Clock() {

const [time, setTime] = useState(new Date());

useEffect(() => {

const timer = setInterval(() => {

setTime(new Date());

}, 1000);

return () => clearInterval(timer); // Cleanup on unmount

}, []); return

{time.toLocaleTimeString()};

}

This example demonstrates the importance of cleanup functions to prevent memory leaks.

FAQs

Can I use Hooks in class components?

No. Hooks are only available in functional components. However, you can convert class components to functional components using Hooks, which is the recommended approach.

Do Hooks replace Redux?

Not entirely. While Hooks like useContext and libraries like Zustand or Jotai can replace Redux for many use cases, Redux still offers advanced features like middleware, time-travel debugging, and DevTools integration. Use the right tool for the complexity of your state management needs.

Why does my Hook not update when I expect it to?

This is often due to stale closures or incorrect dependency arrays. Always check if your dependencies are properly listed and whether youre mutating state directly instead of using setters. Use React DevTools to inspect component state and props.

Are Hooks slower than class components?

No. React Hooks are optimized and perform similarly to class components. In fact, they often reduce bundle size and improve rendering performance by reducing component nesting and enabling better code splitting.

Can I use multiple useState calls in one component?

Yes. In fact, its encouraged. Instead of managing one large state object, use separate useState calls for independent pieces of state. This improves readability and maintainability.

What happens if I forget the dependency array in useEffect?

If you omit the dependency array, the effect runs after every render. This can cause performance issues or infinite loops if the effect triggers a state update. Always provide a dependency array unless you specifically need the effect to run on every render.

Can I call a Hook inside a conditional?

No. Hooks must be called at the top level of a functional component or custom Hook. React relies on the order of Hook calls to maintain state. Conditional calls break this order and lead to unpredictable behavior.

How do I share state between components without props?

Use React Context for global state, or state management libraries like Zustand, Jotai, or Redux Toolkit. Context is ideal for theme, authentication, or language preferences.

Conclusion

React Hooks have transformed the way developers build user interfaces. By enabling state and side effects in functional components, theyve simplified code, improved reusability, and enhanced developer productivity. From the foundational useState and useEffect to advanced patterns like custom Hooks and state management with Zustand, mastering Hooks is essential for modern React development.

This guide provided a comprehensive, step-by-step approach to using React Hooks effectively. Youve learned how to manage state, handle side effects, create reusable logic, and follow best practices that ensure clean, maintainable, and scalable code. Youve also explored real-world examples and essential tools to accelerate your workflow.

As React continues to evolve, Hooks remain at the core of its philosophy: simplicity, composition, and developer experience. Whether youre just starting with React or looking to refine your skills, investing time in mastering Hooks will pay dividends across every project you build.

Start smallconvert one class component to a functional component using Hooks. Then build a custom Hook for a common task. Gradually, youll find that Hooks make your code more intuitive, testable, and enjoyable to work with. The future of React is functionaland Hooks are the key to unlocking it.