What are
Hooks in
React?
Hooks in React
Hooks are functions that
let you use React features
(state, lifecycle, context,
etc.) inside functional
components.
They replace many
patterns from class
components with a
simpler, reusable
approach.
Types of Hooks in React
useState _ State Management
Lets you add state to functional
components.
Returns a state variable and a setter
function.
Example: Counters, form inputs,
toggles.
useEffect – Side
Effects
Handles side effects like data
fetching, subscriptions, timers, DOM
updates.
Runs after render (like lifecycle
methods).
Example: Fetching API data on
mount.
useContext – Global
State
Avoids prop drilling (passing
props through multiple nested
components).
Centralizes global/shared state.
Cleaner & more readable code.
Example: Light/Dark theme
switching.
useReducer – Complex
State Management
Alternative to useState for
complex state logic.
Works like Redux reducer
pattern.
Example: Shopping carts, multi-
step forms.
useRef – Persistent
Values & DOM Access
Holds a mutable value that
doesn’t trigger re-renders.
Can reference DOM nodes
directly.
Example:Managing focus on an
input field.
useMemo – Performance
Optimization
Expensive calculations (sorting,
filtering, heavy math)
Derived data from large datasets
Preventing unnecessary re-
computation
Example: Filtering large data lists
efficiently.
useCallback – Memoized
Functions
Returns a memoized version of a
function.
Prevents unnecessary re-renders
in child components.
Example: Passing stable
callbacks to children.
useLayoutEffect –
Synchronous Side Effects
Similar to useEffect, but runs before
the browser paints.
Useful for DOM measurements &
layout adjustments.
Example: Reading element size before
paint.
useImperativeHandle –
Customizing Refs
Lets you control what is exposed when
using ref with forwardRef.
Example: Exposing only specific
functions from a child component.
Custom Hooks –
Reusable Logic
Your own hooks that combine
multiple hooks into one reusable
unit.
Example: useFetch, useAuth,
useLocalStorage.
Final Takeaway
Hooks bring state, lifecycle, and
logic reuse to functional
components.
Basic Hooks: useState,
useEffect, useContext
Additional Hooks: useReducer,
useRef, useMemo, useCallback,
etc.
Custom Hooks: For reusable,
domain-specific logic.
