-
In a functional component, which hook is used to perform side effects like fetching data or subscribing to events?
- useState
- useEffect
- useContext
- useReducer
Correct Answer: useEffect
Explanation: useEffect is specifically designed to handle side effects in functional components, replacing lifecycle methods like componentDidMount and componentDidUpdate.
-
What happens if you update a state variable directly without using the setter function from useState?
- React will automatically detect the change and re-render.
- The component will re-render, but performance will decrease.
- The component will not re-render, and the UI will be out of sync.
- An error will be thrown immediately.
Correct Answer: The component will not re-render, and the UI will be out of sync.
Explanation: React state is immutable. Updates must go through the setter function to trigger the reconciliation process and re-render the UI.
-
Which hook should be used to persist a value between renders without causing a re-render when the value changes?
- useMemo
- useCallback
- useRef
- useState
Correct Answer: useRef
Explanation: useRef returns a mutable ref object whose .current property persists across renders and does not trigger a re-render when updated.
-
How can you optimize a child component to prevent unnecessary re-renders when its props haven't changed?
- Wrap it in React.memo()
- Use the useMemo hook inside the child
- Use the useCallback hook in the child
- Wrap the child in a Context Provider
Correct Answer: Wrap it in React.memo()
Explanation: React.memo is a higher-order component that performs a shallow comparison of props to determine if a re-render is necessary.
-
What is the primary purpose of the 'key' prop in React lists?
- To style specific list elements
- To uniquely identify elements for efficient DOM reconciliation
- To pass data to the child component
- To enable CSS transitions
Correct Answer: To uniquely identify elements for efficient DOM reconciliation
Explanation: Keys help React identify which items have changed, been added, or removed, which is crucial for the Virtual DOM reconciliation process.
-
When using useEffect, how do you ensure the effect runs only once after the initial mount?
- Omit the dependency array
- Pass [true] as the dependency array
- Pass an empty array [] as the dependency array
- Use the useLayoutEffect hook instead
Correct Answer: Pass an empty array [] as the dependency array
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.
-
Which hook is preferred for managing complex state logic involving multiple sub-values?
- useState
- useReducer
- useContext
- useRef
Correct Answer: useReducer
Explanation: useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one.
-
What is the correct way to clean up a subscription or timer in a useEffect hook?
- Call a cleanup function at the end of the component body
- Return a cleanup function from the useEffect callback
- Use the componentWillUnmount hook
- React handles cleanup automatically
Correct Answer: Return a cleanup function from the useEffect callback
Explanation: If your effect returns a function, React will run it when it is time to clean up (before re-running the effect and when the component unmounts).
-
What is the main advantage of the Context API over prop drilling?
- It makes the application faster
- It provides a way to share data without passing props through every level
- It automatically validates props
- It replaces the need for any local state
Correct Answer: It provides a way to share data without passing props through every level
Explanation: Context provides a way to share values like themes or user data between components without having to explicitly pass a prop through every level of the tree.
-
Which hook is used to memoize the result of a computationally expensive calculation?
- useCallback
- useMemo
- useRef
- useEffect
Correct Answer: useMemo
Explanation: useMemo returns a memoized value, recalculating it only when one of its dependencies has changed.
-
What is the difference between useEffect and useLayoutEffect?
- useEffect is synchronous, useLayoutEffect is asynchronous
- useLayoutEffect runs after the DOM is painted
- useLayoutEffect runs synchronously after all DOM mutations but before the paint
- There is no difference
Correct Answer: useLayoutEffect runs synchronously after all DOM mutations but before the paint
Explanation: useLayoutEffect fires synchronously after all DOM mutations. Use this to read layout from the DOM and synchronously re-render to avoid visual flickers.
-
In React 18, what does the useTransition hook allow you to do?
- Create CSS transitions easily
- Mark state updates as non-urgent transitions
- Navigate between routes
- Handle API request transitions
Correct Answer: Mark state updates as non-urgent transitions
Explanation: useTransition allows you to mark specific state updates as transitions, which lets React interrupt them if more urgent updates (like typing) occur.
-
Which of the following is a 'Rule of Hooks' in React?
- Hooks can be called inside loops
- Hooks must be called at the top level of a function
- Hooks can be called from regular JavaScript functions
- Hooks must be called inside conditional blocks
Correct Answer: Hooks must be called at the top level of a function
Explanation: Hooks must be called at the top level of React functions to ensure they are called in the same order on every render.
-
What is the purpose of React.Fragment?
- To increase rendering speed
- To group a list of children without adding extra nodes to the DOM
- To create a portal to another DOM node
- To catch JavaScript errors in child components
Correct Answer: To group a list of children without adding extra nodes to the DOM
Explanation: Fragments let you group a list of children without adding extra nodes to the DOM, which helps maintain clean HTML structures.
-
What happens during the 'Reconciliation' process in React?
- The browser refreshes the page
- React calculates the difference between the new Virtual DOM and the previous one
- The Redux store updates its state
- CSS is applied to the HTML elements
Correct Answer: React calculates the difference between the new Virtual DOM and the previous one
Explanation: Reconciliation is the algorithm React uses to diff one tree with another to determine which parts need to be changed in the actual UI.
-
What is an 'uncontrolled component' in React forms?
- A component that doesn't have state
- A component where form data is handled by the DOM itself
- A component that uses Redux for state
- A component that cannot be updated
Correct Answer: A component where form data is handled by the DOM itself
Explanation: In an uncontrolled component, the form data is handled by the DOM (usually accessed via refs), rather than by React state.
-
What is the purpose of the 'useCallback' hook?
- To cache the result of a function
- To return a memoized version of a callback function
- To execute a function after rendering
- To manage global state
Correct Answer: To return a memoized version of a callback function
Explanation: useCallback returns a memoized version of the callback that only changes if one of the dependencies has changed, preventing unnecessary re-renders of children.
-
Which feature allows you to wait for some code to load and declaratively specify a loading state?
- React.lazy
- React.Suspense
- Error Boundaries
- React.memo
Correct Answer: React.Suspense
Explanation: Suspense lets your components 'wait' for something before they can render, allowing you to show a fallback UI like a loader.
-
How can you catch JavaScript errors in a component tree to prevent the whole app from crashing?
- Try-catch blocks inside render
- Using Error Boundaries (componentDidCatch)
- Using the useEffect hook
- Setting a global window.onerror
Correct Answer: Using Error Boundaries (componentDidCatch)
Explanation: Error boundaries are React components that catch JavaScript errors anywhere in their child component tree and display a fallback UI.
-
What is the primary benefit of using a custom Hook?
- It improves the visual appearance of the UI
- It allows you to reuse stateful logic between different components
- It replaces the need for useEffect
- It makes the application private
Correct Answer: It allows you to reuse stateful logic between different components
Explanation: Custom Hooks allow you to extract component logic into reusable functions, which can be shared across multiple components.
-
In Redux, what is the role of a 'Reducer'?
- To dispatch actions to the store
- To specify how the application's state changes in response to actions
- To fetch data from an API
- To bind React components to the store
Correct Answer: To specify how the application's state changes in response to actions
Explanation: Reducers are pure functions that take the current state and an action, and return the next state.
-
What is 'lifting state up' in React?
- Moving state to a Redux store
- Moving local state to the nearest common ancestor of components that need it
- Using the useState hook at the top of a file
- Increasing the performance of a component
Correct Answer: Moving local state to the nearest common ancestor of components that need it
Explanation: Lifting state up involves moving shared state to the closest common parent component so that multiple children can stay in sync.
-
What does 'React Portals' provide?
- A way to transport data between components
- A way to render children into a DOM node that exists outside the hierarchy of the parent
- A faster way to load images
- An interface for calling external APIs
Correct Answer: A way to render children into a DOM node that exists outside the hierarchy of the parent
Explanation: Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component, useful for modals.
-
What is the significance of the 'PureComponent' in class components?
- It never re-renders
- It implements shouldComponentUpdate with a shallow prop and state comparison
- It only renders HTML and no logic
- It is a component without a render method
Correct Answer: It implements shouldComponentUpdate with a shallow prop and state comparison
Explanation: PureComponent performs a shallow comparison of props and state to reduce unnecessary updates, similar to React.memo for functional components.
-
What is 'Prop Drilling'?
- A technique to optimize prop passing
- The process of passing data through several layers of components to reach a deeply nested one
- Validating props using PropTypes
- Injecting props into a component using a HOC
Correct Answer: The process of passing data through several layers of components to reach a deeply nested one
Explanation: Prop drilling is the unofficial term for passing data through many components that don't need it, just to reach a component deep in the tree.
24iQ
