1. useReducer
Introduction and Comparison with useState
In React, managing state is crucial for the functionality of your components. While useState is a familiar hook that serves as the starting point for state management, useReducer offers a more scalable alternative for handling complex state logic. Unlike useState, which is best for simple state updates, useReducer helps in managing state that involves multiple sub-values or when the next state depends on the previous one. It takes a reducer function and an initial state to return the current state and a dispatch method. This approach is reminiscent of Redux, making it easier for developers transitioning from Redux to React Hooks.
Use Cases and Examples
useReducer is particularly useful in scenarios where state logic is complex or when dealing with multiple state transitions. For instance, in a shopping cart component where you have to handle additions, removals, and updates to items, useReducer can simplify state management by centralizing the logic.
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:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
</>
);
}
This example showcases how useReducer can make handling multiple related state actions more organized and readable.
2. useCallback
Preventing Unnecessary Re-renders
React’s re-rendering mechanism can sometimes lead to performance issues, especially in components with complex state logic or deep component trees. The useCallback hook helps optimize performance by memoizing callback functions. This means that the function is not recreated on every render unless its dependencies change. It’s particularly useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders.
How and When to Use It
useCallback is best used in situations where a component is re-rendering frequently and you pass a callback to a child component that might benefit from memoization. For example, if you have a list component that renders many items, and each item has a button with an event handler, using useCallback can prevent these buttons from re-rendering unless necessary.
import React, { useCallback, useState } from 'react';
function List({ items }) {
const [clickedId, setClickedId] = useState(null);
const handleClick = useCallback((id) => {
setClickedId(id);
}, []); // Dependencies array is empty, meaning this callback is created once
return (
<ul>
{items.map(item => (
<li key={item.id}>
<button onClick={() => handleClick(item.id)}>
{item.text}
</button>
</li>
))}
</ul>
);
}
In this example, handleClick is memoized with useCallback, ensuring that the function doesn’t get recreated unless its dependencies change (in this case, there are no dependencies, so it’s created just once). This can lead to performance improvements in larger applications.
3. useMemo
Optimizing Computation-heavy Operations
In React, rendering components can sometimes involve costly calculations that you don’t want to run on every render. The useMemo hook allows you to memoize expensive functions so their results are cached until their dependencies change. This optimization technique prevents unnecessary computations on re-renders, improving performance in compute-intensive scenarios.
Example Scenarios
useMemo is particularly useful when you have operations in your component that are expensive to run and don’t need to be recalculated with every render. A common scenario is filtering or sorting a large list of items based on user input.
Consider a component that displays a list of items filtered based on a user’s input. Without useMemo, the filtering operation would run on every render, which could lead to performance issues with a large dataset.
import React, { useMemo, useState } from 'react';
function FilteredList({ items }) {
const [filter, setFilter] = useState('');
const filteredItems = useMemo(() => {
return items.filter(item => item.includes(filter));
}, [items, filter]); // Dependencies array: Recompute when `items` or `filter` changes
return (
<>
<input
type="text"
value={filter}
onChange={e => setFilter(e.target.value)}
/>
<ul>
{filteredItems.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</>
);
}
In this example, useMemo ensures that the filtering operation is only executed when items or filter changes, not on every render. This can significantly improve performance, especially with large datasets or complex filtering logic.
4. useRef
Managing Focus, Selection, and Media Playback
The useRef hook is a versatile tool in React that can be used for various purposes, including managing focus, selection, and controlling media playback. Unlike state variables, updates to refs do not trigger re-renders, making them ideal for accessing DOM elements directly and persisting values across renders without causing additional rendering cycles.
Persisting Values Across Re-renders
One of the primary uses of useRef is to persist data across renders without initiating a component update. This is particularly useful for values that you want to change without causing a re-render, such as a counter for instances of an event, timers, or manual manipulations of the DOM.
import React, { useRef, useEffect } from 'react';
function TimerComponent() {
const intervalRef = useRef();
useEffect(() => {
intervalRef.current = setInterval(() => {
console.log('Timer tick');
}, 1000);
return () => clearInterval(intervalRef.current);
}, []);
return <div>Check the console for timer ticks.</div>;
}
In this example, intervalRef is used to store the interval ID for a timer. Because the interval ID is stored in a ref, it can be accessed and cleared in the cleanup function of useEffect without triggering re-renders. This pattern is particularly useful for cases where you need to persist mutable data across renders.
Focus and Media Playback
useRef is also commonly used to manage focus, selection, or media playback by directly interacting with DOM nodes. Here’s how you can use useRef to focus an input element upon a button click:
import React, { useRef } from 'react';
function FocusInputComponent() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` points to the mounted text input element
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
In this scenario, useRef provides a straightforward way to access a DOM element directly and manipulate it, such as setting the focus on an input field without re-rendering the component.
5. Custom Hooks
Creating Reusable Logic Across Components
Custom hooks in React allow developers to extract component logic into reusable functions. This pattern is especially useful for sharing behavior that might be common across multiple components, such as fetching data, managing form inputs, or implementing complex state logic. By creating custom hooks, you can keep your components clean and DRY (Don’t Repeat Yourself), focusing on the UI rather than the underlying logic.
Examples of Custom Hooks
Let’s explore a couple of examples where custom hooks can significantly improve code reusability and maintainability.
useFetch – Fetching Data
A common task in modern web applications is fetching data from an API. By creating a useFetch custom hook, you can abstract away the complexities of making HTTP requests and managing state and side effects.
import { useState, useEffect } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(url);
const data = await response.json();
setData(data);
setLoading(false);
} catch (error) {
setError(error);
setLoading(false);
}
};
fetchData();
}, [url]);
return { data, loading, error };
}
With useFetch, components can easily fetch and display data without worrying about the intricacies of fetch API, state management, or error handling.
useFormInput – Managing Form State
Handling form inputs and their state is a common but often verbose part of React component development. A useFormInput custom hook can simplify this process.
import { useState } from 'react';
function useFormInput(initialValue) {
const [value, setValue] = useState(initialValue);
const handleChange = (e) => {
setValue(e.target.value);
};
return {
value,
onChange: handleChange,
};
}
This hook can then be used in a component to manage the state of form inputs effortlessly, making the component code cleaner and more focused on the UI.
function MyForm() {
const name = useFormInput('');
return (
<form>
<input type="text" {...name} />
</form>
);
}
Custom hooks like useFetch and useFormInput demonstrate the power of abstraction in React, allowing developers to create more readable, maintainable, and reusable components.
