Question 1

What is React and what are its key features?

Accepted Answer

React is a declarative, component-based JavaScript library for building user interfaces, developed by Meta. Key features: Virtual DOM for efficient updates, JSX for HTML-like syntax, component-based architecture, unidirectional data flow, hooks for state and lifecycle, and a rich ecosystem. It's used for building single-page applications (SPAs) and mobile apps (React Native).

Question 2

Explain the difference between a component and a pure component.

Accepted Answer

A component re-renders whenever its parent renders or its state/props change. A PureComponent performs a shallow comparison of props and state; if they haven't changed, it skips re-rendering for performance. It's a base class alternative to React.Component. For functional components, use React.memo for similar optimization.

Question 3

What is the difference between state and props in React?

Accepted Answer

Props (short for properties) are read-only data passed from a parent component to a child component. They are immutable. State is mutable data managed within a component, initially set using useState or this.state. Changing state triggers re-renders. Props are passed down; state is internal.

Question 4

Explain the Virtual DOM and how React uses it.

Accepted Answer

The Virtual DOM is a lightweight, in-memory representation of the Real DOM. React creates a virtual tree, compares it with the previous one (diffing), and calculates the minimal changes needed (reconciliation). It then updates only the changed nodes in the Real DOM, minimizing expensive DOM manipulations and improving performance.

Question 5

What are React hooks and why were they introduced?

Accepted Answer

Hooks are functions that let you use state and lifecycle features in functional components, introduced in React 16.8. They replace class components for stateful logic, enabling better code reuse, cleaner components, and simpler testing. Key hooks: useState, useEffect, useContext, useReducer, useCallback, useMemo, useRef.

Question 6

Explain the useState hook and how to use it.

Accepted Answer

useState is a hook that lets you add state to functional components. It returns an array with the current state value and a function to update it. Syntax: const [count, setCount] = useState(initialState). Updates trigger a re-render. The updater function can accept a new value or a function based on previous state.

Question 7

Explain the useEffect hook and its common use cases.

Accepted Answer

useEffect handles side effects in functional components. It takes a function and an optional dependency array. It runs after every render by default, or only when dependencies change. Common uses: data fetching, subscriptions, timers, DOM manipulation, and cleaning up with a return function.

Question 8

What is the difference between useEffect and useLayoutEffect?

Accepted Answer

useEffect runs asynchronously after the browser paints, not blocking rendering. useLayoutEffect runs synchronously after DOM mutations but before painting, blocking rendering. UseLayoutEffect is for operations that need to measure the DOM or avoid visual flicker; prefer useEffect for most cases.

Question 9

What is the purpose of the dependency array in useEffect?

Accepted Answer

The dependency array tells React when to re-run the effect. If empty ([]), it runs once after mount. If includes values, it runs when any value changes. If omitted, it runs after every render. Proper dependencies prevent stale closures and infinite loops.

Question 10

Explain the useContext hook and when to use it.

Accepted Answer

useContext consumes a context object created by React.createContext. It allows components to subscribe to context changes without prop drilling. Syntax: const value = useContext(MyContext). Use it for global state like theme, user authentication, or language preferences.

Question 11

What is the useReducer hook and when should you use it?

Accepted Answer

useReducer is an alternative to useState for complex state logic. It accepts a reducer function (state, action) => newState and an initial state. It returns the current state and a dispatch function. Use it when state transitions are complex, involve multiple sub-values, or next state depends on previous state.

Question 12

What is the difference between useCallback and useMemo?

Accepted Answer

useCallback returns a memoized function reference, preventing unnecessary re-creation of functions on each render. useMemo returns a memoized value, recalculating only when dependencies change. Use useCallback for functions passed to child components; useMemo for expensive computations.

Question 13

Explain the useRef hook and its common use cases.

Accepted Answer

useRef returns a mutable ref object whose .current property persists across renders without causing re-renders. Use cases: accessing DOM elements directly (refs), storing mutable values (e.g., interval IDs), preserving previous values, and avoiding re-renders for non-UI data.

Question 14

What is the concept of lifting state up in React?

Accepted Answer

Lifting state up involves moving shared state to the closest common ancestor of components that need it. The parent component manages the state and passes it down via props along with callbacks to update it. This ensures a single source of truth and avoids duplication.

Question 15

Explain the difference between controlled and uncontrolled components.

Accepted Answer

A controlled component's value is controlled by React state, typically using onChange handlers to update state. An uncontrolled component manages its own state internally using the DOM (e.g., using refs). Controlled components are preferred for consistency and validation.

Question 16

What is React Router and how does it work?

Accepted Answer

React Router is a library for declarative routing in React applications. It provides components like BrowserRouter, Routes, Route, Link, and useNavigate. It enables navigation between views without page refresh, using the HTML5 History API or hash-based routing.

Question 17

What is the difference between Link and NavLink in React Router?

Accepted Answer

Link provides navigation without refreshing the page. NavLink is a special version that adds styling attributes (activeClassName) when the current route matches its path. NavLink is useful for navigation menus.

Question 18

Explain how to handle forms in React.

Accepted Answer

Forms in React can be controlled (using state to manage input values) or uncontrolled (using refs). Controlled forms provide better control and validation. Handle form submission with onSubmit, and manage state changes via onChange. For validation, use libraries like Formik or React Hook Form.

Question 19

What is the React Context API and how is it different from props?

Accepted Answer

The Context API allows sharing data across the component tree without prop drilling. It creates a context object with a Provider (supplies value) and Consumer (uses value) or useContext hook. Unlike props, which are passed explicitly, context is implicit and can be accessed by deeply nested components.

Question 20

Explain the difference between React Context and Redux.

Accepted Answer

Context is built-in and suitable for simple global state (theme, language). Redux is a state management library with a predictable state container, middleware, dev tools, and time-travel debugging. Redux is better for complex state, frequent updates, and larger apps. Context can cause unnecessary re-renders; Redux optimizes updates.

Question 21

What are higher-order components (HOCs) and why are they used?

Accepted Answer

A Higher-Order Component is a function that takes a component and returns a new component with enhanced functionality. They are used for code reuse, cross-cutting concerns (like authentication, logging, data fetching). Hooks have largely replaced HOCs, but they are still used in legacy code.

Question 22

Explain the concept of render props in React.

Accepted Answer

Render props is a technique where a component accepts a function as a prop to render content, allowing dynamic rendering. Example: } />. It's an alternative to HOCs for sharing code.

Question 23

What is the difference between a functional component and a class component?

Accepted Answer

Functional components are simpler, use hooks for state and effects, and are preferred in modern React. Class components use this.state, this.setState, lifecycle methods (componentDidMount, etc.), and are still supported but legacy. Functional components have better performance and less boilerplate.

Question 24

Explain the React lifecycle methods (class components).

Accepted Answer

Lifecycle phases: Mounting (constructor, render, componentDidMount), Updating (shouldComponentUpdate, render, componentDidUpdate), Unmounting (componentWillUnmount). Error boundaries: componentDidCatch. Hooks replace these with useEffect, useState, and useLayoutEffect.

Question 25

What is the `key` prop and why is it important in lists?

Accepted Answer

The `key` prop helps React identify which items have changed, added, or removed. It should be a stable, unique identifier for each element in the list. It improves performance by enabling efficient reconciliation. Using indexes as keys is discouraged if the list can reorder.

Question 26

Explain the concept of reconciliation in React.

Accepted Answer

Reconciliation is the process of updating the DOM to match the virtual DOM. React diffing algorithm compares the current virtual DOM with the previous one, determines the minimal set of changes, and applies them efficiently. Keys help with this process.

Question 27

What is the purpose of React's `memo` (React.memo)?

Accepted Answer

React.memo is a higher-order component that memoizes a functional component. It prevents re-rendering if the props have not changed (shallow comparison). It's a performance optimization for components that receive the same props frequently.

Question 28

Explain the `useCallback` and `useMemo` hooks with an example.

Accepted Answer

useCallback returns a memoized function: const handleClick = useCallback(() => { doSomething() }, [deps]). useMemo returns a memoized value: const computed = useMemo(() => expensiveCalc(a,b), [a,b]). Both are used to optimize performance by avoiding unnecessary recalculations/recreations.

Question 29

What is the useImperativeHandle hook and when is it used?

Accepted Answer

useImperativeHandle customizes the instance value exposed when a component uses ref. It's often used with forwardRef to expose imperative methods (like focus) to parent components. Example: useImperativeHandle(ref, () => ({ focus() { input.current.focus(); } })).

Question 30

Explain the concept of error boundaries in React.

Accepted Answer

Error boundaries are React components that catch JavaScript errors in their child component tree, log them, and display a fallback UI. They are implemented as class components with componentDidCatch and getDerivedStateFromError. They do not catch errors in event handlers, asynchronous code, or server-side rendering.

Question 31

What are fragments and why are they used?

Accepted Answer

Fragments (<>... or ) allow grouping a list of children without adding extra nodes to the DOM. They are used to return multiple elements from a component without creating unnecessary wrapper divs, improving performance and avoiding layout issues.

Question 32

Explain the concept of portals in React.

Accepted Answer

Portals allow rendering children into a DOM node outside the parent component's hierarchy, typically for modals, tooltips, or overlays. They are created using ReactDOM.createPortal(child, container). They preserve event bubbling and context.

Question 33

What are refs in React and how do you use them?

Accepted Answer

Refs provide a way to access DOM nodes or React elements directly. They are created with useRef or createRef. Use cases: focusing inputs, measuring DOM size, integrating third-party libraries. Avoid overusing refs for state management.

Question 34

Explain the concept of code splitting in React.

Accepted Answer

Code splitting is a technique to split your JavaScript bundle into smaller chunks that can be loaded on demand, reducing initial load time. In React, use React.lazy (dynamic import) with Suspense to load components lazily. This improves performance.

Question 35

What is the Suspense component and how is it used?

Accepted Answer

Suspense is a React component that displays a fallback UI while waiting for asynchronous data or lazy-loaded components to be ready. Used with React.lazy for code splitting or with data fetching frameworks like Relay or Next.js. Example: }>.

Question 36

What are the best practices for performance optimization in React?

Accepted Answer

Use React.memo, useCallback, and useMemo to prevent unnecessary re-renders. Implement virtualized lists for large datasets. Avoid anonymous functions in render. Lazy load components. Use production builds. Optimize images and assets. Monitor with React DevTools.

Question 37

Explain the difference between shallow rendering and deep rendering in tests.

Accepted Answer

Shallow rendering (from Enzyme or React Testing Library) renders a component without its children, isolating it for unit testing. Deep rendering (mount) renders the full component tree, useful for integration tests. React Testing Library prefers rendering the full component.

Question 38

What are the common testing libraries for React?

Accepted Answer

Common libraries: React Testing Library (recommended, encourages testing user behavior), Jest (test runner), Enzyme (older, less preferred), Cypress (E2E testing), and React Test Renderer (snapshot testing).

Question 39

What is the difference between React Native and React?

Accepted Answer

React is for building web applications using HTML and CSS. React Native is for building native mobile apps using native components (iOS/Android). Both share the same React concepts, but React Native uses native APIs instead of the DOM.

Question 40

Explain the concept of server-side rendering (SSR) in React.

Accepted Answer

Server-side rendering renders React components on the server and sends the full HTML to the client, improving SEO and initial load performance. It requires frameworks like Next.js or Gatsby. Hydration then attaches event listeners client-side.

Question 41

What is Next.js and how does it relate to React?

Accepted Answer

Next.js is a React framework that provides server-side rendering, static site generation, API routes, file-based routing, and more. It simplifies building production-ready React applications with built-in optimizations and SEO support.

Question 42

Explain the concept of higher-order components (HOCs) vs hooks.

Accepted Answer

HOCs are functions that wrap components to add functionality, while hooks are functions that let you use state and effects. Hooks are simpler, composable, and more flexible. HOCs can cause naming collisions and wrapper hell; hooks avoid these issues.

Question 43

What is the difference between `useEffect` and `useLayoutEffect` in terms of execution?

Accepted Answer

useEffect runs after the browser paint, asynchronously. useLayoutEffect runs synchronously before the browser paints, after DOM mutations. useLayoutEffect can block visual updates, so it's used for operations that need to measure the DOM before painting.

Question 44

Explain the `useDebugValue` hook.

Accepted Answer

useDebugValue is used to display a label for custom hooks in React DevTools. It helps with debugging by providing more context. Example: useDebugValue(value ? 'LoggedIn' : 'LoggedOut').

Question 45

What is the `useTransition` hook in React 18?

Accepted Answer

useTransition is a hook that lets you mark state updates as non-urgent, allowing React to interrupt rendering for more urgent updates. It returns a pending boolean and a startTransition function. Used for improving perceived performance during expensive UI updates.

Question 46

What is the `useDeferredValue` hook in React 18?

Accepted Answer

useDeferredValue returns a deferred version of a value that may lag behind, allowing React to prioritize more urgent updates. It's useful for deferring expensive re-renders while keeping the UI responsive.

Question 47

Explain the concept of React Query (TanStack Query) and its benefits.

Accepted Answer

React Query is a library for managing server state in React. It simplifies data fetching, caching, background updates, and pagination. Benefits: automatic caching, deduplication, retries, and offline support. It reduces boilerplate and improves performance.

Question 48

What are the common anti-patterns in React?

Accepted Answer

Common anti-patterns: using indexes as keys, mutating state directly, passing unnecessary props, not using keys in lists, overusing refs, large components, and not handling loading/error states. Follow best practices to avoid these.

Question 49

Explain the concept of server components in React (React Server Components).

Accepted Answer

React Server Components (RSC) allow rendering components on the server, sending only the UI description to the client. They reduce bundle size, improve performance, and enable direct data access. They are used in frameworks like Next.js 13+.

Question 50

What is the future of React?

Accepted Answer

The future of React includes increased adoption of Server Components and concurrent features, better performance (React Compiler), improved developer experience, and deeper integration with frameworks (Next.js). React continues to evolve with a focus on simplicity and performance.

React JS Interview Q&A