React Hooks are functions that let you "hook into" React state and lifecycle features from function components. They were introduced in React 16.8. Below is a list of common React hooks, their explanations, and examples of usage. Additionally, this guide covers how to create custom hooks.
1. useState
The useState hook lets you add state to function components.
Explanation
useState returns an array with two elements: the current state value and a function to update it.
Usage
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
2. useEffect
The useEffect hook lets you perform side effects in function components.
useEffect With Dependencies
-
useEffectruns after the first render and after every update. You can also specify dependencies to control when the effect runs.
Usage
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
useEffect With an Empty Dependency Array []
- Runs only once after the initial render (similar to componentDidMount).
useEffect(() => {
console.log('This runs only once after the first render');
}, []);
- Use case: Fetching data when the component mounts, setting up event listeners, etc.
useEffect Without Dependencies
- Runs on every render (initial and subsequent re-renders).
useEffect(() => {
console.log('This runs after every render');
});
- Use case: Running code that doesn’t depend on specific state changes, like logging or animations.
Cleanup Function in useEffect
- If useEffect returns a function, it acts as a cleanup that runs before the next effect or when the component unmounts.
useEffect(() => {
const interval = setInterval(() => {
console.log('Interval running...');
}, 1000);
return () => {
clearInterval(interval); // Cleanup on unmount
};
}, []);
- Use case: Cleaning up event listeners, canceling API calls, clearing intervals, etc.
3. useContext
The useContext hook lets you access the value of a context.
Explanation
useContext accepts a context object (the value returned from React.createContext) and returns the current context value.
Usage
import React, { useContext } from 'react';
const MyContext = React.createContext();
function MyComponent() {
const value = useContext(MyContext);
return <div>{value}</div>;
}
function App() {
return (
<MyContext.Provider value="Hello, World!">
<MyComponent />
</MyContext.Provider>
);
}
4. useReducer
The useReducer hook is an alternative to useState for managing complex state logic.
Explanation
useReducer returns an array with the current state and a dispatch function to trigger state updates.
Usage
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:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>
Increment
</button>
<button onClick={() => dispatch({ type: 'decrement' })}>
Decrement
</button>
</div>
);
}
5. useCallback
The useCallback hook returns a memoized callback.
Explanation
useCallback returns a memoized version of the callback that only changes if one of the dependencies has changed.
Usage
import React, { useState, useCallback } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount((prevCount) => prevCount + 1);
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={increment}>
Click me
</button>
</div>
);
}
6. useMemo
The useMemo hook returns a memoized value.
Explanation
useMemo only recomputes the memoized value when one of the dependencies has changed.
Usage
import React, { useState, useMemo } from 'react';
function ExpensiveCalculationComponent() {
const [count, setCount] = useState(0);
const [value, setValue] = useState('');
const expensiveCalculation = useMemo(() => {
// Assume this is an expensive calculation
return count * 2;
}, [count]);
return (
<div>
<p>Expensive Calculation: {expensiveCalculation}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
<input value={value} onChange={(e) => setValue(e.target.value)} />
</div>
);
}
7. useRef
The useRef hook returns a mutable ref object.
Explanation
useRef is useful for accessing DOM elements or persisting values across renders.
Usage
import React, { useRef } from 'react';
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
inputEl.current.focus();
};
return (
<div>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</div>
);
}
8. useImperativeHandle
The useImperativeHandle hook customizes the instance value that is exposed when using ref.
Explanation
useImperativeHandle should be used with React.forwardRef.
Usage
import React, { useRef, useImperativeHandle, forwardRef } from 'react';
const FancyInput = forwardRef((props, ref) => {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} />;
});
function Parent() {
const inputRef = useRef();
return (
<div>
<FancyInput ref={inputRef} />
<button onClick={() => inputRef.current.focus()}>Focus Input</button>
</div>
);
}
9. useLayoutEffect
The useLayoutEffect hook runs after all DOM mutations.
Explanation
useLayoutEffect is similar to useEffect, but it fires synchronously after all DOM mutations.
Usage
import React, { useLayoutEffect, useRef } from 'react';
function LayoutEffectComponent() {
const divRef = useRef();
useLayoutEffect(() => {
console.log(divRef.current.getBoundingClientRect());
});
return <div ref={divRef}>Hello, world!</div>;
}
10. useDebugValue
The useDebugValue hook is used to display a label for custom hooks in React DevTools.
Explanation
useDebugValue can be helpful for debugging custom hooks.
Usage
import React, { useState, useDebugValue } from 'react';
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
useDebugValue(isOnline ? 'Online' : 'Offline');
// Imagine this is an actual implementation
return isOnline;
}
11. Custom Hooks
Custom hooks let you extract component logic into reusable functions.
Explanation
Custom hooks are normal JavaScript functions that can call other hooks.
Example: useFetch
import { useState, useEffect } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch(url)
.then((response) => response.json())
.then((data) => {
setData(data);
setLoading(false);
});
}, [url]);
return { data, loading };
}
export default useFetch;
Usage of Custom Hook
import React from 'react';
import useFetch from './useFetch';
function App() {
const { data, loading } = useFetch('https://api.example.com/data');
if (loading) {
return <div>Loading...</div>;
}
return (
<div>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}
export default App;
This guide provides a comprehensive overview of React hooks, their usage, and how to create custom hooks.
Top comments (0)