1. What is React?

React is an open-source JavaScript library for building user interfaces, especially single-page applications. It lets you create reusable UI components.

👉 Read More

2. What are the key features of React?

Key features include Virtual DOM, Component-based architecture, JSX, One-way data binding, and Declarative programming.

👉 Read More

3. What is JSX?

JSX is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. It makes React components more readable.

👉 Read More

4. What is Virtual DOM?

Virtual DOM is a JavaScript representation of the real DOM. React uses it to optimize updates by comparing changes and updating only what's necessary.

👉 Read More

5. What are React components?

Components are reusable pieces of UI that can be either functional or class-based. They accept props and return JSX elements.

👉 Read More

6. What is the difference between functional and class components?

Functional components are simpler functions that return JSX, while class components extend React.Component and have lifecycle methods. Hooks allow functional components to have state.

👉 Read More

7. What are props in React?

Props (properties) are read-only data passed from parent to child components. They allow components to be dynamic and reusable.

👉 Read More

8. What is state in React?

State is a built-in object that stores component data that can change over time. When state changes, the component re-renders.

👉 Read More

9. What is the difference between state and props?

Props are passed from parent components and are immutable, while state is internal to a component and can be changed using setState or hooks.

👉 Read More

10. What are React Hooks?

Hooks are functions that let you use state and other React features in functional components. Examples include useState, useEffect, useContext.

👉 Read More

11. What is useState hook?

useState is a hook that allows functional components to have state. It returns an array with the current state value and a function to update it.

👉 Read More

12. What is useEffect hook?

useEffect performs side effects in functional components. It combines componentDidMount, componentDidUpdate, and componentWillUnmount lifecycle methods.

👉 Read More

13. What are React lifecycle methods?

Lifecycle methods are special methods in class components that run at specific points in a component's life: mounting, updating, and unmounting.

👉 Read More

14. What is componentDidMount?

componentDidMount is called after a component is mounted to the DOM. It's commonly used for API calls, setting up subscriptions, or timers.

👉 Read More

15. What is componentWillUnmount?

componentWillUnmount is called before a component is removed from the DOM. It's used for cleanup like removing event listeners or canceling network requests.

👉 Read More

16. What is event handling in React?

React uses SyntheticEvents to handle events. Event handlers are passed as props and use camelCase naming convention like onClick, onChange.

👉 Read More

17. What is conditional rendering in React?

Conditional rendering allows you to render different components or elements based on certain conditions using if statements, ternary operators, or logical operators.

👉 Read More

18. What are lists and keys in React?

Lists are rendered using map() function. Keys are unique identifiers that help React identify which items have changed, added, or removed for efficient re-rendering.

👉 Read More

19. What is React Router?

React Router is a library for handling routing in React applications. It enables navigation between different components and maintains browser history.

👉 Read More

20. What is Context API?

Context API provides a way to pass data through the component tree without having to pass props down manually at every level. It's useful for global state management.

👉 Read More

21. What is useContext hook?

useContext hook allows functional components to consume context values without wrapping them in Context.Consumer components.

👉 Read More

22. What is useReducer hook?

useReducer is an alternative to useState for managing complex state logic. It accepts a reducer function and returns current state and dispatch function.

👉 Read More

23. What is useRef hook?

useRef returns a mutable ref object that persists across re-renders. It's commonly used to access DOM elements directly or store mutable values.

👉 Read More

24. What is useMemo hook?

useMemo is used for performance optimization by memoizing expensive calculations. It only recalculates when its dependencies change.

👉 Read More

25. What is useCallback hook?

useCallback returns a memoized callback function. It's useful for preventing unnecessary re-renders when passing callbacks to child components.

👉 Read More

26. What is React.memo?

React.memo is a higher-order component that memoizes the result of a component. It prevents unnecessary re-renders when props haven't changed.

👉 Read More

27. What are Higher-Order Components (HOC)?

HOCs are functions that take a component and return a new component with additional props or functionality. They're used for code reuse and cross-cutting concerns.

👉 Read More

28. What is prop drilling?

Prop drilling is the process of passing data from a parent component to deeply nested child components through multiple intermediate components.

👉 Read More

29. What is React Fragment?

React Fragment allows you to group multiple elements without adding extra nodes to the DOM. It can be written as or <>.

👉 Read More

30. What is React.StrictMode?

StrictMode is a tool for highlighting potential problems in an application. It activates additional checks and warnings for its descendants in development mode.

👉 Read More

31. What is error boundary in React?

Error boundaries are React components that catch JavaScript errors in their child component tree and display a fallback UI instead of crashing.

👉 Read More

32. What is componentDidCatch?

componentDidCatch is a lifecycle method used in error boundaries to catch errors that occur during rendering, in lifecycle methods, and in constructors.

👉 Read More

33. What is React Portal?

Portals provide a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component, useful for modals and tooltips.

👉 Read More

34. What is lazy loading in React?

Lazy loading allows you to load components only when they're needed using React.lazy() and Suspense, improving initial load performance.

👉 Read More

35. What is React Suspense?

Suspense lets you specify a loading state while waiting for lazy-loaded components or data to load. It works with React.lazy() and concurrent features.

👉 Read More

36. What is code splitting?

Code splitting is a technique to split your code into smaller chunks that can be loaded on demand, reducing the initial bundle size and improving performance.

👉 Read More

37. What is the difference between controlled and uncontrolled components?

Controlled components have their state managed by React, while uncontrolled components manage their own state internally using refs.

👉 Read More

38. What is React DevTools?

React DevTools is a browser extension that allows you to inspect React component hierarchies, props, state, and performance in the browser's developer tools.

👉 Read More

39. What is reconciliation in React?

Reconciliation is the process by which React updates the DOM by comparing the new virtual DOM tree with the previous one and making minimal changes.

👉 Read More

40. What is the difference between React and ReactDOM?

React contains the core functionality for creating components, while ReactDOM provides DOM-specific methods like render() for web applications.

👉 Read More

41. What is React.createElement?

React.createElement is the function that JSX compiles to. It creates React elements with a type, props, and children.

👉 Read More

42. What is React.cloneElement?

React.cloneElement clones and returns a new React element using the original element as the starting point, allowing you to modify props.

👉 Read More

43. What is React.Children?

React.Children provides utilities for dealing with the props.children data structure, including map, forEach, count, and toArray methods.

👉 Read More

44. What is defaultProps?

defaultProps is used to define default values for props in case they are not provided by the parent component.

👉 Read More

45. What is PropTypes?

PropTypes is a library for type-checking props in React components. It helps catch bugs by validating the types of props passed to components.

👉 Read More

46. What is the difference between createElement and cloneElement?

createElement creates a new element from scratch, while cloneElement creates a copy of an existing element with modified props.

👉 Read More

47. What is shouldComponentUpdate?

shouldComponentUpdate is a lifecycle method that determines whether a component should re-render by returning true or false based on props and state changes.

👉 Read More

48. What is PureComponent?

PureComponent is similar to Component but implements shouldComponentUpdate with a shallow prop and state comparison automatically.

👉 Read More

49. What is the difference between Component and PureComponent?

Component always re-renders when setState is called, while PureComponent performs a shallow comparison and only re-renders if props or state actually changed.

👉 Read More

50. What is render prop pattern?

Render prop is a technique for sharing code between components using a prop whose value is a function that returns a React element.

👉 Read More

51. What is the difference between useEffect and componentDidMount?

useEffect can mimic componentDidMount by using an empty dependency array. Unlike componentDidMount, useEffect runs in functional components.

👉 Read More

52. What are synthetic events in React?

Synthetic events are React's cross-browser wrapper around the browser's native event system, ensuring consistent behavior across all browsers.

👉 Read More

53. What is key prop in React and why is it important?

The key prop helps React identify which items have changed, are added, or are removed in a list. It helps in efficient re-rendering of components.

👉 Read More

54. What is the difference between useImperativeHandle and useRef?

useRef gives direct access to a DOM node or value, while useImperativeHandle customizes the instance value that is exposed when using ref in parent components.

👉 Read More

55. What are forward refs in React?

Forward refs allow parent components to access the ref of a child component using React.forwardRef().

👉 Read More

56. What is the difference between default and named exports in React?

Default export allows a single export per file, while named exports allow multiple exports. Importing syntax also differs between the two.

👉 Read More

57. What are React Hooks Rules?

Hooks should only be called at the top level of a React function component or from custom hooks, not inside loops, conditions, or nested functions.

👉 Read More

58. How do you optimize performance in a React app?

Use techniques like code splitting, lazy loading, memoization (React.memo, useMemo), avoiding inline functions, and virtualization for large lists.

👉 Read More

59. What is React Profiler?

React Profiler is a tool for measuring the performance of React components. It helps in identifying performance bottlenecks.

👉 Read More

60. How does React handle forms?

React handles forms using controlled components where form data is managed by React state, or uncontrolled components using refs.

👉 Read More

61. What is React Testing Library?

React Testing Library is a testing utility that focuses on testing components from the user's perspective rather than implementation details.

62. What is Jest?

Jest is a JavaScript testing framework that works well with React. It provides features like mocking, assertions, and code coverage.

63. What is Enzyme?

Enzyme is a JavaScript testing utility for React that makes it easier to test React components' output and behavior.

64. What is shallow rendering?

Shallow rendering renders a component one level deep without rendering child components, useful for unit testing individual components.

65. What is Redux?

Redux is a predictable state container for JavaScript apps. It helps manage application state in a centralized store with actions and reducers.

66. What are Redux actions?

Actions are plain JavaScript objects that describe what happened in the application. They must have a type property and can contain additional data.

67. What are Redux reducers?

Reducers are pure functions that take the current state and an action, and return a new state. They specify how the application's state changes.

68. What is Redux store?

The store is the object that holds the application state tree. It provides methods to access state, dispatch actions, and subscribe to changes.

69. What is connect() in React Redux?

connect() is a higher-order component that connects React components to the Redux store, providing state and dispatch as props.

70. What is useSelector hook?

useSelector is a React Redux hook that allows functional components to extract data from the Redux store state.

71. What is useDispatch hook?

useDispatch is a React Redux hook that returns a reference to the dispatch function from the Redux store for dispatching actions.

72. What is middleware in Redux?

Middleware provides a way to extend Redux with custom functionality, sitting between dispatching an action and the moment it reaches the reducer.

73. What is Redux Thunk?

Redux Thunk is middleware that allows action creators to return functions instead of plain objects, enabling asynchronous actions.

74. What is Redux Saga?

Redux Saga is a middleware library that uses generator functions to handle side effects like asynchronous calls in Redux applications.

75. What is React Router DOM?

React Router DOM is the DOM bindings for React Router, providing components like BrowserRouter, Route, Link, and Switch for web applications.

76. What is BrowserRouter vs HashRouter?

BrowserRouter uses HTML5 history API for clean URLs, while HashRouter uses URL hash for routing, making it compatible with older browsers.

77. What is useHistory hook?

useHistory provides access to the history instance for navigation. It allows programmatic navigation using push, replace, and go methods.

78. What is useParams hook?

useParams returns an object of key-value pairs of URL parameters from the current route that were matched by the Route path.

79. What is useLocation hook?

useLocation returns the location object representing the current URL, including pathname, search, hash, and state.

80. What is React.lazy()?

React.lazy() enables dynamic imports for components, allowing you to load components only when they're needed for code splitting.

81. What is React Concurrent Mode?

Concurrent Mode is a set of features that help React apps stay responsive by rendering component trees without blocking the main thread.

82. What is React Fiber?

React Fiber is the new reconciliation algorithm that enables features like time slicing, suspense, and concurrent rendering.

83. What is Server-Side Rendering (SSR)?

SSR renders React components on the server and sends HTML to the client, improving initial load time and SEO.

84. What is Static Site Generation (SSG)?

SSG pre-renders pages at build time, generating static HTML files that can be served quickly from a CDN.

85. What is Next.js?

Next.js is a React framework that provides features like SSR, SSG, automatic code splitting, and file-based routing out of the box.

86. What is Gatsby?

Gatsby is a React-based framework for building fast, static websites with GraphQL data layer and extensive plugin ecosystem.

87. What is Create React App?

Create React App is a tool that sets up a modern React development environment with no configuration required.

88. What is Webpack in React?

Webpack is a module bundler that bundles JavaScript files and assets for React applications, handling dependencies and optimizations.

89. What is Babel in React?

Babel is a JavaScript compiler that transforms JSX and modern JavaScript features into browser-compatible code.

90. What is ESLint in React?

ESLint is a static code analysis tool that identifies and reports patterns in JavaScript/React code to maintain code quality.

91. What is Prettier in React?

Prettier is an opinionated code formatter that automatically formats React/JavaScript code to ensure consistent styling.

92. What is TypeScript with React?

TypeScript adds static type checking to React applications, helping catch errors at compile time and improving developer experience.

93. What are React Design Patterns?

Common patterns include Container/Presentational, Higher-Order Components, Render Props, Compound Components, and Custom Hooks.

94. What is React Native?

React Native is a framework for building mobile applications using React, allowing code sharing between iOS and Android platforms.

95. What is React VR?

React VR (now React 360) is a framework for building virtual reality experiences using React paradigms and JavaScript.

96. What is React Helmet?

React Helmet is a library that manages document head tags like title, meta, and link tags in React applications.

97. What is React Intl?

React Intl is a library that provides internationalization (i18n) support for React applications, handling translations and formatting.

98. What is React Spring?

React Spring is a spring-physics based animation library for React that provides smooth, natural animations and transitions.

99. What is Formik?

Formik is a library that helps build forms in React with validation, error handling, and form state management.

100. What are the best practices for React development?

Best practices include using functional components with hooks, proper state management, code splitting, testing, following naming conventions, and optimizing performance.

Top 100 React Interview Questions