This content originally appeared on DEV Community and was authored by saida lachgar
What Are React Hooks?
Functions that let you use React features in functional components without classes.
7 Essential Hooks
1. useState
What it does: keeps track of values that can change in your app
// e.g. 1: Basic state management
const [count, setCount] = useState(0);
// e.g. 2: Form inputs
const [name, setName] = useState('');
When to use:
- Storing form input values
- Toggling UI states (open/closed)
- Tracking simple values (counters, flags)
2. useEffect
What it does: helps us run code when things change (or when a component first loads)
// e.g. 1: Run once on mount (empty dependencies)
useEffect(() => {
// Setup code
return () => { /* Cleanup code */ };
}, []);
// e.g. 2: Run when dependencies change
useEffect(() => {
document.title = `${count} new messages`;
}, [count]);
When to use:
- Data fetching
- Subscriptions/event listeners
- DOM manipulation
- Syncing with external systems
3. useContext
What it does: allows multiple components to share the same data without passing it manually
// Access theme from anywhere in component tree
const theme = useContext(ThemeContext);
When to use:
- Accessing global state (themes, user data)
- Avoiding prop drilling through many components
- When multiple components need the same data
4. useRef
What it does: helps reference an element without causing unnecessary re-renders
// e.g. 1: DOM element reference
const inputRef = useRef(null);
inputRef.current.focus();
// e.g. 2: Value persistence between renders
const prevCountRef = useRef();
When to use:
- Accessing DOM elements
- Storing previous values
- Holding values that shouldn't trigger re-renders
- Managing timers/intervals
5. useReducer
What it does: Manages complex state logic
const [state, dispatch] = useReducer(reducer, initialState);
dispatch({ type: 'increment' });
When to use:
- Complex state with multiple sub-values
- When next state depends on previous state
- When state transitions have business logic
- When actions cause multiple state updates
6. useMemo
What it does: expensive calculations to avoid recomputing them unnecessarily
const expensiveValue = useMemo(() => {
return computeExpensiveValue(data);
}, [data]);
When to use:
- Optimizing performance-heavy calculations
- Preventing unnecessary computations
7. useCallback
What it does: Memoizes functions so they don’t get recreated every render
const handleClick = useCallback(() => {
console.log('Clicked!');
}, []);
When to use:
- Preventing unnecessary re-renders in child components
- Avoiding function recreation on every render
Custom Hooks
Create your own hooks to reuse logic between components:
// Extract reusable logic
function useWindowSize() {
const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });
// Event handling + cleanup in one hook
useEffect(() => {
const handleResize = () => setSize({ width: window.innerWidth, height: window.innerHeight });
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return size;
}
Rules of Hooks
- Only call at top level (no conditions/loops)
- Only call from React functions
- Name custom hooks with "use" prefix
Quick Tips
- Use
useStatefor simple state,useReducerfor complex state - Don't forget cleanup functions in
useEffect - Optimize renders with
useMemoanduseCallback - Create custom hooks to share logic, not just for reuse
- Use
useImperativeHandleto expose methods from child components to parents. - Use
useLayoutEffectwhen updates need to happen before the browser paints. - Use
useDebugValueto add labels to custom hooks for easier debugging in React DevTools.
🚀 Wrapping Up
React Hooks are powerful and fun when you understand how they work! Here's a quick recap:
✅ useState → Keeps track of changing values (Think of useState as a small whiteboard where you can jot down notes «data» that might change over time)
✅ useEffect → Runs side effects (like setting a reminder alarm. When certain things happen, you want to be reminded to do something)
✅ useContext → Shares values across components (Imagine a family chalkboard in your house where everyone can read and write messages)
✅ useRef → References elements without re-rendering (is like placing a bookmark in a book. It helps you keep track of a specific spot or element)
✅ useReducer → Handles complex state logic (like a suggestion box for managing complex state changes)
✅ useMemo → Optimizes calculations (like a chef who prepares ingredients in advance so they don’t have to chop them again for every order)
✅ useCallback → Optimizes functions (like saving a shopping list so you don’t rewrite it every time you go shopping!)
This content originally appeared on DEV Community and was authored by saida lachgar
saida lachgar | Sciencx (2025-02-25T22:46:23+00:00) Essential React Hooks & Practical Use Cases 🎣. Retrieved from https://www.scien.cx/2025/02/25/essential-react-hooks-practical-use-cases-%f0%9f%8e%a3/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.