Beginner Level (Questions 1-30):

1. What is React?

React is a JavaScript library for building user interfaces.

2. What is JSX in React?

JSX is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript.

3. Explain the Virtual DOM in React.

The Virtual DOM is a lightweight in-memory representation of the actual DOM. React uses it to
improve performance by minimizing direct manipulation of the actual DOM.

4. What are props in React?

Props (short for properties) are a way to pass data from a parent component to a child component in
React.

5. What is state in React?

State is a way to store and manage component-specific data that can change over time.

6. What is a functional component in React?

A functional component is a component defined as a JavaScript function, which takes in props and
returns JSX.

7. What is a class component in React?

A class component is a component defined as a JavaScript class that extends the

React.Component class.

8. What is the key prop in React?

The key prop is used to help React identify elements in a list and improve performance when
rendering lists.

9. What is a controlled component in React?

A controlled component is a form element whose value is controlled by React state.

10. What is the purpose of the useState hook in React?

useState is a hook that allows functional components to manage state.

11. What is the purpose of the useEffect hook in React?

useEffect is a hook used for handling side effects in functional components.

12. What is the purpose of conditional rendering in React?

Conditional rendering allows you to show or hide elements in the UI based on certain conditions.

13. Explain the concept of event handling in React.

Event handling in React involves defining event handlers to respond to user interactions, like clicks
or input changes.

14. What is the significance of the className attribute in React?

In React, you use the className attribute to assign CSS classes to DOM elements.

15. What is the difference between props and state in React?

props are used for passing data from parent to child components, while state is used for
managing component-specific data that can change.

16. What is a functional prop in React?

A functional prop is a prop that is a function and can be called within a component.

17. How do you pass data from child to parent components in React?

Data can be passed from child to parent components by defining callback functions in the parent and
passing them as props to the child.

18. Explain the concept of lifting state up in React.

Lifting state up involves moving the state from a child component to a common ancestor (usually a
parent) when multiple components need access to the same state.

19. What is the purpose of the map function in React?

The map function is used to iterate over an array of data and render a component for each item in
the array.

20. What are React hooks?

React hooks are functions that allow functional components to use state and other React features
without writing a class.

21. Explain the useReducer hook in React.

useReducer is a hook used for managing complex state logic by dispatching actions to update
state.

22. What is the significance of the key prop when rendering lists in React?

The key prop helps React identify individual list items and efficiently update the DOM when the list
changes.

23. What is the purpose of the memo function in React?

memo is a higher-order component used to optimize the rendering of functional components by

memoizing their results.

24. What are React fragments?

React fragments are a way to group multiple elements without adding an extra DOM element to the
output.

25. Explain the concept of context in React.

Context is a mechanism for passing data through the component tree without having to pass props
down manually at every level.

26. What is the difference between controlled and uncontrolled components in React?

Controlled components have their state controlled by React, while uncontrolled components
manage their state internally.

27. What is the purpose of the useState hook in React?

The useState hook is used to add state management to functional components.

28. What is the significance of the children prop in React?

The children prop is a special prop that allows you to pass content to a component between its
opening and closing tags.

29. Explain the concept of PureComponent in React.

PureComponent is a base class for class components that automatically implements the
shouldComponentUpdate method with a shallow prop and state comparison.

30. What is the purpose of the key prop when rendering lists in React?

The key prop is used to help React identify elements in a list, making it more efficient when
updating the DOM.
Intermediate Level (Questions 31-70):
1. What is a higher-order component (HOC) in React?

A higher-order component is a function that takes a component and returns a new component with
additional props or behavior.

2. What is Redux, and how does it work with React?

Redux is a state management library that works well with React to manage the global state of an
application.

3. What is the purpose of the connect function in React Redux?

The connect function is used to connect a React component to the Redux store, allowing it to
access state and dispatch actions.

4. Explain the concept of Redux Thunk.

Redux Thunk is a middleware for Redux that allows you to write asynchronous action creators.

5. What is the purpose of the componentDidMount lifecycle method in React?

componentDidMount is called after a component is rendered and mounted to the DOM, making it
suitable for data fetching and other side effects.

6. What is the difference between props.children and this.props.children in a React

component?

props.children is available in functional components, while this.props.children is used

in class components.

7. Explain the significance of the key prop when rendering dynamic lists in React.

The key prop is essential when rendering dynamic lists as it helps React efficiently update and re-
order list items.

8. What is the purpose of the shouldComponentUpdate method in React?

shouldComponentUpdate is used to control whether a component should re-render after

changes to its props or state.

9. What is a controlled component in form handling?

A controlled component is a form element whose value is controlled by React state, allowing you to
track and update its value.

10. What is the purpose of the useContext hook in React?

useContext is used to access the current context value within a functional component.

11. What is prop drilling, and how can it be avoided in React?

Prop drilling occurs when props are passed through multiple levels of components. It can be avoided
by using React context or state management libraries like Redux.
12. Explain the concept of forward refs in React.

Forward refs allow you to access the DOM or instance of a child component from a parent
component.

14. What is the purpose of the key prop when rendering a list of React components?

The key prop is used to help React identify and efficiently update components in a list.

15. What is the difference between useMemo and useCallback in React?

useMemo is used to memoize the result of a computation, while useCallback memoizes a

function.

16. What is the significance of the exact prop in React Router?

The exact prop ensures that a route is only matched if the URL is an exact match.

17. What is the purpose of the mapStateToProps function in React Redux?

mapStateToProps is used to map the Redux store state to props that can be used in a React
component.

18. What is the purpose of the mapDispatchToProps function in React Redux?

mapDispatchToProps is used to map action creators to props, allowing components to dispatch

actions.

19. Explain the concept of CSS-in-JS in React.

CSS-in-JS is an approach where you write and manage CSS styles using JavaScript within your React
components.

20. What is the purpose of React Router's Link component?

The Link component is used for declarative navigation between different routes in a React
application.

21. What is the significance of the componentWillUnmount lifecycle method in React?

componentWillUnmount is called just before a component is removed from the DOM, allowing
you to clean up resources or subscriptions.

22. What are the benefits of using PropTypes in React?

PropTypes help catch bugs early by specifying the expected data types for component props.

23. What is the purpose of the shouldComponentUpdate method in React?

shouldComponentUpdate is used to optimize rendering by controlling when a component should

update.

24. What is the purpose of the dangerouslySetInnerHTML prop in React?

dangerouslySetInnerHTML is used to insert raw HTML into a React component, but it should
be used with caution.
25. Explain how you can optimize performance in a React application.

Performance optimization in React can be achieved through techniques like code splitting, lazy
loading, memoization, and minimizing unnecessary re-renders.

26. What are React hooks, and why were they introduced?

React hooks are functions that allow functional components to use state and other React features
without writing classes. They were introduced to simplify state management and code reuse.

27. What is the purpose of the useLayoutEffect hook in React?

useLayoutEffect is similar to useEffect but runs synchronously after all DOM mutations. It is
often used for measuring DOM elements.

28. Explain the concept of code splitting in React.

Code splitting involves breaking a large JavaScript bundle into smaller chunks that are loaded on-
demand, improving initial page load times.

29. What is the significance of the Suspense component in React?

Suspense is used to handle asynchronous rendering and code splitting, making it easier to manage
loading states.

30. What is the difference between React's forwardRef and context API?

forwardRef is used to pass a ref down to a child component, while the context API is used to
pass data down the component tree without explicitly passing props.

31. What is the purpose of the useEffect hook's dependency array?

The dependency array specifies which values or props should trigger the effect to re-run when they
change.

32. What is the purpose of the React.StrictMode component?

React.StrictMode is used during development to identify potential issues and encourage best
practices in a React application.

33. Explain the concept of "lifting state up" in React.

Lifting state up refers to moving the state from a child component to a common ancestor (usually a
parent) when multiple components need access to the same state.

34. What is the purpose of the withRouter higher-order component in React Router?

withRouter is used to pass the history, location, and match objects from React Router to a
component that is not directly within a route.

35. What is Redux Saga, and how does it work with Redux?

Redux Saga is a middleware library for handling side effects like asynchronous actions in Redux
applications.
36. What is the React Developer Tools extension, and how can it help developers?

The React Developer Tools extension is a browser extension that allows developers to inspect and
debug React components and their state.

37. Explain how to prevent a component from rendering in React.

You can prevent a component from rendering by implementing the shouldComponentUpdate

lifecycle method and returning false.

38. What is the purpose of the useRef hook in React?

useRef is used to create mutable ref objects that can be attached to DOM elements or other
values.

39. What is the difference between context and props for passing data between components in
React?

Props are used to pass data from parent to child components, while context is used to pass data
down the component tree without manually passing props.

40. What is the significance of the Fragment component in React?

The Fragment component is used to group multiple elements without adding an extra DOM
element to the output.

41. Explain the purpose of the useImperativeHandle hook in React.

useImperativeHandle is used to customize the instance value that is exposed when using the
ref attribute on a functional component.
Advanced Level (Questions 71-100):
1. What is server-side rendering (SSR) in React, and why is it important?

SSR is a technique that renders React components on the server and sends HTML to the client,
improving initial page load times and SEO.

2. Explain the concept of lazy loading in React and how it can be implemented.

Lazy loading involves loading components or code chunks only when they are needed, improving
performance. It can be implemented using React.lazy and Suspense.

3. What are React hooks rules and best practices for using them?

Rules include only using hooks at the top level of a functional component and not using them in
loops or nested functions. Best practices include using hooks to manage state and side effects.

4. What is the purpose of the useContext hook in React, and how does it work?

useContext is used to access the current context value within a functional component. It works by
allowing a component to consume values provided by a Context component.

5. Explain the concept of error boundaries in React and how they can be implemented.

Error boundaries are components that catch JavaScript errors during rendering and display a fallback
UI. They can be implemented using the componentDidCatch lifecycle method.

6. What is the purpose of the useLayoutEffect hook in React, and when should it be used over
useEffect?

useLayoutEffect is similar to useEffect but runs synchronously after all DOM mutations. It
should be used when you need to measure or manipulate the DOM immediately after rendering.

7. What are hooks in React and how do they differ from class components?

Hooks are functions that allow functional components to use state and other React features. They
differ from class components by enabling the use of state and lifecycle features in functional
components.

8. What is the purpose of the React.forwardRef function, and how is it used?

React.forwardRef is used to pass a ref to a child component and is typically used with higher-
order components or custom components that need to expose a ref.

9. Explain the concept of React Portals and their use cases.

React Portals allow rendering children into a DOM node outside of the parent component's
hierarchy. They are useful for modals, tooltips, and other UI elements that should not be constrained
by parent styles.

10. What is the significance of the key prop when rendering dynamic lists in React, and how can
you handle list re-ordering efficiently?

The key prop helps React identify and efficiently update components in a list. To handle list re-
ordering efficiently, you should use unique and stable keys and avoid using array indexes.
11. What is the Context API in React, and how does it differ from Redux?

The Context API allows you to pass data down the component tree without manually passing props.
It is simpler and more lightweight than Redux, which is a state management library with more
features.

12. What is the purpose of memoization in React, and how can it be achieved?

Memoization is a technique for optimizing expensive calculations or rendering. It can be achieved

using the useMemo hook or the React.memo higher-order component.

13. Explain the concept of code splitting and how it can be implemented in a React application.

Code splitting involves breaking a large JavaScript bundle into smaller chunks to load only what is
needed. It can be implemented using dynamic imports or the React.lazy function.

14. What is the purpose of the useReducer hook in React, and how does it differ from
useState?

useReducer is used to manage complex state logic by dispatching actions to update state. It differs
from useState by allowing more control over state updates, especially in complex scenarios.

15. What is the role of the Suspense component in React, and how does it relate to data fetching
and code splitting?

Suspense is used to handle asynchronous rendering, including data fetching and code splitting. It
allows components to suspend rendering until data is ready.

16. Explain how to handle forms in React and discuss controlled vs. uncontrolled components.

Handling forms in React involves using controlled components, where form elements are tied to
state, or uncontrolled components, where refs are used to access form values directly.

17. What are React Hooks Custom Hooks, and how can they be created and used?

Custom Hooks are functions that encapsulate reusable logic for functional components. They can be
created by extracting and organizing stateful logic and shared functionality.

18. What is Redux Toolkit, and how does it simplify Redux development?

Redux Toolkit is a set of utility functions and tools that simplify common Redux patterns, including
state management, action creation, and reducer configuration.

19. Explain the concept of server-side rendering (SSR) in React, and what are its advantages and
challenges?

Server-side rendering involves rendering React components on the server and sending HTML to the
client. Its advantages include improved initial load times and SEO, but it can be challenging to set up
and maintain.

20. What is the purpose of the useEffect hook's dependency array, and how can you handle
side effects with it?

The dependency array specifies which values or props should trigger the effect to re-run when they
change. It is used to handle side effects like data fetching and subscriptions.
21. What is the concept of "optimistic UI updates" in React, and how can it be implemented?

Optimistic UI updates involve updating the UI optimistically before confirming the success of an
action. It can be implemented by updating the UI immediately and rolling back the changes if the
action fails.

22. What are some performance optimizations for React applications, such as lazy loading,
memoization, and code splitting?

Performance optimizations in React include lazy loading components, memoizing expensive

computations with useMemo, and splitting code to load only what's needed.

23. What is the significance of the useMemo hook in React, and when should it be used?

useMemo is used to memoize the result of an expensive computation and recalculate it only when
its dependencies change. It can improve performance by preventing unnecessary calculations.

24. What is the Virtual DOM in React, and how does it contribute to performance?

The Virtual DOM is an in-memory representation of the actual DOM. React uses it to minimize direct
DOM manipulation and improve performance by efficiently updating only the changed parts of the
UI.

25. Explain how to handle routing in a React application using React Router, including route
parameters and nested routes.

React Router is used for client-side routing in React applications. Route parameters are used to
capture dynamic segments of the URL, and nested routes allow for a hierarchical route structure.

26. What are the advantages and disadvantages of using Redux for state management in React
applications?

The advantages of using Redux include centralized state management and time-travel debugging.
Disadvantages may include increased complexity for small applications.

27. What are React's synthetic events, and how do they differ from native DOM events?

Synthetic events in React are cross-browser wrappers for native DOM events. They normalize event
handling and improve performance by pooling event objects.

28. Explain how to handle authentication in a React application, including token-based

authentication and protected routes.

Authentication in React typically involves using token-based authentication with libraries like Axios
or the fetch API. Protected routes can be implemented by checking authentication status and
redirecting unauthorized users.

29. What is server-side rendering (SSR) in React, and how does it differ from client-side rendering
(CSR)?

Server-side rendering renders React components on the server and sends HTML to the client,
improving initial page load times and SEO. Client-side rendering renders components in the browser
after loading a minimal HTML shell.
30. What is the purpose of the useEffect hook in React, and how can it be used for data
fetching?

useEffect is used for managing side effects in functional components. It can be used for data
fetching by making asynchronous requests inside the effect callback and updating state accordingly.

These questions should provide a comprehensive overview of React concepts for interviews at
various levels of expertise.