React Hooks Q&A (Beginner Friendly)
1. What are React Hooks?
Hooks are special functions in React that let you use state and lifecycle features in functional components.
2. Why were Hooks introduced?
To replace class components and make code simpler, reusable, and easier to understand.
3. What is useState?
useState is used to store and update local component state.
Example: form inputs, counters, toggles.
Master React Hooks Today
Ready to put your knowledge into practice? Open our Interactive Hooks Playground to build real-world examples.
Open React Playground 4. What is useEffect?
useEffect runs side effects like API calls, subscriptions, or updating the DOM.
5. When does useEffect run?
It runs after render. It can run:
• On every render
• Only once (empty dependency array)
• When specific state changes
• On every render
• Only once (empty dependency array)
• When specific state changes
6. What is useRef?
useRef stores a value that doesn’t cause re-render when updated. It is also used to access DOM elements.
7. What is useContext?
useContext allows sharing global data (like theme, user auth) without prop drilling.
8. What is prop drilling?
Passing data through multiple components unnecessarily just to reach a deep child component.
9. useEffect vs useState difference?
useState stores data. useEffect handles side effects like API calls and updates.
10. Real project example?
In your Profile Manager app:
• useState → form inputs
• useEffect → fetch profiles
• useRef → DOM access or scroll handling
• useState → form inputs
• useEffect → fetch profiles
• useRef → DOM access or scroll handling
11. Can hooks be used inside loops or conditions?
No. Hooks must always be used at the top level of a component.
12. Why are hooks important?
They make React code cleaner, reusable, and easier to manage compared to class components.