What is the Purpose of React Hooks?
💡 Concept Name
React Hooks are built-in functions that let developers use state and lifecycle features in functional components without needing to convert them to class components.
📘 Quick Intro
Hooks simplify React development by allowing functional components to manage state, handle side effects, interact with context, and more. They were introduced in React 16.8 to make code cleaner, more reusable, and less dependent on classes.
🧠 Analogy / Short Story
Imagine you're assembling furniture. Without tools (hooks), you’d struggle with your bare hands. Hooks are like screwdrivers and hammers—simple utilities that let you work smarter, not harder. They bring power and flexibility to functional components, just like tools make assembly efficient.
🔧 Technical Explanation
- 🎯 Hooks are functions that let you "hook into" React features like state and lifecycle.
- 📦
useStateadds local component state to functional components. - ⏱️
useEffectruns side effects like data fetching or subscriptions. - 🌐
useContextgives access to shared state without prop drilling. - 🔄 Custom hooks enable reusable logic across multiple components.
💻 Real Code Example
// useState and useEffect example
import React, { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Clicked ${count} times`;
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
❓ Interview Q&A
Q1: What are React hooks?
A: React hooks are special functions that allow functional components to use state, lifecycle, and other React features.
Q2: Why were hooks introduced in React?
A: To allow functional components to manage state and side effects, reducing the need for class components.
Q3: What does useState do?
A: It adds state management capability to functional components.
Q4: How does useEffect work?
A: It runs side effects like API calls or DOM updates based on dependencies.
Q5: Can you use multiple hooks in one component?
A: Yes, multiple hooks can be used and composed together.
Q6: What are custom hooks?
A: Custom hooks are user-defined functions that use other hooks and encapsulate reusable logic.
Q7: Are hooks backward-compatible?
A: Yes, they were added in React 16.8 and don’t break existing code.
Q8: Can hooks be used in class components?
A: No, hooks only work inside functional components or other hooks.
Q9: What hook helps access context data?
A: useContext.
Q10: Do hooks replace Redux?
A: No, but they offer local state solutions; for global state, Redux or context may still be used.
📝 MCQs
Q1. What are React hooks?
- Event handlers
- Routing methods
- Functions to use state/lifecycle in functional components
- Testing utilities
Q2. Which hook manages component state?
- useEffect
- useRef
- useState
- useContext
Q3. What is the purpose of useEffect?
- Update CSS
- Define routes
- Run side effects like API calls
- Handle form submission
Q4. Where can hooks be used?
- Anywhere in JS file
- Inside class methods
- Inside functional components
- Global scripts
Q5. Can hooks be conditionally called?
- Yes
- Only useState
- No
- Only inside loops
Q6. What does useContext help with?
- Styling elements
- DOM selection
- Access context without prop drilling
- Logging events
Q7. When were hooks introduced?
- React 15
- React 16.3
- React 16.8
- React 17
Q8. Can hooks fully replace class components?
- No
- Only for props
- Yes, in most cases
- Only with Redux
Q9. Are custom hooks possible?
- No
- Only for useEffect
- Yes
- Only in Redux
Q10. Which of the following is NOT a React hook?
- useState
- useEffect
- useClass
- useContext
💡 Bonus Insight
Hooks enable powerful abstractions. Instead of rewriting lifecycle logic in every component, you can extract logic into custom hooks—making components smaller, more readable, and DRY. They're now the standard for modern React apps.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!