React Hooks, introduced in React 16.8, have simplified state and side effect management in functional components. This article covers the top 5 React Hooks, their use cases, and examples.
useState: Managing State with Ease
Hook useState is one of the most widely used Hooks in React. It allows you to add state to functional components, making it easier to manage and update state. With useState, you can initialize state with a default value, update state using the setState function, and access the current state value.
import { useState } from 'react';
//
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}useEffect: Handling Side Effects with Care
Hook useEffect is used to handle side effects in functional components, such as fetching data from an API or setting up event listeners. It takes two arguments: a function to run after rendering, and an optional array of dependencies. When the dependencies change, the effect function is re-run.
import { useState, useEffect } from 'react';
//
function FetchData() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []);
return (
<div>
{data ? <p>Data: {data}</p> : <p>Loading...</p>}
</div>
);
}useContext: Sharing Data Across Components
Hook useContext allows you to access context (shared state) in functional components. Context is useful when you need to share data between multiple components without passing props down manually.
import { createContext, useContext, useState } from 'react';
//
const ThemeContext = createContext();
function App() {
const [theme, setTheme] = useState('light');
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
const { theme, setTheme } = useContext(ThemeContext);
return (
<div>
<p>Current theme: {theme}</p>
<button onClick={() => setTheme('dark')}>Switch to dark theme</button>
</div>
);
}useReducer: Managing Complex State with Reducers
Hook useReducer is similar to useState, but it uses a reducer function to manage state. A reducer is a function that takes the current state and an action, and returns a new state. useReducer is useful when you need to manage complex state with multiple actions.
import { useReducer } from 'react';
//
const initialState = { count: 0 };
const counterReducer = (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(counterReducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
</div>
);
}useCallback: Memoizing Functions for Performance
Hook useCallback is used to memoize functions, so they’re not recreated on every render. This can improve performance by reducing the number of re-renders.
import { useState, useCallback } from 'react';
//
function SearchBar() {
const [query, setQuery] = useState('');
const search = useCallback(() => {
// Search logic here
}, [query]);
return (
<div>
<input type="text" value={query} onChange={(e) => setQuery(e.target.value)} />
<button onClick={search}>Search</button>
</div>
);
}Conclusion
In conclusion, these five Hooks are essential for building efficient and scalable React applications. By mastering useState, useEffect, useContext, useReducer, and useCallback, you’ll be able to write more effective and maintainable code.
