A Complete Guide to React Hooks (Up to React 19)

🪝 A Complete Guide to React Hooks (Up to React 19)

React Hooks, introduced in React 16.8, revolutionized the way we build React applications. They allow developers to manage state, side effects, context, and more inside functional components—eliminating the need for bulky class components.

Over time, React introduced new hooks in v18 and v19, making app development more powerful, efficient, and developer-friendly.

In this guide, we’ll walk through all React Hooks, grouped by their version, with clear explanations and code examples.

🔹 1. Basic Hooks (React 16.8+)

1. useState

Adds state to a functional component.

const [count, setCount] = useState(0);

2. useEffect

Handles side effects (API calls, event listeners, DOM updates).

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

3. useContext

Consumes React Context without needing a Consumer wrapper.

const theme = useContext(ThemeContext);

🔹 2. Additional Hooks (React 16.8+)

4. useReducer

An alternative to useState for complex state logic.

const [state, dispatch] = useReducer(reducer, initialState);

5. useCallback

Memoizes a function to prevent unnecessary re-creation.

const memoizedFn = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

6. useMemo

Memoizes the result of expensive computations.

const result = useMemo(() => computeExpensiveValue(a, b), [a, b]);

7. useRef

Holds a mutable reference across renders (commonly for DOM access).

const inputRef = useRef(null);

8. useImperativeHandle

Customizes what gets exposed via ref in a component.

useImperativeHandle(ref, () => ({
  focus: () => inputRef.current.focus()
}));

9. useLayoutEffect

Runs synchronously after DOM updates—useful for layout measurements.

10. useDebugValue

Displays custom labels for hooks inside React DevTools.

useDebugValue(isOnline ? "Online" : "Offline");

🔹 3. React 18 Hooks (Concurrent Features)

11. useTransition

Keeps UI responsive by marking updates as non-urgent.

const [isPending, startTransition] = useTransition();

12. useDeferredValue

Defers updating a value until urgent renders finish.

const deferredSearch = useDeferredValue(search);

13. useId

Generates unique, hydration-safe IDs.

const id = useId();

14. useSyncExternalStore

Standard way to subscribe to external stores like Redux.

const state = useSyncExternalStore(subscribe, getSnapshot);

15. useInsertionEffect

Runs before DOM mutations. Useful for injecting styles.

🔹 4. React 19 Hooks (Async & Forms)

16. use

Lets components directly await promises or read contexts.

const data = use(fetchData());

17. useFormStatus

Provides form submission status (pending, success, error).

const { pending } = useFormStatus();

18. useFormState

Subscribes to form state returned by actions (errors, validations).

19. useOptimistic

Enables optimistic UI updates before the server confirms.

const [optimisticTodos, addOptimisticTodo] = useOptimistic(todos);

📋 React Hooks Cheat Sheet

Hook	Purpose	Version
useState	State in functional components	16.8
useEffect	Side effects (API, DOM, subscriptions)	16.8
useContext	Consume context	16.8
useReducer	Complex state logic	16.8
useCallback	Memoize functions	16.8
useMemo	Memoize values	16.8
useRef	Persistent references / DOM access	16.8
useImperativeHandle	Customize ref handling	16.8
useLayoutEffect	Sync effects after DOM updates	16.8
useDebugValue	Debugging custom hooks	16.8
useTransition	Non-urgent updates	18
useDeferredValue	Defer value rendering	18
useId	Unique IDs	18
useSyncExternalStore	Subscribe to external stores	18
useInsertionEffect	Inject styles before DOM mutation	18
use	Await promises inside components	19
useFormStatus	Form submission status	19
useFormState	Form state & errors	19
useOptimistic	Optimistic UI updates	19

🎯 Final Thoughts

From useState and useEffect in React 16.8 to async hooks like use and useOptimistic in React 19, hooks have transformed React development.

Mastering these hooks ensures you can build scalable, performant, and modern applications.

React Hooks (Up to React 19)