Download Certified ReactJS Developer Certification Exam Guide and more Exams Technology in PDF only on Docsity!
Exam Guide
Question 1. Which of the following statements about JSX is TRUE? A) JSX is executed directly by the browser without transpilation. B) JSX must be wrapped in a single parent element or a fragment. C) JSX can only contain HTML elements, not React components. D) JSX does not support JavaScript expressions inside curly braces. Answer: B Explanation: JSX must have one root element; if multiple elements are needed, a fragment (<>...</>) can be used. Question 2. What does Babel do in a React project? A) It bundles JavaScript modules into a single file. B) It converts JSX and ES6+ syntax into browser-compatible ES5. C) It provides runtime type checking for props. D) It serves the application in development mode. Answer: B Explanation: Babel is a transpiler that transforms JSX and modern JavaScript features into code that browsers can execute. Question 3. In the Virtual DOM diffing algorithm, which scenario causes the least amount of work? A) Reordering a large list of items with keys. B) Updating a deeply nested property without a key. C) Changing the text content of a leaf node. D) Inserting a new element at the beginning of a list without keys. Answer: C Explanation: Changing only the text of a leaf node requires a minimal update because React can directly replace the text node.
Exam Guide
Question 4. Which of the following best describes React’s Fiber architecture? A) It replaces the Virtual DOM with a real DOM. B) It allows React to pause, abort, or restart work on rendering. C) It bundles CSS files automatically. D) It provides a built-in state management solution. Answer: B Explanation: Fiber introduces a cooperative scheduling model that lets React split rendering work into units that can be interrupted. Question 5. When initializing a project with Create React App, which file holds the list of project dependencies? A) .babelrc B) index.html C) package.json D) webpack.config.js Answer: C Explanation: package.json records all dependencies, scripts, and project metadata for a CRA project. Question 6. Which ES6 feature is most useful for extracting values from a props object in a functional component? A) Promise.all B) Destructuring assignment C) for...of loop D) Object.freeze Answer: B
Exam Guide
D) import * as React from 'useState'; Answer: C Explanation: Hooks are named exports from the 'react' package. Question 10. What is the primary difference between a functional component and a class component? A) Functional components cannot accept props. B) Class components have built-in state without hooks. C) Functional components are always faster in rendering. D) Class components cannot use lifecycle methods. Answer: B Explanation: Before hooks, class components managed state via this.state and lifecycle methods; functional components relied on hooks for state. Question 11. How do you define default props for a functional component named Button? A) Button.defaultProps = { type: 'button' }; B) function Button({ type = 'button' }) {} C) Button.props = { type: 'button' }; D) defaultProps(Button) = { type: 'button' }; Answer: A Explanation: Assigning to the static defaultProps property provides default values when none are supplied. Question 12. Which PropTypes validator ensures a prop is a required array of numbers? A) PropTypes.array.isRequired
Exam Guide
B) PropTypes.arrayOf(PropTypes.number).isRequired C) PropTypes.number.isRequired D) PropTypes.shape({}).isRequired Answer: B Explanation: arrayOf validates each element; chaining .isRequired makes the whole prop required. Question 13. In which lifecycle phase does componentDidMount run? A) Before the component is rendered for the first time. B) Immediately after the component is inserted into the DOM. C) When the component receives new props. D) Right before the component is removed from the DOM. Answer: B Explanation: componentDidMount executes once after the initial render and DOM insertion. Question 14. Which Hook is the direct functional equivalent of componentDidUpdate? A) useEffect with a dependency array containing props/state. B) useLayoutEffect without dependencies. C) useMemo with dependencies. D) useRef to store previous props. Answer: A Explanation: useEffect runs after render; providing a dependency array lets it act like componentDidUpdate. Question 15. What does the useState hook return?
Exam Guide
Question 18. How can you prevent a useEffect from running on the initial mount? A) Use an empty dependency array. B) Return false from the effect. C) Track a “mounted” flag with useRef and conditionally run logic. D) Set skipInitial: true in the dependency array. Answer: C Explanation: By storing a mutable flag with useRef, you can detect the first render and skip effect logic. Question 19. Which Hook solves the “prop drilling” problem? A) useReducer B) useMemo C) useContext D) useLayoutEffect Answer: C Explanation: useContext allows any descendant component to consume values without intermediate props. Question 20. What is the purpose of a Provider component in the Context API? A) To memoize expensive calculations. B) To supply a context value to the component tree below it. C) To replace the need for Redux. D) To handle routing logic. Answer: B Explanation: The Provider wraps part of the tree and makes its value available to any useContext consumer within.
Exam Guide
Question 21. When should you use useMemo? A) To memoize a component’s JSX output. B) To store mutable values that persist across renders. C) To memoize the result of an expensive calculation between renders. D) To replace useEffect for side effects. Answer: C Explanation: useMemo recomputes its value only when dependencies change, saving costly calculations. Question 22. How does useCallback differ from useMemo? A) useCallback memoizes a function reference; useMemo memoizes a value. B) useCallback runs after every render; useMemo runs only once. C) useCallback can only be used with class components. D) There is no difference; they are aliases. Answer: A Explanation: useCallback(fn, deps) returns the same function instance across renders when dependencies are unchanged. Question 23. Which hook would you use to directly focus an input element after it mounts? A) useEffect with a ref created by useRef. B) useState to store the focus flag. C) useMemo to compute the focus. D) useContext to share focus state. Answer: A
Exam Guide
Answer: A Explanation: createSlice simplifies Redux by producing a slice reducer and corresponding action creators. Question 27. Which of the following best describes a selector in Redux? A) A function that dispatches an action. B) A pure function that extracts a piece of state from the store. C) A middleware that logs actions. D) A component that renders based on props. Answer: B Explanation: Selectors read specific parts of the Redux state, often memoized with reselect. Question 28. Which middleware allows you to write asynchronous logic that returns a function instead of an object? A) Redux Saga B) Redux Thunk C) Redux Logger D) Redux Promise Answer: B Explanation: Redux Thunk lets action creators return a function that receives dispatch and getState. Question 29. What is the primary advantage of using Zustand over Redux for small apps? A) It requires no provider component. B) It enforces strict immutability.
Exam Guide
C) It automatically generates TypeScript types. D) It provides built-in routing capabilities. Answer: A Explanation: Zustand uses a simple hook (useStore) without needing a wrapper. **Question 30.** Which component from `react-router-dom` renders the matched route’s element? A) B) C) D) Answer: B Explanation: In v6, replaces and renders the first matching. Question 31. How do you create a navigation link that applies an “active” class when its route matches? A) B) ` isActive? "active" : ""} />` C) D) `` Answer: B Explanation: NavLink provides an isActive flag in its className function to conditionally apply styles.
Exam Guide
Explanation: useLocation returns an object with pathname, search, hash, and state. Question 35. How would you protect a route so that only authenticated users can access it? A) Wrap the component in with a fallback. B) Use a custom component that checks auth and redirects. C) Add protected attribute to . D) Set `requiresAuth={true}` on the route definition. Answer: B Explanation: A common pattern is a that renders the child if authenticated, otherwise redirects to login. Question 36. In a controlled component, where is the source of truth for the input’s value? A) The DOM element itself. B) The component’s state. C) A global variable. D) The browser’s localStorage. Answer: B Explanation: Controlled inputs get their value from React state and notify changes via onChange. Question 37. Which of the following is a key benefit of using Formik? A) Automatic Redux store integration. B) Simplified handling of form state, validation, and submission. C) Built-in CSS styling for forms.
Exam Guide
D) Server-side rendering of forms only. Answer: B Explanation: Formik abstracts form state management, validation, and submission handling. Question 38. How can you prevent the default form submission behavior in a React onSubmit handler? A) Return false from the handler. B) Call event.preventDefault() inside the handler. C) Set type="button" on the `` element. D) Use e.stopPropagation() only. Answer: B Explanation: event.preventDefault() stops the browser from performing the default submit action. Question 39. What is the purpose of React.memo? A) To memoize expensive calculations inside a component. B) To prevent a functional component from re-rendering when its props have not changed. C) To store mutable values across renders. D) To replace useEffect for side effects. Answer: B Explanation: React.memo shallowly compares props and skips re-rendering if they are equal. Question 40. Which of the following correctly lazy-loads a component named Dashboard?
Exam Guide
Question 43. What does an Error Boundary component need to implement to catch errors? A) componentWillUnmount lifecycle method. B) static getDerivedStateFromError and componentDidCatch. C) useEffect with an empty dependency array. D) renderError method. Answer: B Explanation: Error boundaries use static getDerivedStateFromError to update state and componentDidCatch to log errors. Question 44. Which CSS-in-JS library allows you to write actual CSS syntax inside JavaScript template literals? A) CSS Modules B) Styled Components C) Tailwind CSS D) Sass Answer: B Explanation: Styled Components leverages tagged template literals to define styled elements. Question 45. How can you scope CSS to a component using CSS Modules? A) Import the stylesheet as styles and reference class names via styles.className. B) Wrap the component with ``. C) Use module.css extension and automatically get global classes. D) Add scoped attribute to the `
Exam Guide
Explanation: CSS Modules generate unique class names; you import the object and apply classes via the object keys. Question 46. Which testing library is recommended for testing React components’ behavior rather than implementation details? A) Enzyme B) Jest C) React Testing Library (RTL) D) Mocha Answer: C Explanation: RTL encourages testing from the user’s perspective, focusing on rendered output and interactions. Question 47. In Jest, which function is used to mock a module like axios? A) jest.spyOn B) jest.mock('axios') C) jest.fn() alone D) mockImplementationOnce Answer: B Explanation: jest.mock('moduleName') replaces the entire module with a mock. Question 48. What does the act utility do in React testing? A) It forces a component to re-render synchronously. B) It flushes all pending effects and updates before assertions. C) It creates a snapshot of the component tree. D) It disables all timers.
Exam Guide
Question 51. What is the default behavior of useEffect when you omit the dependency array? A) It runs only once after the first render. B) It runs after every render. C) It never runs. D) It runs only when props change. Answer: B Explanation: Without a dependency array, the effect runs after each render cycle. Question 52. Which of the following statements about the key prop is FALSE? A) Keys help React identify which items have changed, are added, or removed. B) Keys must be globally unique across the entire app. C) Keys should be stable and predictable. D) Using the index as a key can cause issues when list order changes. Answer: B Explanation: Keys only need to be unique among siblings, not globally across the app. Question 53. In a Redux slice, which property defines the initial state? A) state B) initialState C) default D) startState Answer: B Explanation: createSlice({ name, initialState, reducers }) uses initialState to set the default slice state.
Exam Guide
Question 54. Which of these is a benefit of using React.lazy with Suspense? A) Automatic server-side rendering of components. B) Code splitting to reduce initial bundle size. C) Eliminates the need for a bundler. D) Guarantees that the component will never re-render. Answer: B Explanation: Lazy loading splits code so that components are fetched only when needed, improving load performance. Question 55. When using fetch inside useEffect, why is it recommended to abort the request on cleanup? A) To prevent memory leaks if the component unmounts before the request finishes. B) To speed up the network request. C) To automatically retry the request. D) To convert the promise into a synchronous call. Answer: A Explanation: Aborting the fetch prevents setting state on an unmounted component, which can cause warnings. Question 56. Which React hook can be used to memoize a value that is expensive to compute and only recompute when its dependencies change? A) useCallback B) useMemo C) useRef D) useEffect
