Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
React · Question Set
React Hooks interview questions for placements and exams.
Questions
16
Included in this set
Subject
React
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for React.
Common Hooks include useState for state, useEffect for side effects, useRef for DOM refs, useContext for global context, useMemo and useCallback for optimization.
Hooks are special functions that let you use React features like state and lifecycle inside functional components. They were introduced to avoid complex class components and make logic reusable.
useEffect() is used to perform side effects like fetching data, updating the DOM, or setting up subscriptions after render. It replaces lifecycle methods like componentDidMount and componentDidUpdate.
useEffect(() => {
console.log('Effect runs after render');
}, []);The useEffect hook accepts a function and an optional dependency array. The effect runs when one of the dependencies changes. An empty array runs it only once after mount.
useEffect(() => {
console.log('Runs on count change');
}, [count]);React compares each dependency value on re-render. If any value changes, the effect re-runs. This helps control when side effects occur and avoid unnecessary work.
Hooks must be called at the top level of a component or custom hook, not inside loops, conditions, or nested functions. They must only be called inside React functions.
useRef() creates a mutable reference that persists across renders. It is commonly used to access DOM elements directly or store mutable values without causing re-renders.
const inputRef = useRef(null);
<input ref={inputRef} />;Refs are used to access or modify DOM elements directly, store previous values, and hold data that doesn’t need to trigger re-renders.
Refs let Hooks store values that survive re-renders without updating the UI. This is useful for timers, external libraries, or manual DOM access.
Create a custom hook when you have reusable logic that involves React Hooks, like fetching data, handling input, or subscribing to events. It keeps your code clean and DRY.
Custom hooks make logic reusable, easy to test, and separate UI from logic. They also simplify large components by organizing related logic together.
useEffect handles side effects like API calls or DOM updates after rendering. It is the Hook version of lifecycle methods.
useState provides local state in functional components. It returns a value and a function to update it.
Hooks can only be called from functional components or other custom hooks, not from regular functions or class components.
Effects without cleanup run once and don’t need cleanup, like fetching data. Effects with cleanup return a function that removes subscriptions or listeners when the component unmounts.
useEffect(() => {
const timer = setInterval(() => console.log('tick'), 1000);
return () => clearInterval(timer);
}, []);Custom hooks are reusable functions that use React’s built-in hooks. They allow you to extract logic from components and reuse it across multiple components.
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return width;
}For complete preparation, combine this set with full subject-wise practice for React. You can also explore other subjects and sets from the links below.