Download Software Developer Skills Specialist React Practice Exam and more Exams Technology in PDF only on Docsity!
React Practice Exam
Question 1. Which CSS selector has the highest specificity? A) ul li a B) .nav .item C) #header D) article p Answer: C Explanation: ID selectors (#header) have a specificity of 0‑ 1 ‑0, which outweighs class selectors (0‑ 0 ‑1) and element selectors (0‑ 0 ‑ 0 ‑1).
Question 2. In Flexbox, what does the property justify-content: space-between; do? A) Aligns items vertically at the start of the container B) Distributes items evenly with equal space around each item C) Places the first item at the start and the last item at the end, spacing others evenly D) Stacks items on top of each other Answer: C Explanation: space-between puts the first item at the start, the last at the end, and distributes remaining space evenly between items.
Question 3. Which of the following is NOT a valid HTML5 semantic element?
React Practice Exam
A) <article> B) <section> C) <div> D) <aside> Answer: C Explanation: <div> is a generic container without semantic meaning; the others convey specific document structure.
Question 4. What is the default value of the CSS box-sizing property? A) border-box B) content-box C) padding-box D) margin-box Answer: B Explanation: By default, box-sizing: content-box calculates width/height without including padding or borders.
Question 5. Which of these is a valid way to import a default export in ES6? A) import { MyComponent } from './MyComponent';
React Practice Exam
C) var is block‑scoped, while let is function‑scoped D) Neither can be redeclared in the same scope Answer: B Explanation: let respects block scope ({}), whereas var is hoisted to the nearest function or global scope.
Question 8. What will the following code log? console.log(typeof null); A) "object" B) "null" C) "undefined" D) "boolean" Answer: A Explanation: In JavaScript, null is a primitive whose type operator returns "object" due to a historic bug.
Question 9. Which array method creates a new array containing only the even numbers from the original array? A) filter B) map C) reduce
React Practice Exam
D) forEach Answer: A Explanation: filter returns a new array with elements that satisfy the provided predicate.
Question 10. What does the async keyword before a function declaration indicate? A) The function runs on a separate thread B) The function returns a Promise automatically C) The function cannot use await inside it D) The function is executed immediately Answer: B Explanation: An async function always returns a Promise; its return value is wrapped in Promise.resolve.
Question 11. In TypeScript, which of the following correctly defines a read‑only property on an interface? A) readonly name: string; B) const name: string; C) final name: string; D) immutable name: string;
React Practice Exam
Answer: B Explanation: Keys help React identify which items have changed, been added, or removed, optimizing re‑rendering.
Question 14. Which of the following is true about JSX? A) JSX is a superset of HTML and can be used directly in browsers B) JSX must be transpiled to JavaScript before the browser can execute it C) JSX does not support embedding JavaScript expressions D) JSX uses class attribute for CSS classes Answer: B Explanation: Browsers cannot parse JSX; tools like Babel transform it into React.createElement calls.
Question 15. In a functional component, how do you declare a state variable called count with an initial value of 0? A) const [count, setCount] = useState(0); B) this.state = { count: 0 }; C) let count = 0; D) useState count = 0; Answer: A
React Practice Exam
Explanation: useState returns a tuple [state, setState]; the initial argument sets the default value.
Question 16. What does the useEffect hook’s dependency array control? A) The order in which effects run B) Whether the effect runs after every render, only once, or when specific values change C) The type of side effect (e.g., fetch vs. subscription) D) The component’s render priority Answer: B Explanation: An empty array runs the effect once (on mount); omitted runs after every render; values listed trigger re‑run when they change.
Question 17. Which of the following correctly cleans up a subscription in useEffect? A) return () => unsubscribe(); B) unsubscribe(); C) useEffect(() => { unsubscribe(); }, []); D) cleanup: unsubscribe(); Answer: A Explanation: Returning a function from useEffect registers it as a cleanup handler invoked before unmount or before the next effect run.
React Practice Exam
Question 20. Which React feature enables sharing state without prop drilling? A) Higher‑Order Components B) Context API C) Render Props D) Fragments Answer: B Explanation: The Context API provides a way to pass data through the component tree without manually passing props at every level.
Question 21. When should you use React.memo on a component? A) When the component never receives props B) When the component is a class component C) When the component renders the same output given the same props and re‑rendering is costly D) When you need to access lifecycle methods Answer: C Explanation: React.memo shallowly compares props and skips re‑rendering if they haven’t changed, useful for expensive UI.
React Practice Exam
Question 22. Which of the following statements about error boundaries is correct? A) They catch errors in event handlers B) They are implemented using componentDidCatch or static getDerivedStateFromError in class components C) They can be created with the useErrorBoundary hook D) They prevent all runtime errors in the app Answer: B Explanation: Error boundaries are class components that implement either componentDidCatch or static getDerivedStateFromError to handle render‑time errors.
Question 23. What is the primary purpose of React.lazy and Suspense? A) To fetch data from an API B) To lazily load components for code‑splitting and reduce bundle size C) To create higher‑order components automatically D) To memoize expensive calculations Answer: B Explanation: React.lazy dynamically imports a component, and Suspense shows a fallback UI while the component loads.
React Practice Exam
A) GET
B) POST
C) PATCH
D) DELETE
Answer: C Explanation: PATCH applies partial modifications to an existing resource, unlike PUT which replaces it entirely.
Question 27. When using the Fetch API, how can you check if the response was successful? A) if (response.ok) { … } B) if (response.status === 200) { … } C) if (response.success) { … } D) if (response.body) { … } Answer: A Explanation: The ok property is true for status codes in the range 200–299, indicating a successful HTTP response.
Question 28. Which React Testing Library query is best for selecting a button by its visible text? A) getByTestId
React Practice Exam
B) getByLabelText C) getByRole('button', { name: /submit/i }) D) getByAltText Answer: C Explanation: getByRole with the role “button” and the accessible name matches the button’s visible label.
Question 29. What does the jest.fn() utility create? A) A mock function that records calls and can be configured with implementations B) A new test suite C) A snapshot of a component’s output D) An asynchronous test wrapper Answer: A Explanation: jest.fn() returns a mock function that tracks its usage and can have custom return values.
Question 30. Which of the following is a correct way to set an environment variable for a Create React App build? A) process.env.REACT_APP_API_URL = "https://api.example.com" B) Create a .env file with REACT_APP_API_URL=https://api.example.com
React Practice Exam
D) Arrow functions always bind this to window Answer: B Explanation: Arrow functions do not have their own this; they capture the this value of the enclosing execution context.
Question 33. In CSS Modules, how would you apply a locally scoped class named button to a JSX element? A) <button className="button"> B) <button className={styles.button}> C) <button className={button}> D) <button class="button"> Answer: B Explanation: CSS Modules export an object (styles) where each key corresponds to the locally scoped class name.
Question 34. Which of the following statements about the Virtual DOM is false? A) It is a lightweight copy of the real DOM used for diffing B) Updating the Virtual DOM directly updates the browser UI C) React batches multiple state updates before reconciling the Virtual DOM D) The diffing algorithm minimizes the number of real DOM mutations
React Practice Exam
Answer: B Explanation: Changes to the Virtual DOM are not reflected in the browser until React reconciles and patches the real DOM.
Question 35. What does the useReducer hook return? A) An array with the current state and a dispatch function B) A function that replaces setState C) The previous state only D) A promise that resolves to the new state Answer: A Explanation: useReducer returns [state, dispatch], where dispatch sends actions to the reducer function.
Question 36. Which of the following best describes a Higher‑Order Component (HOC)? A) A component that renders its children via a render prop B) A function that takes a component and returns a new component with enhanced behavior C) A component that uses the Context API internally D) A component that lazily loads another component
React Practice Exam
Answer: B Explanation: In development, StrictMode intentionally double‑invokes some functions to surface unsafe side effects.
Question 39. What is the purpose of the key prop when using React.Fragment? A) To apply CSS classes to the fragment B) To give the fragment a stable identity for list rendering C) To enable the fragment to hold state D) Fragments cannot receive a key prop Answer: B Explanation: When rendering an array of fragments, each fragment can receive a key to help React track them.
Question 40. Which of the following correctly defines a custom hook that logs a value when it changes? A) function useLog(value) { useEffect(() => { console.log(value); }, []); } B) function useLog(value) { useEffect(() => { console.log(value); }, [value]); } C) function useLog(value) { console.log(value); } D) function useLog(value) { return useEffect(() => console.log(value)); } Answer: B
React Practice Exam
Explanation: The dependency array [value] ensures the effect runs whenever value changes.
Question 41. Which of the following is NOT a valid way to create a React context? A) const MyContext = React.createContext(defaultValue); B) const MyContext = createContext(); after importing createContext from 'react' C) const MyContext = new React.Context(); D) const MyContext = React.createContext(); Answer: C Explanation: React.Context is not a constructor; contexts are created via React.createContext.
Question 42. What will the following JSX evaluate to? <>{false && <p>Hello</p>}</> A) <p>Hello</p> B) null (nothing rendered) C) false (text node) D) An empty string Answer: B Explanation: In JSX, false && <p> short‑circuits to false, which renders nothing.
