ReactJS Practice Test

These questions are part of the practice quiz. Start practicing

• What is the purpose of the useLayoutEffect hook (and how does it differ from useEffect)?
• What is a React portal primarily used for?
• Which statement about JSX attributes is true?
• What is code-splitting and its benefits in React?
• In a React class component, a render method is defined as which of the following?
• What is a primary use case for the useId hook in React?
• Which statement best describes accessibility considerations in React?
• Which technique is commonly used to implement infinite scroll in a React component?
• Why is className used in JSX instead of class?
• What is the difference between server-side rendering and client-side rendering in React?
• Which statement is true about React.Component in a typical module import?
• Which property is always available on a component's props to access its children?
• How should you update state when the new state depends on the previous state?
• Which statement about ReactDOM.render is accurate?
• What is the purpose of render props in React?
• Which command ejects the app and copies build dependencies and configuration into the app directory (and you can't go back)?
• A JSX expression must have exactly one outermost element.
• In JSX, how is a self-closing tag written?
• Which statement about React onClick event listeners is correct?
• Which command starts the test runner?
• Which feature do class components have that functional components historically did not, but can be mimicked with hooks?
• style={{ color: 'red' }} - What are the inner curly braces for?
• Which practice best supports accessibility in React?
• In React, how is onClick typically attached to a component instance in JSX?
• Which statement accurately describes dynamic information in React components?
• ReactDOM.render()'s second argument indicates ...
• Which statement about passing props is correct?
• If a component has more than one child between its JSX tags, what does this.props.children contain?
• Which technique helps prevent unnecessary re-renders when providing context values?
• When should you use useMemo?
• Where is React.Component defined?
• What does npm run build generate for deployment?
• If a component has only one child, what does this.props.children return?
• What happens if you omit keys in a list when rendering in React?
• When is it appropriate to wrap a component in React.memo?
• Explain the useTransition hook and how it helps with concurrency.
• Which command generates a boilerplate version of a React application?
• What is the difference between stateful and stateless components?
• A component's props is an...
• What are the four phases of a component's lifecycle?
• What does the JSX compiler produce for JSX?
• Which of the following statements about JSX is true?
• What is the role of index.html in a typical React app?
• Which of the following is the correct syntax to update component state using setState?
• Which approach is recommended for implementing responsive styling in React?
• To make a component have state, you should...
• Which sequence describes testing a React component with React Testing Library?
• What is a SyntheticEvent in React and how does event pooling work?
• Which of the following best describes how JSX elements relate to components?
• Which statement describes mounting events?
• What does diffing refer to in React's virtual DOM?
• Which method does a JSX element compile into when using React?
• What does the body of a React component class represent?
• What is the primary purpose of a custom hook in React?
• Besides props and state, every value used in a component should...
• What is true about Error Boundaries in React?
• Which of the following best describes how to pass data from a parent to a child in React?
• What is the difference between useMemo and useCallback?
• Which of the following expresses the conventional naming for event listener attributes in JSX?
• What does the 'private': true setting in package.json prevent?
• this.props refers to that storage object. At the same time, each piece of passed-in information is called...
• Which statement correctly describes how to access the props object inside a React class component?
• What is React.StrictMode and why is it used during development?
• In JSX, capitalization is used to distinguish between which two types of elements?
• What does the scripts section specify?
• Why can't you call this.setState() from inside of the .render() method?
• What does the dependencies array in useEffect control?
• Which statement describes the typical pattern for creating a custom hook?
• Which statement best describes a component?
• How do you access a passed-in prop named 'title' inside a component?
• What term describes information that can change over time in a component?
• What is the purpose of the cleanup function returned from useEffect?
• Passing information: create a method that allows the stateless child component to update the state of the parent component.
• What is the difference between props and state?
• Which statement about hydration is true?
• Which statement best describes a React component class?
• What naming convention should component class names use in React?
• How to fetch data in a React component and handle cancellation?
• Which statement best describes a JSX element?
• Which statement best describes the public directory's purpose in a React app?
• In the example <Button onClick={this.handleClick} />, what is assigned to the onClick prop?
• How do you pass a prop to a component in JSX?
• Which of the following describes the rules for using React hooks?
• Which statement about React components is true?
• What is the render props pattern?
• What is server-side rendering (SSR) and what is hydration in React?
• JSX elements can be which of the following?
• What is a recommended approach to improve user experience while data is loading from an API?
• What are common use cases for useRef?
• Which lifecycle phase denotes that a component has been removed from the UI?
• Which statement about methods inside a class body is correct?
• Which statement about higher-order components is accurate?
• If a component class expects a prop, you can give that component class ...
• Which statement about rendering in React is true?
• What are React applications made out of?
• Which statement shows how to import React and ReactDOM?
• How do you create your own component class in React?
• What is a recommended approach to reduce re-renders caused by context value changes?
• Which statement is correct about updating state with useState when the new state depends on the previous state?
• What do curly braces in JSX signal?
• The methods imported from 'react' do what?
• Which is a common React performance anti-pattern?
• Where are event handlers typically defined in a class component?
• Which statement about JSX naming is true?
• How do you define an event handler in React?
• When should you use useCallback?
• What is the difference between props drilling and using contextual data in React?
• What is the purpose of keys in a list in React?
• Which statement best contrasts render props with higher-order components?
• Visitors to your site are served those static assets produced by the build. What best describes what is served?
• What happens if you omit the dependencies array in useEffect?
• What is the role of keys in rendering lists, and what happens if keys are not stable?
• What is the difference between CSS Modules and styled-components?
• Which statement is not a valid way to embed a JavaScript expression inside JSX content?
• JSX element
• To pass info to a component, the values that aren't strings are...
• To see a component's props object, you use the expression...
• How are event listener names written in JSX?
• To read a component's state, use the expression
• What is the primary purpose of the render method in a class component?
• In a render props pattern, a Mouse component that calls props.render with { x, y } demonstrates what concept?
• In React, what is state?
• Explain optimistic UI updates and how to implement them with rollback on error.
• Which statement about the React Context API and useContext is true?
• A component changes its state by calling the function
• Passing information: pass props from a stateful parent component to a stateless child component.
• What is JSX in React?
• Which statement is true about rendering a component with no children in JSX?
• Which of the following describes 'lifting state up' in React data flow?
• What does lifting state up mean in React?
• In React, onClick is best described as what?
• What is the virtual DOM?
• What is snapshot testing in React, and what are its typical pros and cons?
• A React component should use 'props' to store information that can be changed, but can only be changed by a different component.
• Which directory contains the JavaScript that is processed by webpack and is the heart of the React app?
• What is the difference between functional components with hooks and class components?
• How do you optimize rendering to avoid unnecessary re-renders?
• Which command bundles the app into static files for production?
• What does the dependencies section in package.json contain?
• Where can you place simple calculations and conditional statements inside a render() function?
• What is the convention for naming custom hooks?
• In React, what should the value of a key be?
• The lifecycle category that includes render() is?
• Which statement about ReactDOM's purpose is accurate?
• Which statement about imports is accurate?
• Which directory contains assets that will be served directly without additional processing by webpack?
• How do React.lazy and Suspense work together?
• Which JSX forms are valid for rendering a React component?
• Which statement best describes props and state?
• What is the recommended way to ensure 'this' refers to the component inside an event handler?
• What does a Provider do in the Context API?
• this.state should be equal to...
• Which token is used for applying CSS classes in JSX?
• Which statement about keys in a list is best practice?
• The PropTypes concept described is used to describe expected prop types.
• What is a key characteristic of the virtual DOM?
• What is the purpose of an error boundary in React?
• What does ReactDOM.render() first argument typically contain?
• What is the term for the attributes passed to a component to configure it?
• What is the purpose of dangerouslySetInnerHTML in React, and when should you use it?
• Which command starts the development server?
• What is the purpose of the defaultProps property in a React component?
• Where must hooks be called?
• Props in a React component are intended to store information that can be changed by the component itself.
• What happens when you call this.setState() in a React component?
• If a React component wants to change information stored within itself, it should use ...
• What is a common drawback of snapshot testing?
• Which is the only property you must include in your React component class?
• Who can change a prop value?
• Which statement about event handlers in class components is true?
• What pattern helps handle errors in async data fetching within components?
• React uses a tool called which transforms the directories and files into static assets?
• A render method must contain what?
• What is props in React?
• Which file takes care of caching and updating files for offline capability in a React app?
• Which statement about labeling form controls is accurate?
• Diffing refers to which process?
• Which feature does the service worker file enable?
• Render() belongs to two lifecycle categories: mounting and ...
• Which statement is true about state in a component?
• Which statement best describes how data can be passed into a component as props?
• If a JSX expression takes up more than one line you must ...
• In a render props pattern, what does a child component typically do with a function prop named render?
• Whenever you define an event handler that uses 'this', you need to add
• When implementing pagination in React, which state variables are commonly tracked?
• Which naming style is recommended for class names in React components?
• When should you use useCallback?
• Which statement about rendering in React is true?
• In a React component, why is calling this.setState() inside render() discouraged?
• style={{ color: 'red' }} - What are the outer curly braces for?
• Mounting lifecycle events only execute ...
• Which file configures how the web app behaves when added to an Android user's home screen?
• Where is the initial state typically assigned in a class-based component?
• What is the purpose of keys in lists?
• What is the difference between useEffect cleanup function and componentWillUnmount?
• Can you access variables declared outside a JSX expression inside the JSX block?
• If you do not bind an event handler that uses 'this', what is a common consequence?
• Which statement correctly describes controlled components in React forms?
• If your React app uses AJAX to fetch initial data from an API, which lifecycle method is best to use?
• What is the purpose of the key attribute in a React list?
• React components always have to call ________ for constructors to be set up properly.
• Which two mechanisms provide dynamic information to a React component?
• A component 'mounts' when ...
• Passing information: create a child component that updates its parent's state, which then updates a sibling component.
• What is a key consequence of ejecting in the setup?
• What is the difference between a React element and a component?
• In JSX, how is an expression inside curly braces rendered?
• What is a React Fragment and when should you use it?
• How would you implement debouncing in a React input to limit API calls?
• Which statement best describes ReactDOM?
• Which code pattern sets default props for a React component named MyComponent?
• Which of the following describes data that is passed from a parent component to a child component?
• Which directory contains the JavaScript that will be processed by webpack and is the heart of the React app?
• Which statement describes uncontrolled components in React forms?
• A React component should use 'state' to store information that the component itself can change.
• Which is an example of a JSX callback function usage?
• You cannot call this.setState from the body of this update lifecycle method.
• How do you define a new class-based component?
• Which statement about ReactDOM is true?
• How do you expose imperative methods from a child component to its parent using refs?
• Which statement best describes a React component?