50 Advanced React.

js Questions with Detailed Answers

1. What are React Hooks?

React Hooks are functions introduced in React 16.8 that allow you to use state and other React
features in functional components without needing a class. Examples include useState for state
management and useEffect for side effects.

2. Explain the useEffect hook.

useEffect allows you to perform side effects in function components, such as fetching data,
subscribing to events, or modifying the DOM. It runs after rendering and can be configured to run
only when dependencies change.

3. What is the difference between useMemo and useCallback?

useMemo is used to memoize the result of a computation, preventing expensive recalculations.
useCallback, on the other hand, is used to memoize a function, ensuring it does not get recreated
on every render unless dependencies change.

4. What is reconciliation in React?

Reconciliation is the process by which React updates the DOM efficiently. React compares the
virtual DOM with the previous version and applies only the necessary changes to the real DOM,
making updates faster and smoother.

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

Controlled components have their state managed by React through props, while uncontrolled
components manage their own state using the DOM, typically via refs.

6. What is React Context API?

The Context API provides a way to pass data through the component tree without manually passing
props at every level. It is useful for managing global state, such as themes or authentication status.

7. What is prop drilling and how do you avoid it?

Prop drilling occurs when props are passed down through multiple layers of components. This can
be avoided using the Context API, Redux, or Zustand for state management.

8. What is the significance of keys in React lists?

Keys help React identify which list items have changed, been added, or removed. They improve
performance by allowing React to update only the necessary elements instead of re-rendering the
entire list.

9. What are higher-order components (HOC)?

HOCs are functions that take a component and return a new component with additional functionality.
They are commonly used for reusing component logic, such as authentication handling or data
fetching.

10. What is the difference between useState and useReducer?

useState is a simpler way to manage component-level state, while useReducer is better suited for
complex state logic and state transitions, typically used when actions and reducers are involved.

11. How does React Fiber work?

React Fiber is a new reconciliation algorithm introduced in React 16. It allows React to work
asynchronously, prioritizing updates and improving rendering performance.

12. What is lazy loading in React?

Lazy loading defers the loading of components until they are needed, reducing the initial bundle
size. React.lazy() and Suspense are used for implementing lazy loading.

13. How do you optimize React performance?

Optimizations include using React.memo for memoization, avoiding unnecessary renders, using
useCallback and useMemo, and implementing code-splitting.

14. What is a pure component in React?

A PureComponent is a class component that only re-renders when its props or state change, using
a shallow comparison to determine changes.

15. What is React Portal?

React Portals allow rendering a child component outside its parent hierarchy while maintaining
React's event system.

16. What is the use of forwardRef?

forwardRef allows parent components to pass a ref to a child component, useful for accessing DOM
elements or React components.

17. What is the difference between state and props?

State is internal to a component and mutable, while props are external, passed from a parent
component, and usually immutable.

18. What are synthetic events in React?

Synthetic events are React's cross-browser wrapper around the native DOM events, ensuring
consistency across browsers.

19. What is the role of React.Fragment?

React.Fragment allows grouping multiple elements without adding extra nodes to the DOM.

20. How does React handle forms?

React supports controlled and uncontrolled components for forms. Controlled components store
form data in state, while uncontrolled components use refs.

21. What is code splitting?

Code splitting allows loading only necessary JavaScript code when required, improving
performance. It can be achieved using React.lazy and dynamic imports.

22. How does React handle errors?

React uses Error Boundaries to catch JavaScript errors in components and display a fallback UI
instead of crashing the entire app.

23. What is server-side rendering (SSR)?

SSR generates the initial HTML on the server before sending it to the client, improving SEO and
initial load performance.

24. What is hydration in React?

Hydration is React attaching event listeners to server-rendered HTML, making it interactive without
reloading the page.

25. What is suspense in React?

Suspense allows components to delay rendering until dependent asynchronous operations are
completed.

26. What is concurrent mode?

Concurrent mode improves responsiveness by rendering updates asynchronously, avoiding UI
blocking.

27. What are custom hooks?

Custom hooks allow code reuse by encapsulating logic into reusable functions that use built-in
React hooks.

28. What is a reducer function in useReducer?

A reducer function determines state updates based on dispatched actions, useful for managing
complex state logic.

29. What is the useTransition hook?

useTransition helps manage UI responsiveness by marking state updates as low-priority, preventing
UI freezes.

30. How do you memoize functions in React?

useCallback memoizes functions, preventing unnecessary recreation unless dependencies change.

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

Class components use lifecycle methods, while functional components use hooks like useState and
useEffect.

32. What is JSX?

JSX is a syntax extension for JavaScript, allowing HTML-like code within JavaScript files to define
React components.

33. How does useRef work?

useRef holds a mutable reference to a DOM element or value that persists across renders without
causing re-renders.

34. What is an event delegation in React?

Event delegation attaches a single event listener to a parent element, reducing memory usage and
improving performance.

35. What is strict mode in React?

Strict mode is a development-only feature that highlights potential issues like side effects and
deprecated features.

36. What is hydration mismatch?

A hydration mismatch occurs when the server-rendered HTML differs from the React client-rendered
HTML.

37. What is React.memo?

React.memo is a higher-order component that optimizes performance by preventing unnecessary
re-renders of functional components.

38. How do you handle API calls in React?

API calls can be handled using useEffect with fetch or Axios to manage side effects in components.

39. What is tree shaking?

Tree shaking eliminates unused code from the final bundle, reducing application size and improving
performance.

40. What is an imperative handle?

Imperative handles allow parent components to interact with child component instances through
forwardRef and useImperativeHandle.

41. What is the difference between React.lazy and dynamic imports?

React.lazy is used for lazy-loading components, while dynamic imports can be used for loading any
module asynchronously.

42. How do you handle authentication in React?

Authentication can be managed using JWT, OAuth, session storage, or authentication libraries like
Firebase or Auth0.

43. What is the virtual DOM?

The virtual DOM is a lightweight representation of the real DOM that React uses to determine the
minimal updates required.

44. How do you create a reusable component in React?

Reusable components should accept props, use composition, and avoid tightly coupling logic to
specific use cases.

45. What is shallow comparison in React?

Shallow comparison checks if two values or objects have changed without deeply inspecting nested
properties.

46. How do you handle global state in React?

Global state can be managed using Context API, Redux, Recoil, or Zustand.

47. What is component composition?

Component composition is the practice of building UIs by combining smaller components instead of
using inheritance.

48. What are suspense boundaries?

Suspense boundaries allow wrapping components to handle loading states gracefully while fetching
data.

49. How do you prevent memory leaks in React?

Memory leaks can be prevented by cleaning up subscriptions and effects using the cleanup function
in useEffect.

50. What is the best way to handle performance issues in React?

Optimizing performance involves memoization, lazy loading, avoiding unnecessary re-renders, and
using virtualized lists.