React Interview Questions And Answers
React Interview Questions For Freshers
1. What is ReactJS?
ReactJS is a JavaScript library created by Facebook for designing user interfaces.. It helps build single-page applications by breaking down the UI into reusable components.
2. What is JSX?
JSX stands for JavaScript XML. It allows us to write HTML inside JavaScript, making the syntax similar to HTML.
3. What is a component in React?
A component is a reusable piece of UI in a React application.It could be either a class or a function.
4. What distinguishes functional components from class components?
Functional components: Stateless components that are simple JavaScript functions.
Class components: Stateful components that extend from React.Component and can use lifecycle methods.
5. What are props in React?
Props (short for “properties”) are read-only inputs that are passed from parent to child components.
6. What is state in React?
State is an object that holds data that can change over time and affect how a component renders.
7. How do you update state in React?
You can update state using the setState() method in class components or the useState() hook in functional components.
8. What are React hooks?
Hooks enable the use of state and other React features within functional components.
9. What is the useState hook?
useState is a hook that allows you to include state in functional components.
10. What is the useEffect hook?
useEffect is a hook that runs side effects (e.g., data fetching, subscriptions) after render.
11. What is 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 manipulation.
12. What is the difference between virtual DOM and real DOM?
The virtual DOM is a JavaScript object representing the DOM, while the real DOM is the actual representation of the document structure in the browser.
13. What is reconciliation in React?
Reconciliation is the process through which React updates the actual DOM based on changes in the virtual DOM.
14. What do keys do in React?
Keys help React identify which items have changed, been added, or removed in a list, improving performance during re-rendering.
15. Why should keys be unique in lists?
Unique keys help React to identify which elements have changed, making the rendering process more efficient.
16. What are refs in React?
Refs are used to reference a DOM element or React component, allowing you to access it directly.
17. How do you create refs in React?
You can create refs using React.createRef() or useRef() in functional components.
18. What is the useRef hook?
useRef is a hook that returns a mutable object which persists across renders, often used to reference DOM elements.
19. What distinguishes controlled components from uncontrolled components?
Controlled components: Components where form data is handled by the state of the component.
Uncontrolled components: These are components that let the DOM manage the form data on its own.
20. How do you handle forms in React?
You can handle forms by using controlled components and listening to onChange events to update the state.
21. What is component Did Mount in React?
component Did Mount is a lifecycle method in class components that runs after the component has mounted.
22. What is componentDidUpdate?
componentDidUpdate is a lifecycle method that runs after a component updates (when props or state change).
23. What is componentWillUnmount?
componentWillUnmount is a lifecycle method that runs just before a component is unmounted and destroyed.
24. What is the difference between state and props?
State: Internal and mutable, controlled by the component itself.
Props: External and immutable, passed to the component from its parent.
25. What is the purpose of shouldComponentUpdate?
shouldComponentUpdate allows you to optimize performance by determining whether a component should re-render or not.
26. What is useMemo in React?
useMemo is a hook that memoizes a value, recomputing it only when its dependencies change, preventing unnecessary recalculations.
27. What is useCallback in React?
useCallback is a hook that memoizes a callback function, improving performance by preventing unnecessary re-creation of functions.
28. What is the difference between useEffect and useLayoutEffect?
useEffect: Runs after the render has been painted.
useLayoutEffect: Runs synchronously after all DOM mutations, before the screen is updated.
29. What is the context API in React?
The Context API allows you to share data across the component tree without needing to pass props down through each level.
30. How do you create a context in React?
You create a context using React.createContext(), and provide values using the Provider component.
31. What is a higher-order component (HOC)?
A higher-order component is a function that takes an existing component and creates a new one, enabling the reuse of component logic.
32. What is the useReducer hook?
useReducer is a hook that provides a way to manage state using a reducer function, similar to how Redux works.
33. What is the difference between useState and useReducer?
useState: Simple state management for individual state values.
useReducer: Better for managing more complex state logic involving multiple state variables.
34. What are React fragments?
React Fragments let you combine several elements without creating additional nodes in the DOM.
35. How do you create a fragment in React?
You can create a fragment using <React.Fragment></React.Fragment> or the shorthand <> </>.
36. What is PropTypes in React?
PropTypes is a way to enforce type checking for props in React components.
37. What is React.StrictMode?
React.StrictMode is a wrapper component that helps find potential problems in an application, like side effects.
38. What is lazy loading in React?
Lazy loading is a technique that delays loading components until they are actually needed, improving the performance of your application.
39. How do you implement lazy loading in React?
You can implement lazy loading using React.lazy() and Suspense.
40. What is the purpose of Suspense in React?
Suspense is used to display a fallback while a lazy-loaded component is being loaded.
41. What are error boundaries in React?
Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, logging them and rendering a fallback UI.
42. What is PureComponent in React?
PureComponent is a class component that implements shouldComponentUpdate with a shallow comparison for props and state.
43. What is memoization in React?
Memoization is a performance optimization technique where expensive function calls are saved so they don’t need to be re-executed.
44. What is React.memo?
React.memo is a higher-order component that saves functional components to avoid re-rendering them when it’s not needed.
45. What is ReactDOM?
ReactDOM is a package that provides methods for rendering React components into the DOM.
46. What is ReactDOM.render()?
ReactDOM.render() is the method used to render React components into the DOM.
47. What is server-side rendering (SSR) in React?
Server-side rendering is a technique where React components are rendered on the server and sent to the browser, improving performance and SEO.
48. What is React Hydration?
Hydration is the process of attaching event listeners and functionality to the static HTML content rendered on the server.
49. What is create-react-app?
create-react-app is a CLI tool to quickly set up a new React project with sensible defaults.
React Interview Questions For Experienced
50. How do you handle events in React?
You handle events in React by using synthetic events, attaching event handlers like onClick or onChange.
51. What are synthetic events in React?
Synthetic events are React’s cross-browser wrapper around the browser’s native events, ensuring consistent event handling.
52. How do you bind event handlers in React?
You can bind event handlers using an arrow function or using .bind() in the constructor.
53. What is event delegation in React?
Event delegation refers to the practice of attaching a single event listener to a parent element instead of each child element, leveraging event bubbling.
54. What is contextType in React?
contextType is a property in class components that allows you to consume a single context using this.context.
55. What is useContext in React?
useContext is a hook that allows you to consume a context in functional components without needing a consumer component.
56. What are portals in React?
Portals allow you to render components outside their parent component’s DOM hierarchy while maintaining React’s context and event bubbling.
57. How do you create a portal in React?
You can create a portal using ReactDOM.createPortal(child, container) where child is the component and container is the DOM node to render into.
58. What is forwardRef in React?
forwardRef is a function that allows you to pass a ref through a component to one of its child components.
59. What is useImperativeHandle in React?
useImperativeHandle is a hook that lets you change the value that parent components see when they use ref.
60. What is Suspense used for in React?
Suspense is used to wrap lazy-loaded components, allowing you to show fallback content (e.g., a loading spinner) while the component is loading.
61. What is the useDebugValue hook in React?
useDebugValue is a hook used for debugging custom hooks by providing a label in React DevTools.
62. What is the useEffect dependency array?
The dependency array is the second argument of useEffect, which specifies when the effect should run by comparing values between renders.
63. What happens if you don’t provide a dependency array in useEffect?
If you don’t include a dependency array, useEffect will execute after each render.
64. How do you fetch data in React?
You typically fetch data using fetch() or axios inside the useEffect hook or component lifecycle methods.
65. What is component composition in React?
Component composition refers to the practice of building complex UIs from small, reusable components, allowing better reusability and modularity.
66. What is code splitting in React?
Code splitting is the process of breaking up the application into smaller bundles that can be loaded on demand, improving performance.
67. What is lazy initialization in useState?
Lazy initialization allows you to pass a function to useState so that the initial state is computed only once during the first render, improving performance.
68. What is the purpose of a key in React?
A key is used to help React identify and track which items in a list have changed, added, or removed.
69. What is hydration in server-side rendering?
Hydration is when React takes over the static HTML sent from the server and makes it interactive by attaching event handlers and state.
70. What are controlled components?
Controlled components are input elements in React whose value is controlled by the state, requiring onChange handlers to update the state.
71. What is a React Fiber?
React Fiber is a reimplementation of React’s core algorithm for rendering, enabling features like time-slicing and better rendering performance.
72. What is StrictMode in React?
StrictMode is a tool that highlights potential problems in your React application during development, such as detecting unexpected side effects.
73. What is createContext() in React?
createContext() creates a Context object that can be used to pass data down through the component tree without having to pass props manually at every level.
74. How do you pass data between components in React?
Data is passed between components using props, or through a global state management solution like Context API or Redux.
75. What is useLayoutEffect in React?
useLayoutEffect is a hook that runs synchronously after all DOM updates but before the browser has had a chance to paint.
76. What is the React event system?
React wraps native browser events in a cross-browser-compatible layer called the synthetic event system, providing consistent behavior across different browsers.
77. What is shallow rendering in React?
Shallow rendering is a testing strategy where only the component being tested is rendered, without rendering its child components.
78. What is a React hook?
Hooks are functions introduced in React 16.8 that allow functional components to use state and other React features without using class components.
79. What is useState in React?
useState is a hook that declares state variables in functional components, returning the current state and a function to update it.
80. What is the difference between useEffect and componentDidMount?
useEffect is used in functional components for side effects, while componentDidMount is a lifecycle method used in class components after the component mounts.
81. What is useMemo in React?
useMemo is a hook that memoizes a computed value, recalculating it only when its dependencies change, preventing expensive calculations on each render.
82. What is useCallback in React?
useCallback is a hook that memoizes a function, ensuring it only gets recreated when its dependencies change.
83. How does React handle form validation?
Form validation in React is typically handled with controlled components and validation logic, or by using external libraries like Formik or React Hook Form.
84. What is prop drilling in React?
Prop drilling is the method of sending props through several layers of components to get to a component that is deeply nested.
85. What is the useReducer hook?
useReducer is a hook that manages more complex state logic by dispatching actions to update the state.
86. What is useEffect cleanup?
The cleanup function in useEffect is used to clean up side effects (like removing event listeners or canceling subscriptions) before the component unmounts or when dependencies change.
87. What are context providers and consumers?
Provider: Supplies the value to all its child components.
Consumer: Accesses the value provided by the nearest Provider.
88. What is ReactDOM.createRoot() in React 18?
ReactDOM.createRoot() is a new API in React 18 that creates a root container for rendering, enabling concurrent rendering features.
89. What is Suspense List in React 18?
SuspenseList allows coordinating multiple Suspense components to prevent undesirable loading sequences, providing a smoother user experience.
90. What is Concurrent Mode in React?
Concurrent Mode includes new features that keep React apps responsive and adapt smoothly to the user’s device and network speed.
91. What is time slicing in React?
Time slicing allows React to break up rendering work into small chunks, prioritizing more important updates like user input over less critical rendering tasks.
92. What is Strict Mode in React?
Strict Mode is a development tool in React that helps identify unsafe lifecycles, legacy API usage, and side effects in components.
93. What is a side effect in React?
Side effects are operations that affect components outside of their scope, such as fetching data, setting timers, or directly manipulating the DOM.
94. What is the purpose of setState in React?
setState is a function that updates the component’s state and triggers a re-render when the state changes.
95. What is the purpose of componentWillReceiveProps?
componentWillReceiveProps was a lifecycle method used in class components to react to changes in props, but it has been deprecated in favor of newer patterns.
96. What is the role of lifecycle methods in React?
Lifecycle methods allow you to control what happens at different stages of a component’s life, such as mounting, updating, and unmounting.
97. How do you optimize a React application?
You can optimize a React app using techniques like memoization (React.memo, useMemo, useCallback), code splitting, lazy loading, and efficient state management.
98. What is hydration in SSR (Server-Side Rendering)?
Hydration is when React attaches event listeners and reactivates the interactive part of the static HTML sent from the server.
99. How do you use routing in React?
Routing in React is typically handled by libraries like react-router-dom, allowing for navigation between different pages or views in the application.