React JS interview questions

React is a JavaScript library for building user interfaces, popular for its component-based architecture, virtual DOM for efficient rendering, and unidirectional data flow.

React is a web library for building user interfaces, while React Native is a framework for creating native mobile applications using React principles.

Functional components are JavaScript functions returning JSX, while class components are ES6 classes extending React.Component with a render method and more complex lifecycle methods.

JSX is a syntax extension for JavaScript that allows writing HTML-like code within JavaScript, which gets transpiled to React.createElement() calls.

Components can be created using function declarations, arrow functions, or ES6 classes, returning JSX and potentially receiving props as arguments.

Prop drilling occurs when props are passed through multiple nested components. It can be mitigated using context API, state management libraries like Redux, or component composition.

Pure components are components that render the same output for the same state and props, optimizing performance by preventing unnecessary re-renders.

React fragments allow grouping multiple elements without adding extra DOM nodes, improving performance and maintaining cleaner HTML structure.

Events in React are handled by passing a function as the event handler, typically using camelCase naming like onClick, and using synthetic events that work consistently across browsers.

The virtual DOM is a lightweight copy of the actual DOM, allowing React to perform efficient updates by minimizing direct manipulation of the browser's DOM.

Elements are the smallest building blocks of React apps, while components are reusable, self-contained pieces of code that return elements.

Lifecycle methods include mounting (constructor, render, componentDidMount), updating (shouldComponentUpdate, render, componentDidUpdate), and unmounting (componentWillUnmount).

Reconciliation is React's algorithm for comparing virtual DOM trees and efficiently updating the actual DOM by minimizing rendering operations.

HOCs are functions that take a component and return a new component with additional props or behavior, enabling code reuse and logic abstraction.

Controlled components have their state managed by React, while uncontrolled components manage their own state using refs and traditional DOM methods.

The key prop helps React identify which items have changed, been added, or been removed in lists, improving rendering performance and maintaining component state.

Performance can be optimized using React.memo, useMemo, useCallback, avoiding unnecessary re-renders, and using efficient state management techniques.

React.lazy allows dynamic import of components, while Suspense provides a way to show fallback content while components are being loaded.

Render props is a technique where a component receives a function as a prop that returns a React element, enabling flexible component composition.

Error boundaries are React components that catch JavaScript errors in child component trees, log those errors, and display a fallback UI.

useState is for simple state management, while useReducer is better for complex state logic with multiple sub-values or when the next state depends on the previous one.

Global state can be managed using Context API, Redux, MobX, Recoil, or custom solutions with React hooks like useReducer and useState.

Immutability means not modifying original state directly but creating a new state object, which helps in tracking changes and optimizing performance.

Use functional updates for state that depends on previous state, avoid direct mutations, use spread operator for objects and arrays, and batch state updates.

useState returns an array with the current state value and a setter function, which triggers a re-render when called and maintains state across component renders.

useReducer is ideal for managing complex state logic by defining a reducer function that specifies how state should change based on dispatched actions.

State can be persisted using localStorage, sessionStorage, cookies, or backend storage solutions like IndexedDB or server-side sessions.

Lifting state up means moving shared state to a common ancestor component, allowing multiple child components to access and modify the same state.

Challenges include prop drilling, performance issues, complex state interactions, and maintaining consistent state across components.

Use useEffect for side effects, handle async operations with promises or async/await, and manage complex async state with useReducer or state management libraries.

React Router is a standard routing library for React that enables navigation between components without page reloads, using dynamic, client-side routing.

Link creates basic navigation links, while NavLink provides additional styling options for active links, making it easier to highlight current navigation items.

Protected routes are implemented by creating a wrapper component that checks authentication status and redirects unauthenticated users to a login page.

Route parameters are dynamic segments in the URL path that can be accessed using useParams hook, allowing dynamic content rendering based on URL.

Nested routes are created by defining child routes within parent routes, using nested components and Outlet component for rendering child route content.

useNavigate is a hook that returns a function for programmatic navigation, allowing you to navigate between routes imperatively within component logic.

Route guards are functions or components that control access to routes based on conditions like authentication, permissions, or application state.

Lazy loading routes is achieved using React.lazy() and Suspense, dynamically importing route components to improve initial load performance.

HashRouter uses URL hash for routing, suitable for static file hosting, while BrowserRouter uses HTML5 history API for cleaner URLs, requiring server configuration.

Implement a catch-all route using path='*' that renders a NotFound component when no other routes match the current URL.

useEffect handles side effects in functional components, such as data fetching, subscriptions, or manually changing the DOM, and can run after render or on specific state changes.

useContext provides a way to consume context in functional components, avoiding prop drilling and enabling easier sharing of global data or themes.

useMemo memoizes expensive computations, returning cached results if dependencies haven't changed, preventing unnecessary recalculations during re-renders.

useCallback returns a memoized version of a callback function, preventing unnecessary re-renders of child components that depend on that callback.

Custom hooks are JavaScript functions starting with 'use' that allow extracting component logic into reusable functions, promoting code reuse and abstraction.

Combine useReducer and useContext to create a global state management solution, dispatching actions and consuming state across multiple components.

Hooks must be called at the top level of functional components, not inside loops, conditions, or nested functions, and only called from React function components or custom hooks.

useRef returns a mutable ref object that persists across renders, useful for accessing DOM elements directly or storing mutable values without causing re-renders.

useLayoutEffect is similar to useEffect but fires synchronously after all DOM mutations, useful for measuring layout or performing synchronous rendering updates.

useEffect runs asynchronously after render, while useLayoutEffect runs synchronously before browser paint, making it suitable for DOM measurements and synchronous updates.

Use fetch API, Axios, or libraries like React Query, typically within useEffect hook, managing loading states, error handling, and data fetching lifecycle.

REST uses multiple endpoints with predefined responses, while GraphQL allows clients to request specific data, reducing over-fetching and under-fetching.

Use async/await, implement error boundaries, create custom hooks for data fetching, use loading and error states, and consider caching mechanisms.

Use libraries like React Query, SWR, or implement custom caching solutions using localStorage, in-memory caching, or backend-provided cache headers.

Server-side data fetching involves retrieving data on the server before rendering, improving initial load performance and SEO for React applications.

Use Promise.all() for parallel requests, implement request cancellation with AbortController, and manage race conditions using state and loading flags.

Interceptors in libraries like Axios allow modifying requests or responses globally, useful for adding authentication tokens, handling errors, or logging.

Challenges include managing loading states, handling errors, preventing unnecessary re-renders, managing request cancellation, and maintaining clean, scalable code.

Use state management for page numbers, implement offset or cursor-based pagination, and create reusable hooks or components for handling paginated data.

GraphQL is a query language allowing clients to request exactly the data they need, reducing network overhead and providing more flexible, efficient data fetching.

Store JWT tokens in secure storage like HttpOnly cookies, implement interceptors for automatic token inclusion, and create protected routes with authentication checks.

Use HTTPS, implement proper authentication, validate and sanitize user inputs, use secure storage for tokens, and protect against XSS and CSRF attacks.

OAuth 2.0 involves redirecting users to an authorization server, obtaining access tokens, and using them to access protected resources with minimal exposure of user credentials.

Implement an interceptor that checks token expiration, requests a new token using a refresh token, and automatically updates the stored authentication credentials.

Risks include token storage vulnerabilities, exposure of sensitive information, potential token theft, and lack of server-side validation.

Store user roles in tokens or retrieve them from the backend, create higher-order components or hooks that check user permissions before rendering components.

Prevent XSS by using React's built-in escaping, avoiding dangerouslySetInnerHTML, implementing content security policies, and sanitizing user inputs.

MFA requires users to provide two or more verification factors to gain access, enhancing security beyond traditional username and password authentication.

Use time-limited, single-use tokens sent via secure channels, implement rate limiting, and require additional verification during the password reset process.

Implement secure session management, use short-lived tokens, provide logout functionality, handle token expiration, and consider device and location-based authentication.

Use React.memo, useMemo, useCallback, code splitting, lazy loading, minimizing re-renders, and implementing efficient state management strategies.

Use React DevTools Profiler, Chrome Performance tab, Lighthouse, and performance monitoring libraries to identify and resolve performance bottlenecks.

Code splitting involves dynamically importing components or routes, reducing initial bundle size and improving application load time using React.lazy and Suspense.

Memoization caches expensive function results, preventing unnecessary recalculations and re-renders by returning cached values when inputs remain unchanged.

Virtual lists render only visible items in a large dataset, reducing memory usage and improving rendering performance for long lists or tables.

Use tree shaking, code splitting, lazy loading, minimize dependencies, compress assets, and use production builds with minification.

Unnecessary re-renders occur when components update without meaningful changes, consuming CPU resources and degrading application responsiveness.

Use key prop for efficient updates, implement shouldComponentUpdate or React.memo, consider windowing libraries for large lists, and minimize complex computations.

React Profiler is a performance measurement tool that records rendering duration, helping identify performance bottlenecks and optimize component render times.

Use responsive images, implement lazy loading, compress assets, use modern image formats, leverage browser caching, and consider using CDNs for static assets.

SSR renders React components on the server, improving initial load performance, SEO, and providing faster first contentful paint compared to client-side rendering.

Next.js is a React framework providing SSR, static site generation, API routes, automatic code splitting, and built-in performance optimizations.

SSG pre-renders pages at build time, generating static HTML files that can be served directly, improving performance and reducing server load.

Server-Side Rendering (SSR) generates HTML on the server, while Client-Side Rendering (CSR) renders content in the browser, each with different performance and SEO implications.

Use getServerSideProps for SSR, getStaticProps for SSG, getStaticPaths for dynamic routes, and client-side data fetching with SWR or React Query.

ISR allows updating static pages after build time without rebuilding the entire site, providing a balance between static and dynamic content generation.

API routes enable creating serverless functions within the Next.js application, allowing backend logic and data fetching without a separate server.

Implement authentication using middleware, server-side session management, JWT tokens, and integrate with authentication providers like Auth0 or Firebase.

Next.js offers automatic code splitting, image optimization, built-in CSS support, prefetching, and optimized routing for improved web application performance.

Hydration is the process of attaching event listeners to server-rendered HTML, making static content interactive by reusing the server-rendered markup.