React Hooks Complete Guide
July 1, 2025🎣 Complete React Hooks Guide with Practical Examples
🧠 useState
What it does: Adds local state to a function component.
Code Example:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)>
You clicked {count} times
</button>
);
}
Why it's useful: useState is the most basic way to store dynamic data in a React component (e.g., form fields, counters).
⚙️ useReducer
What it does: Handles more complex state logic using reducers.
Code Example:
const reducer = (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(reducer, { count: 0 });
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })>+</button>
<button onClick={() => dispatch({ type: 'decrement' })>-</button>
</div>
);
}
Why it's useful: Best for state that changes in multiple ways (e.g., complex forms, undo/redo logic).
🔁 useEffect
What it does: Performs side effects after rendering (like fetching data, DOM updates, subscriptions).
Code Example:
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
Why it's useful: Replaces lifecycle methods like componentDidMount and componentDidUpdate from class components.
📐 useLayoutEffect
What it does: Same as useEffect, but it runs synchronously after all DOM mutations, before the browser paints.
Code Example:
useLayoutEffect(() => {
console.log("DOM has been updated before paint");
}, []);
Why it's useful: Ideal for measuring layout or making visual DOM changes without flickering.
🧵 useInsertionEffect
What it does: Used to inject styles or manipulate CSS-in-JS libraries before the browser layout happens.
Code Example:
useInsertionEffect(() => {
// Add styles directly before browser layout
}, []);
Why it's useful: Rarely needed unless working with styling libraries like Emotion or styled-components.
🌍 useContext
What it does: Accesses context values without needing to pass props manually through components.
Code Example:
const ThemeContext = React.createContext('light');
function ThemedButton() {
const theme = useContext(ThemeContext);
return <button className={theme}>I am styled by theme!</button>;
}
Why it's useful: Makes it easier to share global state like themes, authentication, or language settings.
🧭 useRef
What it does: Creates a mutable object that persists across renders and can hold a DOM reference.
Code Example:
function FocusInput() {
const inputRef = useRef(null);
const handleClick = () => {
inputRef.current.focus();
};
return (
<>
<input ref={inputRef} />
<button onClick={handleClick}>Focus the input</button>
</>
);
}
Why it's useful: Perfect for accessing or modifying DOM elements directly (e.g. focus, scroll).
🔧 useImperativeHandle
What it does: Customizes the instance value exposed when using refs with forwardRef.
Code Example:
const FancyInput = React.forwardRef((props, ref) => {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} />;
});
Why it's useful: Useful for libraries or components that expose custom imperative APIs.
📦 useMemo
What it does: Memoizes the result of an expensive calculation so it only recalculates when dependencies change.
Code Example:
const expensiveCalculation = (num) => {
console.log('Calculating...');
return num * 2;
};
function App({ number }) {
const result = useMemo(() => expensiveCalculation(number), [number]);
return <p>Result: {result}</p>;
}
Why it's useful: Improves performance by avoiding unnecessary recalculations on every render.
🔁 useCallback
What it does: Returns a memoized version of a callback function that only changes if dependencies change.
Code Example:
const handleClick = useCallback(() => {
console.log('Clicked!');
}, []);
Why it's useful: Helps prevent unnecessary re-renders in child components that receive functions as props.
🚀 useTransition
What it does: Allows you to mark a part of the UI update as non-urgent (transitional), improving responsiveness.
Code Example:
const [isPending, startTransition] = useTransition();
const handleChange = (e) => {
const input = e.target.value;
startTransition(() => {
setSearchTerm(input);
});
};
Why it's useful: Helps keep your app responsive by deferring slow updates during input typing or navigation.
🐢 useDeferredValue
What it does: Defers a value update so the UI can prioritize urgent updates first.
Code Example:
const deferredSearchTerm = useDeferredValue(searchTerm);
const filteredResults = useMemo(() => {
return items.filter(item => item.includes(deferredSearchTerm));
}, [deferredSearchTerm]);
Why it's useful: Improves user experience when filtering large lists or rendering heavy components.
🆔 useId
What it does: Generates unique IDs for accessibility and form elements.
Code Example:
const id = useId();
return (
<>
<label htmlFor={id}>Email</label>
<input id={id} type="email" />
</>
);
Why it's useful: Prevents ID conflicts in forms, especially inside reusable components.
🐞 useDebugValue
What it does: Shows custom labels in React DevTools for your custom hooks.
Code Example:
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
useDebugValue(isOnline ? 'Online' : 'Offline');
return isOnline;
}
Why it's useful: Helps during development by displaying extra debug information in DevTools.
🔄 useSyncExternalStore
What it does: Subscribes to external stores with support for concurrent rendering.
Code Example:
const state = useSyncExternalStore(store.subscribe, store.getSnapshot);
Why it's useful: The recommended way to read from external stores (like Redux) in modern React.
🎯 useActionState
What it does: Manages form-like state transitions triggered by user actions (experimental).
Code Example:
const [state, formAction] = useActionState(
async (prevState, formData) => {
const res = await submitToServer(formData);
return res;
},
{}
);
Why it's useful: Helpful for server-side forms with transitions (experimental in React 18+).
📤 useFormStatus
What it does: Tracks the pending status of a form submission.
Code Example:
const { pending } = useFormStatus();
return (
<button disabled={pending}>
{pending ? 'Sending...' : 'Submit'}
</button>
);
Why it's useful: Adds feedback UX during form submits in concurrent rendering mode.
📝 useFormState
What it does: Helps manage state of server-side form submissions.
Code Example:
const [state, formAction] = useFormState(actionFn, initialState);
Why it's useful: Part of React’s experimental form features — keeps form logic centralized.
Blog
React Labs: View Transitions & Activity
Jun 17, 2025
React Labs: View Transitions & Activity Published April 23, 2025 by Ricky Hanlon. React Labs is sharing two new experimental featu...
Laravel 12.18.0 Update
Jun 17, 2025
Laravel 12.18.0 Update The Laravel team released version 12.18.0 with several cool updates: String encrypt() & decrypt() helpers are...
Mastering Laravel Context: Advanced Logging and Contextual Job Tracing
Jul 20, 2025
Laravel Context is one of the most powerful new features in Laravel 12. It allows you to attach contextual data (like user ID, IP address, request pat...
Object-Oriented Programming (OOP) – Core Concepts
Aug 09, 2025
Object-Oriented Programming (OOP) is a modern software development approach that divides an application into units called Objects that interact with...
Stop Copy-Pasting Code! Learn How to Use Traits in Laravel the Right Way
Jul 01, 2025
🚫 Stop Copy-Pasting Code! Ever duplicated slug logic or logging across multiple models? Laravel's Traits got your back. 1. What’s a Trait?...
Essential React Native UI & Interaction Components
Jul 01, 2025
Essential React Native UI & Interaction Components React Native provides a powerful set of built-in components for creating native mobile apps....
