Which syntax can be used as a shorthand to declare React Fragments?

This test evaluates in-depth knowledge of React concepts, hooks, components, and best practices critical for senior React developers.

A JavaScript library for building user interfaces with component-based architecture, virtual DOM, one-way data binding, and a strong ecosystem.

A CSS framework for styling websites with built-in responsive grid and custom animations.

A server-side rendering tool primarily used for generating static HTML pages.

A database system optimized for JSON data storage and retrieval.

What is React, and what are its key benefits?

A Node is anything React can render; an Element is an immutable object describing UI; a Component is a function or class returning Nodes.

A Node is a class component only; an Element is a DOM node; a Component is a string or number.

A Node is a JavaScript string; an Element is a React hook; a Component is a JSX tag.

A Node is a CSS selector; an Element is an HTML element; a Component is a DOM API.

What is the difference between a React Node, React Element, and a React Component?

A syntax extension for JavaScript allowing HTML-like code that compiles into React.createElement calls.

An alternative scripting language that replaces JavaScript entirely in React projects.

A CSS preprocessor that styles React components dynamically.

A database query language embedded in React for data fetching.

What is JSX and how does it work in React?

State is owned and modifiable by the component; props are immutable data passed from parent components.

Props store internal data; state passes external information from parents.

State is used only in class components; props are only for functional components.

State is immutable; props can be changed arbitrarily by the component.

What is the difference between state and props in React?

To uniquely identify each child among its siblings, enabling correct component matching and efficient DOM updates.

To define CSS styling priority for list items.

To specify the order in which components are rendered on the page.

To map event handlers to list children automatically.

What is the purpose of the key prop in React lists?

Incorrect reconciliation when items reorder or change, causing stale state and improper UI updates.

Improved performance because indices are always unique globally.

Prevents components from re-rendering unnecessarily under all circumstances.

Automatically resets component state when any list modification occurs.

What are the consequences of using array indices as keys in React lists?

Controlled components have their value driven by React state; uncontrolled components manage their own state via the DOM.

Controlled components are only class-based; uncontrolled components are functional.

Controlled components don’t handle events; uncontrolled components handle all user inputs.

Controlled components lack validation; uncontrolled components have built-in form validation.

What is the difference between controlled and uncontrolled React components?

Passing new object/array values each render causing unnecessary re-renders and misusing context as a state manager.

Context automatically memoizes values, eliminating the need for optimization.

Context forbids sharing data between sibling components under any circumstances.

Using multiple contexts always improves performance without drawbacks.

What are some common pitfalls of using context in React?

They allow using state and lifecycle features inside functional components, simplifying code and enabling reusable logic.

Hooks are deprecated in favor of class-based components and higher-order components.

Hooks automatically generate UI elements without developers writing JSX.

Hooks exclusively handle server-side rendering logic in React.

What are the benefits of using React hooks?

Always call hooks only at the top level of functional components or custom hooks, never inside conditions or loops, and only from React functions.

Hooks can be called anywhere, including inside nested functions and conditionals.

Hooks must be called only inside class components.

Hooks can be called from any JavaScript file, even outside React.

useEffect runs asynchronously after paint; useLayoutEffect runs synchronously before paint, blocking rendering.

useEffect blocks rendering; useLayoutEffect runs after user interactions.

useEffect is only for data fetching; useLayoutEffect is only for animations.

useEffect runs only once; useLayoutEffect runs on every render.

What is the difference between useEffect and useLayoutEffect in React?

To update state based on the latest previous state value, preventing bugs in asynchronous or multiple setState calls.

To reset the component state to its initial value.

To perform side effects after state updates.

To batch multiple state updates into a single render explicitly.

What is the purpose of the functional callback form of setState in React, and when should it be used?

It controls when the effect re-runs by specifying variables to watch for changes; an empty array runs once after mount.

It determines the order in which multiple useEffect hooks execute.

It stores the effect’s cleanup function.

It limits how many concurrent effects can run at the same time.

What does the dependency array of useEffect control?

To apply all changes directly to the actual DOM immediately

To compare the new and previous virtual DOM and update the actual DOM efficiently

To prevent components from rendering more than once

What is the primary reason React uses a virtual DOM during re-rendering?

Which React feature allows grouping multiple elements without adding extra nodes to the DOM?

Because function components could not receive refs directly

Because forwardRef() improved state management

Because it allowed components to subscribe to context

Because it enabled asynchronous rendering

Before React 19, why was forwardRef() commonly used in function components?

By reassigning the state to its previous value

By calling the component's render method manually

How can you force a React component to reset its internal state completely?

Because React depends on state reference changes to detect updates

Because mutating state triggers automatic re-renders

Why is mutating state directly discouraged in React?

What method do error boundaries in React use to render fallback UI after an error is caught?

Class components that implement getDerivedStateFromError

Which of the following React components can act as an error boundary?

Jest or Vitest with React Testing Library

Which testing tools are recommended for testing React components effectively?

It allows simulating browser events exactly as fireEvent does

User-event simulates more realistic user interactions compared to fireEvent

It does not require Jest for running tests

It is faster but less accurate than fireEvent

What advantage does React Testing Library offer over fireEvent for user interactions?

How can you mock network requests effectively while testing React applications?

onUncaughtError, onCaughtError, onRecoverableError

What new root-level options were introduced in React 19 to handle errors globally?

React will automatically detect and update the UI

Dependency checks like React.memo and useEffect will fail to detect changes

In React, what is the consequence of mutating state directly on hooks like useState or useReducer?

Unmount and remount the component manually

What is the recommended way to reset specific parts of a component's state when using useReducer?

Питання 25 з 27