Download React Front End Web Development Practice Exam and more Exams Technology in PDF only on Docsity!
Practice Exam
Question 1. Which HTML5 element is most appropriate for containing the primary navigation links of a website? A) B) C) D) Answer: B Explanation: The `` element semantically represents a set of navigation links. Question 2. In CSS, which selector has the highest specificity? A) .button B) #main C) div D) button:hover Answer: B Explanation: ID selectors (#main) have higher specificity than class, type, or pseudo‑class selectors. Question 3. Which of the following Flexbox properties aligns items along the cross‑axis? A) justify-content B) align-items C) flex-direction D) order Answer: B Explanation: align-items controls alignment perpendicular to the main axis.
Practice Exam
Question 4. What does the CSS grid-template-columns: repeat(3, 1fr); declaration do? A) Creates three rows each taking one fraction of the height B) Creates three columns each taking equal width fractions C) Repeats the same column definition three times without affecting layout D) Sets a fixed width of three pixels for each column Answer: B Explanation: repeat(3, 1fr) defines three columns, each occupying an equal share of the available space. Question 5. Which viewport meta tag setting enables responsive scaling on mobile devices? A) B) C) D) Answer: C Explanation: width=device-width, initial-scale=1 tells the browser to match the viewport width to the device width and start with a 1× scale. Question 6. Which JavaScript keyword creates a block‑scoped variable that cannot be reassigned? A) var B) let C) const D) static Answer: C Explanation: const creates a block‑scoped constant; its binding cannot be reassigned.
Practice Exam
A) await fetchData().catch(err => console.error(err)); B) try { await fetchData(); } catch (err) { console.error(err); } C) await fetchData().then(null, err => console.error(err)); D) All of the above Answer: B Explanation: The try…catch block captures errors thrown by an awaited Promise. Question 10. Which array method creates a new array containing only the even numbers from the original array? A) filter B) map C) reduce D) find Answer: A Explanation: filter returns a new array with elements that satisfy the provided testing function. Question 11. What does the spread operator (...) do when used inside an array literal? A) Merges two arrays into an object B) Expands an iterable into individual elements C) Creates a shallow copy of an object only D) Converts the array into a string Answer: B Explanation: Inside an array, ...iterable spreads each element of the iterable into the new array. Question 12. Which of the following statements about ES6 modules is correct?
Practice Exam
A) A file can have multiple default exports. B) Named exports must be imported using the same identifier unless aliased. C) Import statements can be placed anywhere in the file. D) Modules are executed in the global scope. Answer: B Explanation: Named exports retain their exported names; you can rename them on import using as. Question 13. In a JavaScript class, what does the super() call inside a constructor do? A) Calls the parent class's constructor. B) Calls the child class's own constructor again. C) Binds the this keyword to the class instance. D) Creates a new instance of the class. Answer: A Explanation: super() invokes the constructor of the parent (super) class. Question 14. Which React feature makes UI updates more efficient by minimizing direct DOM manipulation? A) Virtual DOM B) JSX C) PropTypes D) Context API Answer: A Explanation: The Virtual DOM allows React to compute the minimal set of changes before updating the real DOM.
Practice Exam
Question 18. Which of the following is a valid way to return multiple sibling elements from a functional component without adding extra nodes to the DOM? A) Wrap them in a B) Return an array of elements C) Use or <> shorthand D) Both B and C Answer: D Explanation: Both returning an array and using Fragments avoid extra wrapper nodes. Question 19. How would you apply a CSS class named active to a JSX element? A) B) C) D) Answer: B Explanation: In JSX, className replaces the HTML class attribute. Question 20. Which of the following is a correct inline style object for a <p> element that makes the text red and bold? A) </p><p></p> B) <p></p> C) <p></p> D) <p></p> Answer: B Explanation: Inline styles in JSX use a JavaScript object with camelCased property names and string values.
Practice Exam
Question 21. Which statement correctly describes a functional component in React? A) It must extend React.Component. B) It can use hooks but cannot have lifecycle methods. C) It always returns a class instance. D) It cannot accept props. Answer: B Explanation: Functional components can use hooks (e.g., useState, useEffect) and do not have class‑based lifecycle methods. Question 22. What is the primary advantage of lifting state up in React? A) Reduces the number of props passed down the tree. B) Allows sibling components to share the same state. C) Improves performance by avoiding re‑renders. D) Enables the use of this.state in functional components. Answer: B Explanation: Moving state to a common ancestor lets multiple child components access and modify the same data. Question 23. Which of the following is the correct way to define default props for a functional component using defaultProps? A) MyComponent.defaultProps = { title: "Hello" }; B) function MyComponent({ title = "Hello" }) { … } C) MyComponent.props = { title: "Hello" }; D) Both A and B are valid. Answer: D
Practice Exam
A) Run the effect after every render. B) Run the effect only once. C) Run the effect whenever count changes. D) Run the effect only when count is undefined. Answer: C Explanation: The effect re‑executes whenever any value in the array changes. Question 27. Which of the following is true about the cleanup function returned from useEffect? A) It runs before the component is mounted. B) It runs after every render, regardless of dependencies. C) It runs before the effect re‑executes or when the component unmounts. D) It runs only when the component is unmounted. Answer: C Explanation: The cleanup runs before the next effect call and on unmount. Question 28. How can you prevent a child component from re‑rendering when its parent re‑renders, assuming its props haven’t changed? A) Wrap the child with React.memo. B) Use useRef inside the child. C) Declare the child as a class component. D) Use useEffect with an empty dependency array. Answer: A Explanation: React.memo performs a shallow prop comparison and skips re‑rendering if unchanged.
Practice Exam
Question 29. Which hook is best suited for persisting a mutable value that does not cause a re‑render when it changes? A) useState B) useEffect C) useRef D) useMemo Answer: C Explanation: useRef provides a mutable .current property that persists across renders without triggering updates. Question 30. When using useReducer, what does the reducer function return? A) The new state object. B) An action object. C) A side‑effect function. D) Nothing; it mutates the state directly. Answer: A Explanation: The reducer receives the current state and an action, then returns the updated state. Question 31. Which hook would you use to memoize a callback function that is passed to a child component to avoid unnecessary re‑creations? A) useMemo B) useCallback C) useEffect D) useRef Answer: B Explanation: useCallback(fn, deps) returns a memoized version of the function.
Practice Exam
Explanation: The value prop makes the input’s content fully controlled by state. Question 35. How would you retrieve the current value of an uncontrolled `` using a ref? A) inputRef.current.value B) inputRef.value C) inputRef.current.getValue() D) inputRef.current.text Answer: A Explanation: The DOM node is stored in ref.current, and its value property holds the input’s content. Question 36. Which of the following patterns best describes a custom hook named useFetch? A) A higher‑order component that wraps a fetch component. B) A regular JavaScript function that uses other hooks to encapsulate fetching logic. C) A component that returns JSX with fetched data. D) A Redux reducer handling fetch actions. Answer: B Explanation: Custom hooks are ordinary functions that may call built‑in hooks to share reusable logic. Question 37. What is the primary purpose of the React Context API? A) To replace Redux for global state management. B) To avoid prop drilling by providing values to deep components. C) To create higher‑order components automatically. D) To manage side effects across the app.
Practice Exam
Answer: B Explanation: Context allows data to be passed through the component tree without manually passing props at every level. Question 38. Which component from react-router-dom renders the UI that matches the current URL path? A) B) C) D) Answer: C Explanation: (or older) selects the first child that matches the location. **Question 39. How can you programmatically navigate to `/dashboard` inside a component using React Router v6?** A) `history.push('/dashboard')` B) `useNavigate()` hook and then `navigate('/dashboard')` C) D) window.location.href = '/dashboard' Answer: B Explanation: useNavigate returns a function that performs navigation. Question 40. Which of the following URL patterns defines a dynamic route parameter named id? A) /users/:id B) /users/*id
Practice Exam
D) It provides a default shouldComponentUpdate implementation. Answer: B Explanation: React.memo performs a shallow comparison of props and skips rendering if they are unchanged. Question 44. Which of the following is the correct way to debounce a function inside a functional component using useCallback? A) const debounced = useCallback(debounce(fn, 300), []); B) const debounced = useMemo(() => debounce(fn, 300), []); C) useEffect(() => { const handler = debounce(fn, 300); }, []); D) const debounced = debounce(fn, 300); Answer: A Explanation: Wrapping the debounced function with useCallback ensures the same debounced reference across renders. Question 45. Which of the following statements about useEffect cleanup is FALSE? A) The cleanup runs before the next effect invocation. B) The cleanup can update state. C) The cleanup runs when the component unmounts. D) The cleanup is optional. Answer: B Explanation: Updating state in a cleanup may cause a memory leak or warning because the component might already be unmounting. Question 46. In React, which lifecycle method is equivalent to componentDidMount for functional components? A) useEffect(() => { … }, [])
Practice Exam
B) useLayoutEffect(() => { … }) C) useCallback(() => { … }, []) D) useMemo(() => { … }, []) Answer: A Explanation: An effect with an empty dependency array runs after the first render, similar to componentDidMount. Question 47. Which of the following is NOT a valid CSS pseudo‑class? A) :hover B) ::before C) :nth-child D) :focus-visible Answer: B Explanation: ::before is a pseudo‑element, not a pseudo‑class. Question 48. What does the CSS property box-sizing: border-box; change about element dimensions? A) Width and height include only content, excluding padding and border. B) Width and height include padding and border in the total size. C) It forces the element to have a fixed size regardless of content. D) It adds a border automatically around the element. Answer: B Explanation: border-box makes the element’s total width/height the sum of content, padding, and border. Question 49. Which HTML attribute improves accessibility by providing a textual description for screen readers?
Practice Exam
**Question 52. What will the following code log?
const add = (a, b) => a + b; const curried = a => b => add(a, b); console.log(curried(2)(3)); ```** A) `5` B) `NaN` C) `Function` D) `undefined` Answer: A Explanation: `curried(2)` returns a function that adds 2 to its argument; calling it with 3 yields 5. **Question 53. Which of the following is a correct way to export multiple named values from a module?** A) `export default { foo, bar };` B) `export { foo, bar };` C) `module.exports = { foo, bar };` D) `exports = { foo, bar };` Answer: B Explanation: `export { foo, bar };` creates named exports. **Question 54. In React, what does the `key` prop need to be for optimal performance?** A) A random number generated on each render. B) The index of the item in the array. C) A stable, unique identifier that does not change between renders. ## Practice Exam D) Any string value. Answer: C Explanation: Stable unique keys allow React to correctly preserve component instances. **Question 55. Which React hook would you use to store the previous value of a prop or state variable?** A) `useRef` B) `useState` C) `useEffect` D) `useMemo` Answer: A Explanation: `useRef` can hold mutable values that persist across renders without causing re‑renders. **Question 56. Which of the following statements about `useEffect` dependencies is correct?** A) Omitting the dependency array runs the effect after every render. B) An empty array runs the effect after every render. C) Including a variable that never changes will cause the effect to run infinitely. D) Dependencies are optional and have no impact on effect execution. Answer: A Explanation: Without a dependency array, the effect runs after each render. **Question 57. In React Router v6, which component replaces the old `` component?** A) `` B) ``
