When new state depends on old state, it is best practice to pass a callback function to the setter to ensure you are working with the most recent value.
Incorrect! Try again.
19Which hook is used to perform side effects like data fetching or DOM manipulation?
A.useEffect
B.useState
C.useContext
D.useReducer
Correct Answer: useEffect
Explanation:
useEffect is designed to handle side effects in functional components, replacing lifecycle methods like componentDidMount.
Incorrect! Try again.
20If you pass an empty array [] as the second argument to useEffect, when does the effect run?
A.Only when the component unmounts
B.Whenever state changes
C.Only when the component mounts
D.On every render
Correct Answer: Only when the component mounts
Explanation:
An empty dependency array tells React that the effect doesn't depend on any values from props or state, so it only runs once on mount.
Incorrect! Try again.
21If the dependency array is omitted entirely in useEffect, when does the effect run?
A.After every completed render
B.Only on unmount
C.Never
D.Only on mount
Correct Answer: After every completed render
Explanation:
Without a dependency array, the effect runs after every single render cycle.
Incorrect! Try again.
22What is the purpose of the return function inside a useEffect hook?
A.To cleanup side effects (like clearing timers)
B.To return the JSX to be rendered
C.To update the state
D.To stop the component from rendering
Correct Answer: To cleanup side effects (like clearing timers)
Explanation:
The function returned by useEffect is the cleanup function, which runs before the component unmounts or before the effect runs again.
Incorrect! Try again.
23Which hook is primarily used to avoid prop drilling?
A.useReducer
B.useRef
C.useCallback
D.useContext
Correct Answer: useContext
Explanation:
useContext allows components to subscribe to React context without introducing nesting, solving the issue of passing props down multiple levels.
Incorrect! Try again.
24What argument does useContext accept?
A.A reducer function
B.A string key
C.The initial state
D.A Context object (created by React.createContext)
Correct Answer: A Context object (created by React.createContext)
Explanation:
useContext accepts the context object (the value returned from React.createContext) and returns the current context value.
Incorrect! Try again.
25Which hook allows you to access a DOM element directly?
A.useDom
B.useState
C.useEffect
D.useRef
Correct Answer: useRef
Explanation:
useRef returns a mutable ref object whose .current property is initialized to the passed argument, often used to access DOM nodes.
Incorrect! Try again.
26Does changing the .current property of a useRef object trigger a re-render?
A.No
B.Yes, always
C.Only in strict mode
D.Only if dependencies change
Correct Answer: No
Explanation:
useRef updates are synchronous and do not notify React of changes, so they do not trigger a re-render.
Incorrect! Try again.
27Which hook is preferable for complex state logic that involves multiple sub-values?
A.useState
B.useMemo
C.useReducer
D.useEffect
Correct Answer: useReducer
Explanation:
useReducer is usually preferable to useState when you have complex state logic or when the next state depends on the previous one.
Incorrect! Try again.
28What are the two arguments accepted by useReducer?
A.reducer function and initial state
B.reducer function and dependency array
C.callback and dependency array
D.initial state and dispatch
Correct Answer: reducer function and initial state
Explanation:
useReducer(reducer, initialState) accepts a reducer of type (state, action) => newState, and the initial state.
Incorrect! Try again.
29Which hook returns a memoized version of a callback function?
A.useMemo
B.useCallback
C.useRef
D.useEffect
Correct Answer: useCallback
Explanation:
useCallback returns a memoized callback function that only changes if one of the dependencies has changed.
Incorrect! Try again.
30Which hook returns a memoized value?
A.useMemo
B.useCallback
C.useReducer
D.useState
Correct Answer: useMemo
Explanation:
useMemo returns a memoized value (the result of a function) to avoid expensive calculations on every render.
Incorrect! Try again.
31When should you use useMemo?
A.To handle HTTP requests
B.For every calculation
C.To update the DOM
D.To cache expensive calculations
Correct Answer: To cache expensive calculations
Explanation:
useMemo is an optimization tool used to avoid recalculating expensive functions on every render unless dependencies change.
Incorrect! Try again.
32What is a 'Custom Hook'?
A.A built-in React hook modified by the user
B.A class component converted to a function
C.A JavaScript function whose name starts with 'use' and may call other hooks
D.A component that returns JSX
Correct Answer: A JavaScript function whose name starts with 'use' and may call other hooks
Explanation:
Custom hooks allow you to extract component logic into reusable functions. They must start with 'use' to let React check for violations of rules of hooks.
Incorrect! Try again.
33In the Class Component lifecycle, getSnapshotBeforeUpdate is called:
A.After render but before updates are committed to the DOM
B.After componentDidUpdate
C.Before render
D.During the mounting phase
Correct Answer: After render but before updates are committed to the DOM
Explanation:
It enables the component to capture information (like scroll position) from the DOM before it is potentially changed.
Incorrect! Try again.
34Which of the following statements about useState is TRUE?
A.It merges the new state with the old state automatically
B.It must be used inside a loop
C.It replaces the old state with the new state completely
D.It can only be used once per component
Correct Answer: It replaces the old state with the new state completely
Explanation:
Unlike this.setState in classes (which merges), the useState updater function replaces the state variable with the new value.
Incorrect! Try again.
35If you want to persist a value across renders without causing a re-render, which hook should you use?
A.useMemo
B.useState
C.useCallback
D.useRef
Correct Answer: useRef
Explanation:
useRef holds a mutable value in its .current property that persists for the full lifetime of the component without triggering re-renders.
Incorrect! Try again.
36Can hooks be used inside conditional statements (if/else)?
A.Only in development mode
B.Only useEffect
C.No, never
D.Yes, always
Correct Answer: No, never
Explanation:
Hooks rely on the order of execution to track state. Placing them in conditions breaks this order and causes errors.
Incorrect! Try again.
37In a reducer function used with useReducer, what is the return value?
A.The previous state
B.The action object
C.A boolean indicating success
D.The new state
Correct Answer: The new state
Explanation:
A reducer function takes state and action, and returns the new state.
Incorrect! Try again.
38Which hook is equivalent to componentDidMount, componentDidUpdate, and componentWillUnmount combined?
A.useState
B.useLifecycle
C.useLayoutEffect
D.useEffect
Correct Answer: useEffect
Explanation:
useEffect can replicate the behavior of these three lifecycle methods based on how the dependency array and return function are configured.
Incorrect! Try again.
39How do you access the value stored in a ref object named 'inputRef'?
A.inputRef.state
B.inputRef.value
C.inputRef.get()
D.inputRef.current
Correct Answer: inputRef.current
Explanation:
The ref object returned by useRef has a single property called .current.
Incorrect! Try again.
40What happens if you update a state hook with the exact same value as the current state?
A.React bails out without rendering the children or firing effects
B.The component unmounts
C.React triggers a re-render anyway
D.React throws an error
Correct Answer: React bails out without rendering the children or firing effects
Explanation:
React uses Object.is comparison algorithm. If the value is the same, React skips the render update.
Incorrect! Try again.
41Which lifecycle method is deprecated in recent React versions (16.3+)?
A.componentDidUpdate
B.componentWillUnmount
C.componentWillMount
D.componentDidMount
Correct Answer: componentWillMount
Explanation:
componentWillMount (along with componentWillReceiveProps and componentWillUpdate) is considered unsafe and deprecated.
Incorrect! Try again.
42What is the primary use of the 'key' prop in lists which relates to component lifecycle/state?
A.Styling the list items
B.Setting the initial state
C.Passing data to the child
D.Helping React identify which items have changed, added, or removed
Correct Answer: Helping React identify which items have changed, added, or removed
Explanation:
Keys help React manage state and the DOM efficiently by tracking identity. Poor key usage can lead to state issues.
Incorrect! Try again.
43When using useMemo, what determines when the value is recalculated?
A.When one of the variables in the dependency array changes
B.When the user clicks a button
C.Every 1000ms
D.Whenever the component re-renders
Correct Answer: When one of the variables in the dependency array changes
Explanation:
useMemo only re-computes the memoized value when one of the dependencies has changed.
Incorrect! Try again.
44What is 'Prop Drilling'?
A.A tool to inspect props
B.Defining default props
C.The process of passing data from a parent to a deeply nested child through intermediate components
D.Validating props types
Correct Answer: The process of passing data from a parent to a deeply nested child through intermediate components
Explanation:
Prop drilling refers to passing props through multiple layers of components that don't need the data themselves, just to reach a child that does.
Incorrect! Try again.
45Which hook serves as an alternative to useState for managing complex state transitions?
A.useReducer
B.useContext
C.useCallback
D.useLayoutEffect
Correct Answer: useReducer
Explanation:
useReducer follows the Redux pattern and is ideal for complex state logic.
Incorrect! Try again.
46Can you use built-in hooks inside a Custom Hook?
A.Only useEffect
B.No
C.Yes
D.Only useState
Correct Answer: Yes
Explanation:
Custom hooks are designed to compose logic using built-in hooks.
Incorrect! Try again.
47What is the signature of the dispatch function returned by useReducer?
A.dispatch(reducer)
B.dispatch(action)
C.dispatch(newState)
D.dispatch(state, action)
Correct Answer: dispatch(action)
Explanation:
You call dispatch passing an action object (usually with a type property) to trigger a state update.
Incorrect! Try again.
48Which hook fires synchronously after all DOM mutations but before the browser paints?
A.useState
B.useEffect
C.useInsertionEffect
D.useLayoutEffect
Correct Answer: useLayoutEffect
Explanation:
useLayoutEffect is identical to useEffect, but it fires synchronously after DOM mutations. Use it to read layout from the DOM and synchronously re-render.
Incorrect! Try again.
49In a class component, where should you initialize state?
A.In the render method
B.In componentWillUnmount
C.In the constructor
D.In componentDidMount
Correct Answer: In the constructor
Explanation:
The constructor is the standard place to initialize this.state in a class component.
Incorrect! Try again.
50What is the naming convention for a custom hook file?
A.Must be in the hooks folder
B.Must allow uppercase
C.Must start with 'use' (e.g., useForm)
D.Must end with 'Hook'
Correct Answer: Must start with 'use' (e.g., useForm)
Explanation:
The 'use' prefix allows the React linter to automatically enforce the Rules of Hooks.