Top 50 React.

js
Interview
Questions
And
Answers

To crack any react.js interview

1. What is React?

React is a front-end JavaScript library developed by Facebook for building user interfaces,

particularly single-page applications.

2. What are the major features of React?

JSX, Components, Virtual DOM, One-way data binding, Lifecycle methods, Hooks.

3. What is JSX?

JSX stands for JavaScript XML. It allows you to write HTML structures in the same file as JavaScript

code.

4. What is the Virtual DOM?

Virtual DOM is a programming concept where a virtual representation of a UI is kept in memory and

synced with the real DOM.

5. What are components in React?

Components are the building blocks of a React application's UI. They can be functional or

class-based.

6. Difference between functional and class components?

Functional components are stateless and use hooks; class components are stateful and use

lifecycle methods.

7. What are props in React?

Props are inputs to components. They are passed down from parent to child components.

8. What is state in React?

State is a built-in object that stores property values that belong to the component.
9. What are React Hooks?

Hooks let you use state and other React features in functional components.

10. What is useState Hook?

useState is a hook that lets you add state to functional components.

11. What is useEffect Hook?

useEffect lets you perform side effects in function components (e.g., fetch data, update DOM).

12. What is the difference between useEffect and componentDidMount?

useEffect replaces lifecycle methods; it can mimic componentDidMount, componentDidUpdate, and

componentWillUnmount.

13. What is Redux?

Redux is a predictable state container for JavaScript apps, often used with React.

14. What is a reducer in Redux?

A reducer is a pure function that takes current state and an action, then returns a new state.

15. What is context API?

The Context API allows passing data through the component tree without manually passing props.

16. What is React Router?

React Router is a standard library for routing in React applications.

17. How to handle forms in React?

Using controlled components where form data is handled by React state.

18. What is lifting state up?

Sharing state between components by moving it to their closest common ancestor.

19. What are higher-order components?

20. What is reconciliation?

Reconciliation is the process through which React updates the DOM when state or props change.

21. What is the key prop and why is it important?

Keys help React identify which items have changed, are added, or are removed.

22. Can you explain the React component lifecycle?

Mounting, Updating, Unmounting. useEffect can be used in functional components.

23. What is the difference between state and props?

Props are read-only and passed to the component; state is local and can change.

24. What is memoization in React?

React.memo is used to prevent unnecessary re-renders of functional components.

25. What is lazy loading in React?

Lazy loading helps load components only when needed to improve performance.

26. What is React.Fragment?

A wrapper that lets you group multiple elements without adding extra nodes to the DOM.

27. How does React handle events?

React handles events using camelCase syntax and passes functions as event handlers.

28. What is the difference between useRef and createRef?

useRef is used in functional components; createRef is used in class components.

29. How to pass data between components?

Via props, context API, or state management libraries like Redux.

30. What are controlled and uncontrolled components?

31. What is Prop Drilling?

Prop drilling is passing props through many nested components.

32. What is an error boundary?

A component that catches JavaScript errors in its child components.

33. What is Concurrent Mode?

An experimental feature to improve responsiveness by rendering UI in the background.

34. What is strict mode in React?

A tool for highlighting potential problems in an application.

35. What is the difference between render and return in React?

Render is a lifecycle method in class components; return is used in functional components.

36. What is the difference between useEffect and useLayoutEffect?

useLayoutEffect fires synchronously after DOM mutations; useEffect is asynchronous.

37. How to optimize performance in React apps?

Using React.memo, useCallback, lazy loading, code-splitting, avoiding prop drilling.

38. What is code-splitting?

Code-splitting is a technique to split the bundle into smaller chunks.

39. What is useCallback?

useCallback returns a memoized version of a callback function.

40. What is useMemo?

useMemo returns a memoized value.

41. What are custom hooks?

42. Can React work without JSX?

Yes, but JSX makes code more readable and concise.

43. What is hydration in React?

Hydration is the process of attaching event listeners to static content rendered by the server.

44. What is the role of Webpack in React?

Webpack bundles JavaScript files and assets for the browser.

45. What is Babel in React?

Babel is a JavaScript compiler that converts JSX into standard JavaScript.

46. What is server-side rendering?

Rendering components on the server to improve performance and SEO.

47. What is the significance of keys in lists?

Keys help React identify elements and optimize rendering.

48. What are portals in React?

Portals provide a way to render children into a DOM node outside the parent.

49. What are stateless components?

Components that do not maintain their own state.

50. What is ReactDOM?

ReactDOM provides methods to interact with the DOM, like render and hydrate.