Question 1

What is React and what problems does it solve?

Accepted Answer

1) React is a UI library. 2) Solves the problem of declarative interface description. 3) UI = function of state. 4) Simplifies component composition. 5) Works well with the ecosystem (Router, state, build).

Question 2

How does React differ from a framework?

Accepted Answer

1) React is only the UI layer. 2) Routing/data/architecture are chosen separately. 3) Frameworks (Next/Remix) impose more rules. 4) React is more flexible but requires decisions. 5) Larger projects often choose a framework.

Question 3

What is JSX and how does it work?

Accepted Answer

1) JSX is a syntax similar to HTML in JS. 2) Compiled into React.createElement calls. 3) You can write expressions {expr} inside. 4) Attributes are props. 5) Must have one root element (or Fragment).

Question 4

Why is the key prop needed in lists?

Accepted Answer

1) key helps React match elements between renders. 2) Speeds up diff and reduces bugs. 3) key should be stable, not an index (if list changes). 4) Better to use id from data. 5) Incorrect key causes 'jumping' state.

Question 5

What is a component and what types of components are there?

Accepted Answer

1) A component is a function/class returning UI. 2) Functional components are standard today. 3) Class components are found in legacy code. 4) Components are 'containers' and 'presentational'. 5) Composition is more important than inheritance.

Question 6

What are props and how to use them correctly?

Accepted Answer

1) props are input data for a component. 2) props are immutable (read-only). 3) Pass callbacks to change behavior. 4) Keep props minimal and clear. 5) Use default values via function parameters.

Question 7

What is state and when is it needed?

Accepted Answer

1) state is internal component state. 2) Use for data that changes over time. 3) Keep state as close as possible to where it's used. 4) Do not duplicate computed data in state. 5) For shared state — lift up or use a store.

Question 8

How does useState work and why is setState asynchronous?

Accepted Answer

1) useState returns a value and a setter. 2) setState schedules an update and re-render. 3) Updates can be batched. 4) To depend on the previous value, use a function: setX(prev => ...). 5) Do not rely on instant change after setState.

Question 9

How to update objects and arrays in state without mutations?

Accepted Answer

1) Do not mutate state directly. 2) Object: setS(prev => ({ ...prev, a: 1 })). 3) Array: setA(prev => [...prev, item]). 4) For deletion: filter. 5) For complex structures, you can use immer.

Question 10

What is derived state and why is it harmful?

Accepted Answer

1) Derived state is when state duplicates a computed value. 2) It leads to desynchronization. 3) It's better to compute via useMemo or directly in render. 4) Store the source of truth once. 5) Exception — when you need to 'fix' a value in time.

Question 11

What is lifting state up and when should you do it?

Accepted Answer

1) Moving state to a common parent. 2) Needed when multiple components need a single source of truth. 3) Parent holds state and passes props down. 4) Children call callbacks for changes. 5) Alternative — context/store if the tree is large.

Question 12

How does useEffect work and what is it used for?

Accepted Answer

1) useEffect performs side effects after rendering. 2) Suitable for subscriptions, requests, DOM manipulation. 3) Dependencies are set with an array deps. 4) Returning a function — cleanup. 5) Do not use useEffect for computing derived state.

Question 13

How to correctly specify dependencies for useEffect?

Accepted Answer

1) List all values used inside the effect. 2) Do not disable eslint rules without reason. 3) Use useCallback for functions. 4) Use useMemo for objects. 5) If the effect is too 'noisy' — reconsider the architecture.

Question 14

What is the difference between useEffect and useLayoutEffect?

Accepted Answer

1) useEffect runs after the browser paints. 2) useLayoutEffect runs synchronously after DOM mutations, before painting. 3) useLayoutEffect can block rendering. 4) Use it for measurements/UI flickering. 5) In most cases, useEffect is sufficient.

Question 15

Why should hooks not be called conditionally?

Accepted Answer

1) React relies on the order of hook calls. 2) Conditional calls break the order. 3) This causes bugs and incorrect state. 4) Rule: hooks only at the top level of the component. 5) Move condition inside hook/effect.

Question 16

What is useMemo and when is it useful?

Accepted Answer

1) useMemo caches the result of a computation. 2) Needed for expensive calculations or stable references. 3) Does not replace rendering optimization everywhere. 4) Watch deps, otherwise it will be stale. 5) Often useful before passing to memo/effects.

Question 17

What is useCallback and how does it differ from useMemo?

Accepted Answer

1) useCallback caches a function. 2) useMemo caches a value. 3) useCallback(fn, deps) ~= useMemo(() => fn, deps). 4) Useful for passing callbacks to memo components. 5) Do not overuse: it also has overhead.

Question 18

When does memo really help, and when does it not?

Accepted Answer

1) Memo is useful if a component re-renders frequently with the same props. 2) If props always change (new objects) — little benefit. 3) Optimization requires measurements (profile). 4) Memo increases complexity. 5) First, optimize architecture and state.

Question 19

What is React.memo and how does it work?

Accepted Answer

1) Wraps a component and skips re-rendering if props haven't changed (shallow). 2) Shallow comparison. 3) You can pass a custom comparison function. 4) Stabilize props (useMemo/useCallback). 5) Don't forget about context: it will still cause re-rendering.

Question 20

Why is it dangerous to optimize React 'by eye'?

Accepted Answer

1) The problem is often not where it seems. 2) useMemo/useCallback can worsen performance. 3) You need React DevTools profiler. 4) Measure before/after. 5) Optimization should be justified.

Question 21

What is reconciliation in React?

Accepted Answer

1) It's the algorithm for comparing the old and new tree. 2) React tries to minimize DOM changes. 3) key in lists affects reconciliation. 4) Changing component type => unmount/mount. 5) Tree structure is important for performance.

Question 22

What is virtual DOM and why is it not 'magic'?

Accepted Answer

1) Virtual DOM is an object representation of UI. 2) React compares trees and applies patches. 3) The gain is not in speed, but in the convenience of declarative UI. 4) The real cost is rendering and comparison. 5) Proper state management is more important.

Question 23

Why does a component re-render and how to understand it?

Accepted Answer

1) Re-rendering due to changes in state/props/context. 2) Parent re-render doesn't always mean DOM update. 3) Use React DevTools Profiler. 4) For debugging, temporarily add logs. 5) Check stability of props and state selectors.

Question 24

What are controlled components (controlled forms)?

Accepted Answer

1) Input field managed by state. 2) value and onChange link UI and data. 3) Provides validation and control. 4) Can be slower on large forms. 5) Alternative — uncontrolled + refs/forms and libraries.

Question 25

How to make uncontrolled input and when is it justified?

Accepted Answer

1) Use defaultValue instead of value. 2) Read value via ref on submit. 3) Suitable for large forms where performance matters. 4) Do validation on submit/blur. 5) React Hook Form often uses this approach.

Question 26

How to handle events correctly in React?

Accepted Answer

1) Events are SyntheticEvent (most cases). 2) Use onClick/onChange, etc. 3) Don't call handler immediately: onClick={() => ...}. 4) For performance, define handler in a function. 5) Remember about bubbling and stopPropagation.

Question 27

How does SyntheticEvent differ from native events?

Accepted Answer

1) It's a wrapper over the native event. 2) Provides a unified API across browsers. 3) In older versions, pooling was used, now less of an issue. 4) event.nativeEvent gives the native event. 5) Usually, SyntheticEvent is enough.

Question 28

How to work with refs properly and when are they needed?

Accepted Answer

1) refs provide access to the DOM/instance. 2) Needed for focus, measurements, integration with libraries. 3) Do not use refs for data instead of state. 4) useRef stores a mutable value without causing re-render. 5) To forward a ref, use forwardRef.

Question 29

What is forwardRef and when is it needed?

Accepted Answer

1) forwardRef allows passing a ref inside a component. 2) Needed for component libraries. 3) Simplifies focus and integrations. 4) Try not to leak DOM details unnecessarily. 5) Type the ref explicitly in TS.

Question 30

What is useImperativeHandle and should you use it?

Accepted Answer

1) Allows customizing the ref API. 2) Useful for controls (focus, reset). 3) This is an imperative approach, use rarely. 4) Prefer declarative props. 5) If used — document the methods.

Question 31

What is the Context API and what are its limitations?

Accepted Answer

1) Context passes data through the tree without props. 2) Good for theme, locale, auth. 3) Frequent context changes can rerender many components. 4) Use separate contexts and memoization. 5) For complex cases, a store with selectors is better.

Question 32

How to avoid unnecessary rerenders due to Context?

Accepted Answer

1) Create multiple contexts instead of one large. 2) Pass primitives or memoized objects. 3) Wrap providers closer to consumers. 4) Move logic to store/selectors. 5) Check with a profiler.

Question 33

What are custom hooks and why are they needed?

Accepted Answer

1) These are functions that use hooks and reuse logic. 2) They simplify behavior composition. 3) They make components thin. 4) The name should start with use. 5) Follow hook rules inside.

Question 34

How to design custom hooks to make them reusable?

Accepted Answer

1) Keep the API minimal: inputs and outputs. 2) Do not tie the hook to a specific UI. 3) Return data and callbacks. 4) Do not hide side effects. 5) Document expectations and edge cases.

Question 35

What is React Router and what alternatives are there?

Accepted Answer

1) React Router is a popular router for SPA. 2) Alternatives: Next.js routing, Remix routing. 3) For mobile: React Navigation. 4) Choice depends on SSR/SPA and requirements. 5) In large projects, data APIs and loaders are important.

Question 36

What are SSR, CSR, and SSG (in the context of React)?

Accepted Answer

1) CSR — rendering in the browser. 2) SSR — HTML is rendered on the server. 3) SSG — HTML is generated at build time. 4) SSR improves SEO and FCP but is more complex. 5) SSG is good for content but requires data regeneration.

Question 37

What is hydration and what problems can occur?

Accepted Answer

1) Hydration — 'bringing to life' SSR HTML in the browser. 2) React compares the markup and attaches handlers. 3) Mismatch of data => hydration mismatch. 4) Avoid random values during initial render (Date.now). 5) Separate server/client components (in Next).

Question 38

Why does hydration mismatch happen and how to fix it?

Accepted Answer

1) Different HTML on server and client. 2) Reasons: time, random, access to window, conditional branches. 3) Use client-only rendering via useEffect or dynamic import. 4) Keep data consistent (prefetch). 5) Check environment (typeof window).

Question 39

How to safely use window/document in React?

Accepted Answer

1) In SSR, window is unavailable. 2) Access inside useEffect or check typeof window !== 'undefined'. 3) Use subscriptions and cleanup for window sizes. 4) Consider SSR for cookies/localStorage. 5) In Next 13+, use client components.

Question 40

How to work with data fetching in React?

Accepted Answer

1) Basic: fetch in effect + state. 2) Important: cancel requests (AbortController). 3) Handle loading/error. 4) For cache/re-fetch, better TanStack Query. 5) In SSR frameworks, use server loaders.

Question 41

How to properly handle loading/error/empty states?

Accepted Answer

1) Show skeleton/spinner for loading. 2) For error — clear message + retry. 3) For empty — separate UI and CTA. 4) Don't mix data fetching logic and display. 5) Keep state explicit (discriminated union).

Question 42

How to cancel requests and avoid race conditions?

Accepted Answer

1) Use AbortController and signal in fetch. 2) Call abort in cleanup effect. 3) Store requestId and ignore outdated responses. 4) Use libraries with request deduplication. 5) Don't call setState after unmount.

Question 43

What is Suspense and what is it used for?

Accepted Answer

1) Suspense allows showing fallback while resource loads. 2) Mainly used for lazy and data in frameworks. 3) Suspense boundary localizes loading. 4) Doesn't replace error handling — need Error Boundary. 5) Ecosystem support depends on data fetching stack.

Question 44

How does React.lazy and code splitting work?

Accepted Answer

1) React.lazy loads component dynamically. 2) Use with <Suspense fallback>. 3) Split by routes/heavy widgets. 4) Don't split too finely — many chunks are harmful. 5) Enable analysis in bundler (bundle analyzer).

Question 45

What is Error Boundary and why is it needed?

Accepted Answer

1) Catches errors during rendering/lifecycle. 2) Doesn't catch errors in async/handlers. 3) Shows fallback UI. 4) Implemented via class component or library. 5) Add logging (Sentry) in componentDidCatch.

Question 46

How to create forms and validation in React?

Accepted Answer

1) Small forms with useState. 2) Larger ones — better React Hook Form. 3) Validate with schema (zod/yup). 4) For UX: validate onBlur or debounce. 5) Show errors near field and overall.

Question 47

What is React Hook Form and why is it popular?

Accepted Answer

1) Minimizes re-renders. 2) Uses uncontrolled inputs by default. 3) Easy integration with schemas. 4) Scales well for large forms. 5) Less boilerplate than manual solutions.

Question 48

How to implement debounce for search/input?

Accepted Answer

1) Use setTimeout/clearTimeout in useEffect. 2) Or the lodash.debounce library. 3) Store raw value separately from the applied one. 4) Consider request cancellation. 5) Don't forget cleanup.

Question 49

How to manage focus and accessibility (a11y) in React?

Accepted Answer

1) Use semantic elements (button, label). 2) Manage focus via ref. 3) In modals, implement focus trap. 4) Add aria-* attributes only when needed. 5) Test with keyboard and screen reader.

Question 50

How to correctly implement a modal window?

Accepted Answer

1) Render via portal (at the end of body). 2) Close on Esc and overlay click. 3) Block scroll of the background. 4) Maintain focus trap and return focus. 5) Handle accessibility (role='dialog').

Question 51

What is a Portal and when is it needed?

Accepted Answer

1) Portal renders children into another DOM node. 2) Needed for modals, tooltips, dropdown menus. 3) Avoids overflow/z-index issues. 4) Events still bubble through React tree. 5) Watch for accessibility.

Question 52

How does batch updates work in React?

Accepted Answer

1) React can combine multiple setState calls into one render. 2) This reduces re-renders. 3) In React 18, batching works even in async contexts. 4) Don't rely on the order of setters without functional form. 5) For synchronous reads, use useEffect after render.

Question 53

What is concurrent rendering in React 18?

Accepted Answer

1) The ability to interrupt and continue rendering. 2) Improves UI responsiveness. 3) Doesn't mean automatic acceleration. 4) Requires correct priorities (transitions). 5) Possible bugs with incompatible libraries.

Question 54

What is useTransition and when is it useful?

Accepted Answer

1) Allows marking updates as low priority. 2) UI remains responsive during heavy updates. 3) Returns isPending for UI state. 4) Useful for filters/sort toggles. 5) Doesn't replace data optimization.

Question 55

What is useDeferredValue and how does it differ from debounce?

Accepted Answer

1) Deferred value for low priority. 2) Doesn't delay events but allows rendering later. 3) Good for searching large lists. 4) Debounce delays calls, deferred prioritizes rendering. 5) Use consciously in combination.

Question 56

How to properly write keys and identifiers for components?

Accepted Answer

1) key is only needed for lists. 2) Use stable IDs from data. 3) Don't use random/Date.now for key. 4) Don't use index if items can move/delete. 5) Bad key breaks local state preservation.

Question 57

How to work with event handler lifting?

Accepted Answer

1) Handler is stored higher where state exists. 2) Child component calls props.onAction(data). 3) Simplifies testing. 4) Don't pass too many callbacks — group actions. 5) For complex scenarios, use reducer.

Question 58

What is useReducer and when to choose it over useState?

Accepted Answer

1) useReducer is suitable for complex state. 2) When there are many actions and transitions. 3) Simplifies testing (reducer as a pure function). 4) Works well with discriminated unions. 5) Can be used for forms and complex UI.

Question 59

How to design a reducer: actions and types?

Accepted Answer

1) Actions as union: { type: 'add', payload: ... } | .... 2) Do exhaustive check in switch. 3) Keep the reducer pure without side effects. 4) Move side effects to effects or middleware (in store). 5) Write tests for each action.

Question 60

How to avoid prop drilling?

Accepted Answer

1) Lift components closer to each other. 2) Use composition (children) and render props. 3) Use Context for truly global state. 4) Use store for complex shared state. 5) Do not turn Context into a trash heap.

Question 61

What are children and how to use composition?

Accepted Answer

1) children are nested content of a component. 2) Allows building composition (Layout, Card). 3) Makes API flexible. 4) Can be combined with render props. 5) Avoid overly complex abstractions.

Question 62

What are render props and when is it useful?

Accepted Answer

1) This pattern: prop is a function returning UI. 2) Allows sharing logic. 3) Now often replaced by hooks. 4) Useful for library components. 5) Watch out for performance (new function on each render).

Question 63

What are compound components and where are they used?

Accepted Answer

1) A set of related components (Tabs, Menu). 2) Shared state stored in parent component. 3) Children read state via context. 4) Provides convenient API and composition. 5) Requires careful typing and docs.

Question 64

How to type props in React + TypeScript?

Accepted Answer

1) Describe type/interface Props. 2) function C(props: Props) {}. 3) For children: React.ReactNode. 4) For onClick: (e: React.MouseEvent) => void. 5) Do not abuse React.FC if not needed.

React