1. What is React?
React is a JavaScript library used for building user interfaces, primarily for single-page applications.
2. Who developed React?
React was developed by Facebook (now Meta) and is maintained by both Meta and the open-source community.
3. What are components in React?
Components are the building blocks of a React application. They are reusable pieces of UI that can be independent and composable.
4. What is JSX?
JSX (JavaScript XML) is a syntax extension for JavaScript that allows writing HTML-like code inside JavaScript files.
5. What is the difference between functional and class components?
Functional components are simple JavaScript functions, whereas class components are ES6 classes that extend React.Component and can have state.
6. What is the virtual DOM in React?
The virtual DOM is a lightweight copy of the real DOM that React uses to improve performance by making efficient updates.
7. Why is React considered declarative?
React is declarative because it allows developers to describe the UI state and let React handle updating the DOM accordingly.
8. What are props in React?
Props (short for properties) are used to pass data from a parent component to a child component.
9. What is state in React?
State is an object that holds dynamic data and determines how a component renders and behaves.
10. How do you create a React application?
A React application can be created using the Create React App (CRA) command-line tool.
11. What is the purpose of ReactDOM?
ReactDOM is used to render React components into the actual DOM.
12. What is the difference between a controlled and an uncontrolled component?
A controlled component has its state managed by React, while an uncontrolled component manages its own state using the DOM.
13. What is the purpose of the useState hook?
The useState hook is used to add state to functional components.
14. What is the useEffect hook used for?
The useEffect hook is used to handle side effects such as fetching data, subscriptions, or manually changing the DOM.
15. How does React handle events?
React uses a synthetic event system, which is a wrapper around the browser’s native event system, to improve performance and compatibility.
16. What is a React fragment?
A React fragment is a way to group multiple elements without adding an extra node to the DOM.
17. What is the difference between props and state?
Props are immutable and passed from parent to child, whereas state is mutable and controlled within the component.
18. What is the role of keys in React lists?
Keys help React identify which items have changed, are added, or removed, improving performance.
19. What is the purpose of the useRef hook?
The useRef hook is used to reference a DOM element or persist values across renders without triggering re-renders.
20. What is conditional rendering in React?
Conditional rendering allows React to render different UI elements based on a condition.
21. What is React Router?
React Router is a library used for handling navigation and routing in React applications.
22. What is the difference between BrowserRouter and HashRouter?
BrowserRouter uses the HTML5 history API for navigation, while HashRouter uses URL hash-based navigation.
23. What is the purpose of context in React?
Context provides a way to pass data through the component tree without needing to pass props manually at every level.
24. How can you optimize performance in a React application?
Performance can be optimized using memoization, lazy loading, virtual lists, avoiding unnecessary re-renders, and using PureComponent.
25. What is React.memo?
React.memo is a higher-order component that prevents unnecessary re-renders by memoizing the result of a functional component.
26. What is lazy loading in React?
Lazy loading is a technique that delays loading components until they are needed, improving initial page load performance.
27. What is the difference between useState and useReducer?
useState is used for managing local component state, while useReducer is used for more complex state logic with dispatch actions.
28. What is a Higher-Order Component (HOC)?
A Higher-Order Component is a function that takes a component and returns a new enhanced component.
29. What is the purpose of the useCallback hook?
The useCallback hook is used to memoize functions and prevent unnecessary re-creations during re-renders.
30. What is the purpose of the useMemo hook?
The useMemo hook is used to memoize expensive computations and only recompute when dependencies change.
31. What is the purpose of error boundaries in React?
Error boundaries are React components that catch JavaScript errors in the component tree and display a fallback UI instead of crashing the application.
32. Can hooks be used inside class components?
No, hooks can only be used inside functional components.
33. What is the purpose of the useContext hook?
The useContext hook allows functional components to access values from a React context without needing a Consumer component.
34. How does React handle forms?
React handles forms using controlled components, where the form input values are managed by React state.
35. What is lifting state up in React?
Lifting state up is a pattern where the state is moved to a common ancestor component so that multiple child components can access and modify it.
36. What are portals in React?
Portals allow rendering a React component’s children into a different part of the DOM outside of its parent component’s hierarchy.
37. What is reconciliation in React?
Reconciliation is the process React uses to update the virtual DOM and apply changes efficiently to the real DOM.
38. What is PureComponent in React?
PureComponent is a class component that implements a shallow comparison of props and state to prevent unnecessary re-renders.
39. What is the difference between React and React Native?
React is a JavaScript library for building web applications, while React Native is a framework for building mobile applications using React.
40. What is a controlled component in React?
A controlled component is an input element whose value is controlled by React state rather than the DOM.
41. What is an uncontrolled component in React?
An uncontrolled component is an input element that maintains its own state using the DOM instead of React state.
42. What is the purpose of defaultProps in React?
defaultProps allow setting default values for props in case they are not provided by the parent component.
43. What is the significance of the key prop in React lists?
The key prop helps React identify which items have changed, been added, or removed, improving the efficiency of rendering lists.
44. What is server-side rendering (SSR) in React?
Server-side rendering is the process of rendering React components on the server and sending HTML to the client to improve performance and SEO.
45. What is hydration in React?
Hydration is the process where React takes over a server-rendered application and attaches event listeners to the existing HTML.
46. What is the difference between stateful and stateless components?
Stateful components manage local state, whereas stateless components do not maintain any state and rely on props.
47. How do you handle events in React?
Events in React are handled using event listeners written in JSX, with event handlers passed as functions.
48. What is the difference between shallow and deep comparison in React?
Shallow comparison checks only the first level of objects, while deep comparison checks all nested properties for equality.
49. What is the significance of the children prop in React?
The children prop allows components to receive and render nested elements or other components dynamically.
50. What is the difference between useEffect and componentDidMount?
useEffect is a hook used in functional components, whereas componentDidMount is a lifecycle method used in class components to run code after the component mounts.
51. What is the virtual DOM in React?
The virtual DOM is a lightweight copy of the real DOM that React uses to improve performance by minimizing direct DOM manipulations.
52. How does React update the real DOM?
React compares the virtual DOM with the previous version, finds differences (diffing), and updates only the changed parts in the real DOM.
53. What is the role of React Fiber?
React Fiber is the reconciliation algorithm introduced in React to improve rendering performance and responsiveness.
54. What is the difference between React.createElement and JSX?
React.createElement is a method to create elements manually, whereas JSX is a syntax extension that makes writing React components easier.
55. Why do we need to wrap multiple JSX elements inside a parent container?
JSX requires a single parent element because it must return a single node, which can be achieved using a div or React fragments.
56. What is the purpose of the useImperativeHandle hook?
The useImperativeHandle hook allows customizing the instance value exposed when using React.forwardRef.
57. What is the purpose of React.forwardRef?
React.forwardRef allows passing a ref from a parent component to a child component, giving direct access to the child’s DOM element.
58. What is the purpose of the useLayoutEffect hook?
The useLayoutEffect hook is similar to useEffect but runs synchronously after DOM mutations and before the browser paints the screen.
59. How do you update the state in React?
In class components, state is updated using setState, while in functional components, the useState setter function is used.
60. What is a functional component in React?
A functional component is a JavaScript function that returns JSX and does not have its own state or lifecycle methods unless using hooks.
61. What is JSX?
JSX (JavaScript XML) is a syntax extension for JavaScript that allows writing HTML-like code in React components, which is later transformed into JavaScript.
62. How do you handle dynamic class names in React?
Dynamic class names can be handled using JavaScript expressions, template literals, or libraries like `classnames` to conditionally apply class names.
63. What is a component in React?
A component is a reusable, self-contained building block in React that can either be a function or a class, which returns a React element (UI).
64. What is prop drilling?
Prop drilling is the process of passing props from a parent component to a deeply nested child component, which can become cumbersome with deep component trees.
65. How can you avoid prop drilling in React?
Prop drilling can be avoided by using React Context or state management libraries like Redux or Zustand to share data globally without passing through multiple layers.
66. What is a state in React?
State is a JavaScript object that holds data that influences the rendering of components. It can be modified using `setState` in class components or a setter from `useState` in functional components.
67. How do you pass data from a parent to a child component?
Data can be passed from a parent to a child component via props, which are read-only and allow the parent to provide values to the child.
68. What is the purpose of React.Fragment?
React.Fragment is used to group multiple elements without adding an extra node to the DOM, helping avoid unnecessary wrapper elements.
69. What is the difference between React.Component and React.PureComponent?
React.Component is the base class for creating class components, while React.PureComponent is a subclass that implements a shallow comparison for prop and state changes, preventing unnecessary re-renders.
70. What is the role of the render method in React?
The render method in class components is responsible for returning the JSX that defines what the UI should look like.
71. What is the difference between props and state?
Props are immutable values passed from parent to child components, whereas state is mutable and managed within a component.
72. What are higher-order components (HOCs) in React?
A higher-order component is a function that takes a component and returns a new component, typically used to reuse component logic.
73. What is the use of useState in React?
useState is a hook that allows functional components to manage local state by returning a state variable and a setter function.
74. What is the difference between useEffect and useCallback in React?
useEffect runs side effects in functional components, whereas useCallback memoizes functions to prevent unnecessary re-creations between renders.
75. What is the purpose of React’s Suspense component?
React’s Suspense component is used to handle asynchronous loading of components, showing a fallback UI while waiting for content to load.
76. How do you optimize performance in React?
Performance can be optimized in React by using techniques such as memoization, lazy loading, code splitting, and shouldComponentUpdate for class components.
77. What is the useEffect hook used for?
The useEffect hook in functional components is used to perform side effects such as data fetching, subscriptions, or manually changing the DOM after render.
78. What are React refs used for?
React refs are used to directly access a DOM element or a class component instance for manipulating the DOM or invoking methods.
79. What is the role of the useRef hook?
useRef is a hook that creates a mutable object which persists across renders, often used to access DOM elements or store values without causing re-renders.
80. What is the React DevTools used for?
React DevTools is a browser extension that allows inspecting the React component tree, checking component props and state, and profiling performance.
81. What is JSX and why do we use it in React?
JSX is a syntax extension that allows us to write HTML-like code within JavaScript. It makes the React code more readable and easier to write.
82. What is ReactDOM?
ReactDOM is a package that provides methods to render React components to the DOM and manage the component lifecycle.
83. What is a functional component?
A functional component is a JavaScript function that accepts props as arguments and returns JSX to render the UI.
84. What is a class component?
A class component is a React component defined using a JavaScript class, which can manage its own state and have lifecycle methods.
85. What are React lifecycle methods?
Lifecycle methods are special methods that are invoked at different stages of a component's life, such as mounting, updating, and unmounting.
86. What is the purpose of the shouldComponentUpdate lifecycle method?
shouldComponentUpdate allows you to optimize performance by preventing unnecessary re-renders when props or state haven’t changed.
87. What is the difference between useState and useReducer?
useState is used for managing simple state, whereas useReducer is more suitable for managing complex state logic with multiple sub-values or actions.
88. What is React Router?
React Router is a library used to implement routing in React applications, allowing for navigation between different components based on the URL.
89. What is the difference between an uncontrolled and controlled component?
A controlled component is one whose state is controlled by React, while an uncontrolled component manages its own state through the DOM.
90. What is the Context API in React?
The Context API provides a way to share state globally across the component tree without passing props manually at each level.
91. What is the purpose of the useContext hook?
The useContext hook is used to access the value of a context directly in functional components, avoiding prop drilling.
92. How can you handle form data in React?
Form data can be handled using controlled components, where form elements' values are controlled by React state via the useState hook.
93. What is the purpose of the useMemo hook in React?
The useMemo hook is used to memoize expensive computations so that they are only recalculated when their dependencies change, improving performance.
94. What is the purpose of React’s key prop?
The key prop helps React identify which items in a list are changed, added, or removed, optimizing the rendering of lists.
95. How do you pass data between sibling components in React?
Data can be passed between sibling components via a common parent component, which holds the shared state and passes the data down as props.
96. What is the difference between useEffect and useLayoutEffect?
useEffect runs asynchronously after the render, while useLayoutEffect runs synchronously after DOM mutations but before the browser paints the screen.
97. What are React portals used for?
React portals allow rendering children into a different part of the DOM that is outside the parent component’s hierarchy, useful for modals or tooltips.
98. What is the use of the React.StrictMode component?
React.StrictMode is a wrapper component that helps identify potential problems in an application by activating additional checks and warnings in development mode.
99. What is the difference between functional components and class components in terms of performance?
Functional components are generally more lightweight and faster than class components, especially with hooks introduced in React 16.8.
100. What is the purpose of React’s Suspense and lazy?
React’s Suspense and lazy enable code splitting, allowing components to be loaded asynchronously and showing a fallback UI while the component is loading.
101. What is the difference between React’s state and props?
State is mutable and managed within a component, while props are immutable and passed from a parent to a child component.
102. How can you use React's useState hook?
useState is a hook that allows you to add state to functional components, returning a state variable and a function to update it.
103. What is the purpose of React’s useEffect hook?
useEffect allows you to perform side effects in functional components, such as fetching data, setting up subscriptions, or manipulating the DOM after render.
104. What is the difference between an inline style and CSS classes in React?
Inline styles are written directly in JSX as objects, whereas CSS classes are defined in external stylesheets and referenced via the `className` attribute.
105. How can you handle events in React?
Events in React are handled by defining event handlers, such as `onClick`, `onChange`, etc., and passing them to elements as props.
106. What is the purpose of the React key prop?
The key prop is used to identify unique elements in a list, helping React to efficiently update and re-render components without unnecessary changes.
107. How do you bind event handlers in React?
Event handlers can be bound in the constructor for class components or directly in the JSX for functional components using arrow functions.
108. What is a functional component?
A functional component is a stateless component in React that is defined using a JavaScript function and returns JSX.
109. What is the use of the React.Fragment?
React.Fragment is used to group multiple elements without adding extra nodes to the DOM, helping to keep the DOM tree clean.
110. What are controlled components in React?
Controlled components are form elements whose value is controlled by React state, allowing for greater control over user inputs and validation.
111. What is the difference between class components and functional components?
Class components are ES6 classes that can hold state and lifecycle methods, while functional components are simple JavaScript functions that use hooks for state and side effects.
112. How do you update state in React?
State can be updated using the `setState` method in class components or the setter function returned by the `useState` hook in functional components.
113. What are side effects in React, and how can you manage them?
Side effects in React include tasks like fetching data or subscribing to external events. They are managed using the `useEffect` hook in functional components.
114. What is the significance of the `componentDidMount` lifecycle method?
`componentDidMount` is called once after the component has been rendered and is often used to perform setup tasks such as data fetching.
115. What is the `useReducer` hook in React?
The `useReducer` hook is used to manage complex state logic in a functional component, allowing you to dispatch actions and handle state transitions based on them.
116. How do you handle errors in React?
Errors can be handled using `Error Boundaries` for class components or try-catch blocks in asynchronous functions within `useEffect` or other hooks in functional components.
117. What is the `render` method in React?
The `render` method is a lifecycle method in class components that returns the JSX to be rendered to the screen.
118. What is the importance of keys in a list of elements in React?
Keys help React identify which items in a list are changed, added, or removed, ensuring efficient re-renders and updates to the list.
119. What is React’s Virtual DOM?
The Virtual DOM is a lightweight representation of the actual DOM that allows React to perform efficient updates by comparing the current state with the previous one and only applying changes where necessary.
120. How do you make AJAX requests in React?
AJAX requests in React can be made using JavaScript’s `fetch` API or third-party libraries like Axios, typically inside `useEffect` for functional components.