React

Question 1

What is a React component?

Answer 1

A React component is a reusable function or class that returns a UI element, typically as JSX, to render content.

Question 2

What is the difference between a functional and class component?

Answer 2

Functional components are JavaScript functions using hooks for state; class components are ES6 classes with this.state and lifecycle methods.

Question 3

What is JSX in React?

Answer 3

JSX is a syntax extension for JavaScript that looks like HTML and allows embedding UI markup in React code.

Question 4

How does the virtual DOM work in React?

Answer 4

The virtual DOM is an in-memory representation of the real DOM. React compares it with the previous version to compute minimal updates.

Question 5

What is the purpose of useState hook?

Answer 5

useState manages state in functional components, returning a state value and an updater function.

Question 6

What is the difference between useState and useReducer?

Answer 6

useState is for simple state updates; useReducer manages complex state logic with a reducer function.

Question 7

Explain the useEffect hook.

Answer 7

useEffect handles side effects (e.g., API calls, subscriptions) after render.

Question 8

What is a controlled component in React?

Answer 8

A controlled component has its form input value controlled by React state, updated via onChange.

Question 9

What is the purpose of key prop in React?

Answer 9

The key prop uniquely identifies elements in a list, helping React optimize rendering by tracking changes.

Question 10

How does React’s reconciliation process work?

Answer 10

Reconciliation compares the new virtual DOM with the previous one to determine minimal DOM updates.

Question 11

What is the useContext hook, and when is it used?

Answer 11

useContext accesses a React context to share data across components without prop drilling.

Question 12

Explain the purpose of React.memo.

Answer 12

React.memo prevents unnecessary re-renders of functional components by memoizing them.

Question 13

What are React hooks, and why were they introduced?

Answer 13

Hooks are functions (e.g., useState, useEffect) that add state and lifecycle features to functional components.

Question 14

How does useCallback improve performance?

Answer 14

useCallback memoizes a callback function, preventing it from being recreated on re-renders unless dependencies change.

Question 15

What is the difference between useMemo and useCallback?

Answer 15

useMemo memoizes a computed value; useCallback memoizes a function.

Question 16

What is a custom hook in React?

Answer 16

A custom hook is a reusable function that encapsulates hook-based logic.

Question 17

Explain the role of React.Fragment.

Answer 17

React.Fragment groups multiple elements without adding extra DOM nodes.

Question 18

How does error boundary work in React?

Answer 18

An error boundary is a class component that catches JavaScript errors in its child tree.

Question 19

What is lazy loading in React, and how is it implemented?

Answer 19

Lazy loading defers loading of components until needed, using React.lazy and Suspense.

Question 20

How do you optimize a React application’s performance?

Answer 20

Use React.memo, useCallback, useMemo, lazy loading, code splitting, and avoid unnecessary renders.

Question 21

What’s the real purpose of useEffect and how do you avoid infinite loops with it?

Answer 21

Purpose: The useEffect hook in React is used to handle side effects in functional components, such as data fetching, subscriptions, or manually changing the DOM. It runs after the render is committed to the screen. Avoiding Infinite Loops: Infinite loops occur when useEffect re-renders the component continuously due to state or prop changes. To avoid this, specify a dependency array with only the variables the effect depends on. Use an empty array ([]) to run it only once on mount and cleanup on unmount.

Question 22

How is useCallback different from useMemo?

Answer 22

useCallback: Returns a memoized version of a callback function that only changes if its dependencies change. Useful for optimizing child components relying on reference equality. useMemo: Returns a memoized value that only recomputes when dependencies change. Used for caching expensive computations. Key Difference: useCallback memoizes functions, useMemo memoizes values.

Question 23

What are Higher Order Components (HOC)?

Answer 23

Higher Order Components (HOC) are a pattern in React where a function takes a component and returns a new component with additional props or behavior. It’s used for code reuse, logic abstraction, and enhancing components (e.g., with data or authentication). Example: withAuthentication(User) returns a new component that checks auth before rendering User.

Question 24

How do you optimize a React app’s performance – in real-world production code?

Answer 24

Optimization techniques include: using React.memo() to prevent unnecessary re-renders, implementing useCallback and useMemo for performance-critical functions and values, code-splitting with lazy() and Suspense, using production builds (minification, tree-shaking), optimizing images and assets, and profiling with React Developer Tools to identify bottlenecks.

Question 25

How would you test a React component using Jest and React Testing Library?

Answer 25

Use Jest for test running and assertions, and React Testing Library to render components and query the DOM. Example: render(); expect(screen.getByText('Hello')).toBeInTheDocument(); Test props, state changes, event handlers (e.g., fireEvent.click()), and edge cases. Mock API calls with jest.fn() or mock services.

Question 26

What’s the best way to handle global state: Redux, Context API, or Zustand?

Answer 26

Best choice depends on needs: Context API is simple for small apps or passing data without prop drilling. Redux is ideal for complex apps with predictable state management and middleware (e.g., Redux Toolkit). Zustand is lightweight, easy to set up, and great for medium-sized apps with minimal boilerplate. Use Context for basic needs, Redux for scalability, Zustand for simplicity.

Question 27

Why does this code throw an error? And how would you fix it? const [count, setCount] = useState(0) console.log(count.length)

Answer 27

Error: count is a number (0), and numbers don’t have a length property, causing a TypeError. Fix: Check if count is the expected type (e.g., string or array) before accessing length, or convert it if needed: console.log(typeof count === 'string' ? count.length : undefined); or use a string state if length is intended: const [count, setCount] = useState('0');

Question 28

In 2025, do react still need useMemo, useCallback and React.memo to help react avoid re-rendering?

Answer 28

No. React 19 introduced a new compiler that tracks React components into fine-grained reactive units and re-render only the min necessary part of the UI. The React compiler automatically rewrites the components behind the scenes , so we just need to write normal code without the need of useMemo, useCallback and React.memo.

Question 29

Whats a Compiler and what’s different about react 19 new model.

Answer 29

A compiler is a tool that takes code written by developers and transforms it into something faster, optimized or different , before it runs. In general programming: we write code, a compiler converts it to JavaScript for example and the browser runs the final JS. The React compiler is a new buikd-time tool introduced in React 19 that automatically transforms components to be reactive and efficient, without needing useMemo, useCallback and memo() everywhere.