What is the main reuse mechanism in React besides custom hooks for behavior?

This test evaluates knowledge of advanced React concepts including hydration, portals, debugging, and performance optimization suitable for senior developers.

By using localization libraries like react-i18next or react-intl, setting up translation files, and applying hooks or components to render localized text.

By hardcoding all text strings in different languages into the component files.

By using CSS to translate all text based on language.

Localization is not supported in React by default and requires server-side only solutions.

Simplifies UI by describing what should be rendered rather than how.

Direct manipulation of DOM nodes for performance.

Eliminates the need for state management.

What benefit does the declarative programming model in React provide?

A development tool that activates extra checks and warnings to identify potential problems without affecting production builds.

A mode that disables all React warnings in production.

An API for fetching data in React applications.

A styling framework for React components.

What is React strict mode and what are its benefits?

Comparing the new virtual DOM tree with the previous one.

Skipping updates if the state is the same.

Blocking rendering until all promises resolve.

What does the reconciliation process in React primarily involve?

It should be used for rapidly changing states shared across components.

It is best for values that change rarely, like theme or locale.

It replaces the need for any client-state library.

It prevents all consumers from re-rendering on updates.

What is a key characteristic of React Context regarding how often it should be used to pass changing data?

A parent component exposing related sub-components as part of the API.

A single component that uses inheritance.

Using hooks to share logic between components.

Wrapping components with HOCs for added behavior.

What is a compound component pattern in React?

Functions that take a component and return a new component with added props or behavior, used for reusing component logic.

Components that handle asynchronous data fetching only.

Hooks that replace class components by managing state internally.

Special React components that manage routing in applications.

What are higher order components (HOCs) in React?

Which client-state library would you choose for managing frequently-changing state shared by many unrelated components?

Rendering React components on the server and sending HTML to the client, which is then hydrated for interactivity, improving perceived load time and SEO.

Rendering components only on the client without server involvement.

A tool for styling React components with CSS-in-JS libraries.

Explain server-side rendering (SSR) of React applications and its benefits.

It consists of lightweight JavaScript objects describing the UI.

It is a direct mirror copy of the actual DOM.

It represents the physical browser elements.

It is stored in a database for persistence.

What is a distinguishing factor of the React elements tree compared to the actual DOM tree?

Which tools are specialized for managing server state in React applications?

By splitting context into state and dispatch contexts, memoizing values, wrapping consumers in React.memo, and using selector libraries.

By avoiding context usage entirely and using only local component state.

By hardcoding all values in context and never updating them.

By directly mutating state inside context providers to avoid rerenders.

How would one optimize the performance of React contexts to reduce unnecessary rerenders?

Data flows from parent to child components via props; children cannot mutate props but invoke callbacks to change parent state, resulting in predictable and easier-to-debug updates.

Data flows bidirectionally allowing children and parents to mutate data independently.

Data flows from child components to parent components using global events only.

One-way data flow refers to synchronous data fetching in React applications.

Explain one-way data flow in React and its benefits.

Pre-rendering pages to HTML at build time to serve as static files via CDN for fast loads and SEO, supported by frameworks like Next.js and Gatsby.

Real-time rendering of pages on the client after page load.

Loading React components only when users scroll to them.

A method to compile React components into native apps.

Explain static generation of React applications and its benefits.

An update is scheduled and React may batch multiple state updates for performance.

The component re-renders immediately without any batching.

The state is mutated directly without re-rendering.

Props of the component are updated automatically.

In React, what happens when the setter function from useState is invoked?

An architectural design enforcing unidirectional data flow with dispatcher, stores, actions, and views, making state predictable and easier to debug.

A CSS grid system for responsive layouts.

A testing framework for React components.

What is the Flux pattern and what are its benefits?

By using dedicated data-fetching libraries like TanStack Query, SWR, or RTK Query, or React 19's use() hook with Suspense and error boundaries rather than manual useEffect+fetch.

By fetching data synchronously inside render methods for simplicity.

By avoiding asynchronous loading and hardcoding all data.

By using jQuery AJAX calls exclusively within React components.

How do you handle asynchronous data loading in React applications?

Showing fallback UI during asynchronous operations like lazy loading.

What is React Suspense commonly used for in an application?

A technique to split code into smaller chunks that can be loaded on demand to improve performance.

The process of dividing CSS and JavaScript files into separate folders.

A debugging method to isolate component errors.

A method to uninstall unused npm packages automatically.

What is code splitting in a React application?

A pattern splitting components into presentational (UI-focused) and container (logic and data-fetching) roles, though modern React favors using custom hooks instead of wrapper containers.

A technique for server-side rendering only.

A deprecated method for managing Redux state inside components.

A styling approach that separates CSS and JavaScript files.

What is the presentational vs container component pattern in React?

Which React pattern involves passing components as named props often called slots?

Because all consuming components re-render whenever the context value changes.

Because it doesn’t support nested contexts.

Because it blocks rendering during updates.

Because it forces components to unmount on update.

Why might React Context cause performance issues if misused?

The process of attaching event listeners and making a server-rendered HTML page interactive on the client side.

The process of rendering components only on the server without client interaction.

Compiling React components into native mobile code for better performance.

A debugging tool used for inspecting component trees.

By using React Developer Tools, enabling Strict Mode, leveraging error boundaries, and using console logs and breakpoints.

Only by inspecting the DOM manually and refreshing the browser.

Using server-side logs exclusively without client-side tools.

By rewriting components to class-based only and avoiding hooks.

How do you debug React applications effectively?

Rendering children into a DOM node outside the parent component's hierarchy, useful for modals, tooltips, and dropdowns.

Improving application performance by lazy loading components.

Managing global state across the application.

Rendering components only on the server without hydration.

It breaks rendering work into units, allowing pausing and resuming.

It uses a stack-based approach for rendering.

It synchronously updates the entire DOM tree.

How does the React Fiber reconciler improve the rendering process compared to the previous algorithm?

Which React pattern involves passing a function as children that provides dynamic rendering logic?

Питання 26 з 28