React introduced Hooks in version 16.8 to simplify component logic and state management without relying on class components. Hooks allow developers to use state, lifecycle methods, and side effects directly inside functional components, making code cleaner, reusable, and easier to test.
Why Use Hooks in React?
Simplify Code – Replace bulky class components with lightweight functions.
Reusability – Encapsulate logic in custom hooks and share across components.
Better Readability – No need for
thisor lifecycle method confusion.Performance – Reduce unnecessary re-renders with hooks like
useMemoanduseCallback.Migration Friendly – Helps modernize old React apps.
Types of React Hooks
1. Basic Hooks
✅ useState
Manages local state in a functional component.
Use Case: Toggle a dark/light theme.
const [theme, setTheme] = useState("light");✅ useEffect
Handles side effects (API calls, subscriptions, DOM manipulation).
Use Case: Fetch user data on component load.
useEffect(() => {
fetchUserData();
}, []);✅ useContext
Access global state without prop drilling.
Use Case: Multi-theme or multi-language support across the app.
const theme = useContext(ThemeContext);2. Additional Hooks
✅ useReducer
Alternative to
useStatefor complex state logic.
Use Case: Shopping cart with add/remove operations.
const [state, dispatch] = useReducer(cartReducer, initialCart);
✅ useRef
Directly reference DOM elements or persist values between renders.
Use Case: Focus input field on form load.
const inputRef = useRef();
useEffect(() => inputRef.current.focus(), []);
✅ useMemo
Memoizes computed values to avoid expensive recalculations.
Use Case: Optimizing a search filter in large datasets.
const filteredData = useMemo(() => data.filter(d => d.includes(query)), [query]);
✅ useCallback
Memoizes functions to prevent unnecessary re-renders.
Use Case: Pass stable callback props to child components.
const handleClick = useCallback(() => doSomething(), []);
✅ useLayoutEffect
Similar to
useEffectbut runs before painting the UI.
Use Case: Measuring DOM size before rendering a tooltip.
✅ useImperativeHandle
Customize ref behavior when using
forwardRef.
Use Case: Expose only specific methods from a child component (likeresetForm).
3. Custom Hooks
A custom hook is just a function starting with
usethat encapsulates reusable logic.
Use Case:useAuth()to handle login/logout/session checks.
function useAuth() {
const [user, setUser] = useState(null);
useEffect(() => {
const loggedInUser = localStorage.getItem("user");
if (loggedInUser) setUser(JSON.parse(loggedInUser));
}, []);
return user;
}
Real-World Scenarios
E-Commerce Website
useReducer: Manage cart operations (add/remove/update items).useEffect: Fetch product list from API.useContext: Share user authentication state across app.
Social Media App
useState: Manage likes/comments count.useEffect: Poll notifications from server.useMemo: Optimize feed rendering.
Video Streaming Platform
useRef: Control video play/pause/volume.useCallback: Stable handlers for play/pause buttons.
Banking Application
useReducer: Manage complex transaction states.useEffect: Auto-logout on session timeout.
React Hooks Interview Questions and Answers
Q1. Why were hooks introduced in React?
Answer: To simplify state and lifecycle management in functional components, reduce complexity, and improve reusability without converting everything into class components.
Q2. Difference between useState and useReducer?
Answer:
useState: For simple, local state.useReducer: For complex state logic with multiple transitions (like Redux-style state).
Q3. What is the difference between useEffect and useLayoutEffect?
Answer:
useEffect: Runs asynchronously after painting the UI.useLayoutEffect: Runs synchronously before painting, useful for DOM measurements.
Q4. How do useMemo and useCallback differ?
Answer:
useMemo: Caches computed values.useCallback: Caches functions.
Q5. Can hooks be used in class components?
Answer: No, hooks only work in functional components.
Q6. What are rules of hooks?
Answer:
Only call hooks at the top level (not inside loops, conditions, or nested functions).
Only call hooks from React functional components or custom hooks.
Q7. Example of a custom hook?
Answer: useAuth, useFetch, useLocalStorage are popular custom hooks for reusability.
✅ Final Tip : Always explain hooks with real-world use cases (cart, login, API fetch, notifications, etc.), not just definitions. This shows practical understanding.
Join the conversation! Your thoughts help the community grow.