programming
beginner
10 sample questions
React MCQ Practice Test
Components, props, and state management in React.
Understanding JSX for writing HTML-like syntax.
Q1. In a React component, what will be logged to the console if you use the following code: `console.log(this.props.myData.length);` assuming `this.props.myData` is an array with three elements?
-
A. undefined
-
B. 3 ✓
-
C. TypeError: Cannot read properties of undefined (reading 'length')
-
D. 0
Explanation: The code accesses the 'length' property of the `myData` array which is passed as a prop. Since the array has three elements, its length is 3.
Q2. In a React function component, you want to render <span>This paragraph is shown</span> only when the state variable showParagraph is true. Which snippet does this correctly?
-
A. <p>{showParagraph && "This paragraph is shown"}</p>
-
B. <p>{showParagraph === true ? "This paragraph is shown" : null}</p>
-
C. <p>{showParagraph ? <span>This paragraph is shown</span> : null}</p> ✓
-
D. <p>{this.state.showParagraph === true && <span>This paragraph is shown</span>}</p>
Explanation: The ternary in option C renders the span element when showParagraph is true and null otherwise. Options A and B render plain strings rather than the required span element, and option D uses this.state, which exists only in class components, not function components.
Q3. You're building a React component that needs to conditionally render a child component based on a prop called "showDetails". However, you want to avoid unnecessary re-renders of the child component if "showDetails" changes from "true" to "true" again. Which React feature is BEST suited to optimize this scenario, minimizing unnecessary re-renders of the child component?
-
A. useMemo hook with a custom comparison function
-
B. React.memo higher-order component with a custom comparison function ✓
-
C. useCallback hook
-
D. Fragment component
Explanation: While `useMemo` can memoize values, `React.memo` is specifically designed for memoizing components. Using a custom comparison function allows you to control when the child component re-renders based on the changes to `showDetails`, preventing unnecessary re-renders when the value remains true. `useCallback` memoizes functions, and Fragments don't offer memoization capabilities.
Q4. You're building a React component that needs to perform a complex, potentially time-consuming calculation only when a specific prop changes. Which lifecycle method (or its React 18 equivalent) would be MOST efficient to perform this calculation, minimizing unnecessary re-renders and ensuring data integrity?
-
A. componentDidUpdate
-
B. useEffect with the prop as a dependency ✓
-
C. getDerivedStateFromProps
-
D. useMemo
Explanation: While `componentDidUpdate` was used for this purpose in older React versions, `useEffect` with the relevant prop in the dependency array is the preferred and more efficient approach in modern React (including React 18). `getDerivedStateFromProps` is for state derivation from props and doesn't directly address the timing aspect efficiently. `useMemo` is for memoizing values, not directly handling side effects like this calculation. `useEffect` ensures the calculation only runs when the prop changes, preventing unnecessary computations and keeping the component's performance optimal.
Q5. You're building a React component that needs to fetch data from an API and display it conditionally. The API call might fail. To prevent errors and display a loading indicator while the data is fetched, and an error message if the fetch fails, which combination of React hooks is MOST efficient and idiomatic?
-
A. useState and useEffect only ✓
-
B. useReducer and useEffect only
-
C. useCallback and useMemo
-
D. useState, useEffect, and useErrorBoundary (if available)
Explanation: The idiomatic pattern is useState for data/loading/error plus a useEffect that fetches, clears loading on completion, and catches fetch errors into the error state. useErrorBoundary is not a core React hook, and error boundaries catch rendering errors - not async fetch failures; useReducer is heavier machinery than needed, and useCallback/useMemo address function identity and memoization, not data fetching.
Q6. You're building a React component that needs to fetch data from an API and display it conditionally. You want to avoid unnecessary re-renders when the data is loading. Which approach BEST optimizes performance and avoids potential errors related to accessing data before it's available?
-
A. Use the `useEffect` hook with an empty dependency array to fetch data only once on mount, and use a loading state variable to conditionally render the data. ✓
-
B. Use the `useState` hook to manage the loading state, but fetch the data directly within the component's render method using `async/await`.
-
C. Wrap the data fetching in a custom hook that uses `Promise.all` to fetch multiple API endpoints concurrently without any loading state management.
-
D. Employ a third-party library like Redux Saga for managing asynchronous operations, even though this adds considerable complexity for this simple use case.
Explanation: Using `useEffect` with an empty dependency array ensures the data fetching happens only once on mount. A loading state variable prevents rendering errors by conditionally displaying content only after the data has been fetched. This is the most efficient and straightforward approach for this scenario. Other options are either less efficient or introduce unnecessary complexity.
Q7. You're building a React component that needs to perform a complex calculation only when a specific prop, "expensiveCalculation", changes. Which lifecycle method (or its React 18 equivalent) would be MOST efficient for ensuring this calculation happens only when necessary, minimizing unnecessary re-renders?
-
A. componentDidUpdate
-
B. useEffect with the "expensiveCalculation" prop in the dependency array ✓
-
C. getDerivedStateFromProps
-
D. shouldComponentUpdate
Explanation: While `componentDidUpdate` might seem suitable, `useEffect` with the relevant prop in the dependency array is preferred in modern React (including React 18). It offers more control and cleaner syntax for handling side effects based on prop changes. `getDerivedStateFromProps` is used for deriving state from props, not for performing side effects. `shouldComponentUpdate` is for optimizing performance by preventing unnecessary renders, but it doesn't inherently execute the calculation; it only controls whether the render happens.
Q8. You're building a React component that needs to conditionally render a child component based on a prop called "showChild". However, you want to avoid unnecessary re-renders of the child component if "showChild" changes but the child component's props remain the same. Which React feature best addresses this optimization?
-
A. React.memo ✓
-
B. useCallback
-
C. useMemo
-
D. React.Fragment
Explanation: React.memo is a higher-order component that memoizes the child component, preventing re-renders if the props haven't changed. useCallback and useMemo are useful for memoizing functions and values, respectively, but don't directly address the conditional rendering of components based on props. React.Fragment is a simple way to group elements without adding extra nodes to the DOM, but it's not related to optimization in this scenario.
Q9. You're building a React component that needs to fetch data from an API and display it conditionally. The API call might fail. To prevent unnecessary re-renders while the data is loading and handle potential errors gracefully, what's the most efficient and React-idiomatic approach involving only built-in React features?
-
A. Use a combination of useState for loading state, useEffect for fetching, and a try...catch block within useEffect to handle errors, rendering conditionally based on these states. ✓
-
B. Employ a third-party library like 'axios' for API handling, storing the response in component state, and using a conditional rendering based on the response status.
-
C. Utilize React's built-in error boundaries to catch any errors during rendering, regardless of where they occur within the component tree.
-
D. Implement a custom hook that encapsulates the fetch logic, loading state, and error handling, then use that hook in your component, conditionally rendering based on its returned values.
Explanation: This approach leverages React's core features effectively. useState manages the loading and error states, useEffect performs the asynchronous operation, and the try...catch block gracefully handles potential API errors. Conditional rendering based on these states ensures that only the appropriate content is displayed at each stage, avoiding unnecessary re-renders and providing clear error feedback.
Q10. You're building a React component that needs to fetch data from an API and display it conditionally. The data fetch might fail. To avoid rendering errors before the data arrives and handle potential failures gracefully, which combination of React Hooks is the MOST efficient and idiomatic approach?
-
A. useState and useEffect with a try...catch block
-
B. useReducer and useContext for centralized state management and error handling
-
C. useCallback and useMemo to optimize rendering performance while fetching data
-
D. useEffect with a promise and the data state initialized to `null` or an empty object, along with a loading state ✓
Explanation: Using `useEffect` with a promise allows for clean asynchronous operation. Initializing the data state to `null` or an empty object prevents errors before data arrives. A loading state provides visual feedback to the user. While `useReducer` is powerful, it adds complexity unnecessary for this specific scenario. `useCallback` and `useMemo` focus on performance optimization, not error handling and data fetching directly.
That was just a sample. Sign up to unlock the full question bank with timed tests and certificates.
Sign Up Free