50 React Interview Questions and Answers

React.js is a popular JavaScript library developed by Facebook for building user interfaces, particularly single-page applications. It uses a virtual DOM for efficient rendering and follows a component-based architecture.

JSX is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. It makes React code more readable and expressive. JSX gets compiled to regular JavaScript function calls.

Components are the building blocks of React applications. They are reusable, self-contained pieces of code that return HTML via JSX. Components can be either function-based or class-based.

State is a built-in object in React that stores component-specific data that can change over time. When state updates, React re-renders the component. State is managed using useState hook in functional components.

Props (properties) are read-only inputs passed from parent to child components. They help make components reusable by allowing data to flow through the application in a one-way direction.

Virtual DOM is a lightweight copy of the actual DOM that React uses to improve performance. React compares Virtual DOM with real DOM and updates only the necessary parts, reducing direct manipulation of the DOM.

Hooks are functions that allow functional components to use state and lifecycle features previously only available in class components. Common hooks include useState, useEffect, and useContext.

useEffect is a hook that handles side effects in functional components. It runs after every render and can be used for data fetching, subscriptions, or manually changing the DOM.

React events are named using camelCase and passed as JSX attributes. Event handlers are typically defined as methods within the component and can access component state and props.

Conditional rendering in React allows you to show different content based on conditions using JavaScript operators like if statements or ternary operators within JSX.

Fragments let you group multiple children elements without adding extra nodes to the DOM. They solve the problem of components requiring a single parent element.

React Router is a standard library for routing in React applications. It enables navigation between different components while maintaining single-page application behavior.

Lifecycle methods are special methods that run at different stages of a component's life. Key phases include mounting, updating, and unmounting. In modern React, useEffect often replaces lifecycle methods.

Keys are special attributes that help React identify which items have changed, been added, or been removed in lists. They should be unique among siblings.

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, enabling component re-rendering when state changes.

Redux is a state management library for JavaScript applications, commonly used with React. It maintains application state in a single store, making state management predictable and traceable. It's particularly useful for large applications with complex state logic and data sharing between components.

Context API provides a way to pass data through the component tree without manually passing props at each level. It's ideal for sharing global data like themes, user authentication, or language preferences. It consists of Context.Provider and Context.Consumer components.

React Fiber is a complete rewrite of React's core algorithm. It enables incremental rendering, breaking rendering work into chunks and spreading it over multiple frames. This improves performance by allowing browser to handle high-priority updates first.

HOCs are functions that take a component and return a new enhanced component. They're used for code reuse, adding additional functionality, and cross-cutting concerns like authentication or data fetching. Example: withRouter from React Router.

Pure Components automatically implement shouldComponentUpdate with shallow prop and state comparison. They enhance performance by reducing unnecessary renders. Similar functionality can be achieved in functional components using React.memo.

Code splitting is a technique to split your code into small chunks and load them on demand. It improves application performance by reducing the initial bundle size. React.lazy and Suspense are built-in features for implementing code splitting.

React uses controlled components for form handling, where form data is controlled by React state. The onChange event updates state, while onSubmit handles form submission. Uncontrolled components use refs to access form values directly.

useCallback memoizes functions to prevent unnecessary re-renders in child components. useMemo memoizes computed values to avoid expensive recalculations. Both are optimization hooks used to improve performance in specific scenarios.

Portals provide a way to render children into a DOM node that exists outside the parent component's hierarchy. They're useful for modals, tooltips, and floating menus that need to break out of their container's DOM hierarchy.

Error Boundaries are components that catch JavaScript errors in their child component tree. They prevent the entire app from crashing and can display fallback UI. They're implemented using componentDidCatch or static getDerivedStateFromError.

Suspense is a React feature that lets components wait for something before rendering. It's commonly used with React.lazy for code-splitting and data fetching. It shows a fallback content while the component is loading.

SSR renders React components on the server instead of client browser. It improves initial page load performance and SEO. Next.js is a popular framework that implements SSR for React applications.

React performance optimization involves using Pure Components, memoization (useMemo, useCallback), proper key usage in lists, code splitting, and avoiding unnecessary re-renders through proper state management.

Custom Hooks are JavaScript functions that start with 'use' and can call other hooks. They allow you to extract component logic into reusable functions, sharing stateful logic between components without changing their structure.

Reconciliation is React's process of updating the DOM. It uses diffing algorithm to determine minimal required DOM updates. When state or props change, React creates new virtual DOM, compares it with previous one, and updates only changed nodes.

Server-side state management involves synchronizing server data with client-side state using tools like React Query or SWR. These tools handle caching, background updates, and optimistic updates while maintaining consistency between client and server.

Concurrent Mode enables React to work on multiple state updates simultaneously, pause and resume work as needed, and abort rendering if necessary. It improves user experience by prioritizing urgent updates and maintaining app responsiveness.

Micro-frontends architecture breaks down frontend applications into smaller, independent deployable units. Implementation can use Module Federation, iframes, or custom solutions with shared dependencies and runtime integration.

Advanced React patterns include Compound Components, Render Props, State Reducer, Controlled Props, and Provider Pattern. These patterns solve specific architectural challenges and promote code reusability and maintainability.

React Profiler API and DevTools help identify performance bottlenecks. They measure rendering time, component frequency, and commit phases. This data guides optimization strategies like code splitting or memoization.

React Query is a state management library for server state. It provides automatic background updates, caching, error handling, and optimistic updates. It simplifies data fetching and synchronization with the server.

CSS-in-JS libraries like styled-components or emotion provide component-scoped styling, dynamic theming, and CSS composition. They eliminate global CSS conflicts and enable JavaScript-powered styling logic.

Complex state management uses reducers, context, or external stores. Advanced patterns include state machines, event sourcing, or command pattern. These approaches make state changes predictable and maintainable.

Advanced testing includes integration tests with React Testing Library, E2E with Cypress, visual regression testing, and specialized hooks testing. Mock service workers handle API testing.

Security measures include XSS prevention, proper authentication handling, secure state management, sanitizing user input, and protecting against CSRF. Tools like helmet.js enhance security headers.

Accessibility implementation includes ARIA attributes, keyboard navigation, focus management, and semantic HTML. Testing tools like axe-core ensure compliance with WCAG guidelines.

React Server Components enable server-side rendering with zero client-side JavaScript. They reduce bundle size and enable direct database access while maintaining component-based architecture.

Advanced hook patterns include compound hooks, higher-order hooks, hook factories, and async hooks. These patterns solve complex state management and side effect scenarios.

Complex form handling uses form libraries like Formik or React Hook Form, with validation, dynamic fields, nested forms, and complex state management. Performance optimization is crucial.

React Compiler (React Forget) automatically optimizes re-renders by analyzing component dependencies at build time. It eliminates manual memoization and reduces runtime overhead.

Advanced animations use libraries like Framer Motion or React Spring, with gesture support, shared element transitions, and complex choreography. Performance optimization is critical.

Advanced code splitting uses dynamic imports, route-based splitting, component-based splitting, and prefetching strategies. Webpack and Rollup configurations optimize bundle size.

Advanced architecture patterns include Domain-Driven Design, Clean Architecture, and Hexagonal Architecture adapted for React applications. These patterns improve scalability and maintainability.

Comprehensive error handling includes error boundaries, error tracking services, graceful degradation, and recovery strategies. Global error handling patterns manage application-wide errors.

React Native optimization includes performance profiling, native module optimization, memory management, and platform-specific optimizations. Bridge communication and rendering pipeline optimization are crucial.