React JS Interview Questions and Answers

Basic Questions

1. What is React?
Answer: React is a JavaScript library for building user interfaces, particularly single-page applications. It
allows developers to create reusable UI components.

2. What are the main features of React?

Answer: The main features include component-based architecture, virtual DOM, JSX, unidirectional data
flow, and declarative UI.

3. What is JSX?
Answer: JSX stands for JavaScript XML. It allows developers to write HTML elements within JavaScript
and place them in the DOM without using functions like createElement().

4. What are components in React?

Answer: Components are the building blocks of a React application. They are reusable pieces of the UI
and can be either class-based or function-based.

5. What is the difference between a class component and a function component?

Answer: Class components are ES6 classes that extend from React.Component and can have state and
lifecycle methods. Function components are simpler and use hooks to manage state and lifecycle.

6. What is the virtual DOM?

Answer: The virtual DOM is a lightweight, in-memory representation of the real DOM. React uses it to
optimize performance by reducing the number of direct manipulations to the actual DOM.

7. What is state in React?

Answer: State is an object that holds data that can change over the lifecycle of a component. It is
managed within the component and influences what is rendered.

8. What are props in React?

Answer: Props (short for properties) are read-only attributes that are passed from parent components
to child components. They allow data to flow between components.
9. What is the difference between state and props?
Answer: State is managed within the component and can change over time, while props are passed
from parent to child components and are immutable (read-only).

10. What is React JS used for?

Answer: React is used for building user interfaces specifically for single-page applications. React allows
us to create reusable components. React will efficiently update and render just the right components
when the data changes.

11. How does one create a React component?

Answer: You can create a React component by defining a JavaScript function or class that returns a
React element. Function components use a function to return JSX, while class components use a render
method.

12. What is the purpose of the render method in a class component?

Answer: The render method in a class component returns the React elements that should be displayed
in the UI. It is a required method for class components.

13. What is the role of keys in React?

Answer: Keys help React identify which items have changed, are added, or are removed. They should be
unique among siblings and are used to optimize re-rendering of list items.

14. What are lifecycle methods in React?

Answer: Lifecycle methods are special methods in class components that are called at different stages of
a component's lifecycle, such as componentDidMount, componentDidUpdate, and
componentWillUnmount.

15. What is the significance of setState in React?

Answer: setState is a method used to update the state of a component. It schedules an update to the
component's state object and tells React to re-render the component with the updated state.

16. What is the purpose of the constructor method in a React class component?

Answer: The constructor method is used to initialize the component's state and bind event handlers
before the component is mounted.

17. What is React's unidirectional data flow?

Answer: React's unidirectional data flow means that data flows in one direction, from parent to child
components via props. This makes it easier to understand how data changes in the application.
18. How do you handle events in React?
Answer: Events in React are handled using camelCase syntax for event names and passing a function as
the event handler. For example, <button onClick={handleClick}>.

19. Why React is faster than JavaScript?

Answer: React is a JavaScript library, thus technically it isn't faster at the act of DOM manipulation than
JavaScript itself. React isn't faster than JavaScript. It is approximately as fast as JavaScript.

20. What are controlled components in React?

Answer: Controlled components are form elements that have their state controlled by React. Their
values are set by state and updated via event handlers.

21. What are uncontrolled components in React?

Answer: Uncontrolled components are form elements that maintain their own state internally and are
accessed using refs for their current values.

22. Why React instead of Angular?

Answer: React uses virtual DOM whereas Angular uses HTML DOM. React beats Angular in terms of
performance as React updates only what is necessary without rewriting the whole HTML DOM. React
has larger community than Angular.

23. What are synthetic events in React?

Answer: Synthetic events are React's cross-browser wrapper around the browser's native event system.
They provide a consistent interface for handling events in React components.

24. What is the purpose of the defaultProps property in React?

Answer: defaultProps is used to define default values for props in a component. It ensures that the
component has sensible defaults if certain props are not provided.

25. How do you pass data from a parent component to a child component?
Answer: Data is passed from a parent component to a child component via props. The parent
component defines the props and passes them to the child component in the JSX.
 Advanced Questions

1. What is server-side rendering (SSR) in React?

Answer: Server-side rendering (SSR) is the process of rendering React components on the server and
sending the fully rendered HTML to the client. This can improve performance and SEO by providing a
fully rendered page to the browser.

2. How do you optimize performance in a React application?

Answer: Performance optimization techniques include using React's memo, useMemo, and
useCallback to avoid unnecessary re-renders, code splitting, lazy loading, avoiding anonymous
functions in render, and using the virtual DOM efficiently.

3. What is react-router?

Answer: React Router is a library for routing in React. It enables the navigation among routes in a React
Application. It allows changing the browser URL, and keeps the UI in sync with the URL.

4. What is React Context?

Answer: React Context is a mechanism to avoid prop drilling. Prop Drilling means passing data from one
Component to another Component that does not need the data but only helps in passing it through the
tree.

5. What is routing?
Answer: Routing in React JS is a mechanism that allows you to navigate and display different views or
components in a single-page web application. It enables users to move between different parts of the
application without the need for a full page reload

6. How do you handle routing in react?

Answer: In React, we can use a third-party library called react-router-dom for handling Routing in our
application. It provides the necessary components for managing navigation and rendering components
like BrowserRouter, Route, Link, and Switch.

7. What is lazy loading in ReactJS?

Answer: Lazy loading is a technique used to load components or resources only when they are needed.
It helps to improve the performance of the application by reducing the initial load time.

8. What are hooks in React?

Answer: Hooks are functions that let you use state and other React features in function components.
Common hooks include useState and useEffect.
9. What is useState?

Answer: useState is a hook that allows you to add state to function components. It returns an array
with the current state value and a function to update it.

10. What is useEffect?

Answer: useEffect is a hook that allows you to perform side effects in function components. It runs
after the component renders and can be used for tasks like fetching data or directly manipulating the
DOM.

11. How do you use context in React?

Answer: Context provides a way to pass data through the component tree without passing props down
manually at every level. It is created using React.createContext and used with
Context.Provider and Context.Consumer.

12. What is the context API?

Answer: The context API is a React feature that allows you to manage global state by creating a context
object and using its provider to make the state available to nested components.

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

Answer: Controlled components have their state controlled by React (using state and props), while
uncontrolled components manage their own state internally, usually through refs.

14. What is prop drilling and how can it be avoided?

Answer: Prop drilling refers to passing props through multiple intermediate components to reach a
deeply nested component. It can be avoided using context or state management libraries like Redux.

15. What is React.memo?

Answer: React.memo is a higher-order component that memoizes the rendered output of a functional
component, preventing unnecessary re-renders when the props have not changed.

16. What is the difference between useCallback and useMemo?

Answer: useCallback returns a memoized callback function, used to avoid recreating functions on
every render. useMemo returns a memoized value, used to avoid recomputing expensive calculations on
every render.

17. What is React Fiber?

Answer: React Fiber is a complete rewrite of React's reconciliation algorithm. It improves React's ability
to handle complex updates, providing a more responsive and fluid user experience by enabling
incremental rendering and yielding to the main thread.
18. What is axios in React?

Answer: Axios is a popular JavaScript library used to make HTTP requests. It is similar to the fetch
method. Axios is used to fetch data from APIs and then render that data in their React components.

19. How do we avoid re-rendering a component?

Answer: We can use the React Lifecycle method shouldComponentUpdate to avoid re-rendering of a
component even if state or prop values may have changed. The React shouldComponentUpdate method
requires you to return a boolean value. If true is returned, it re-renders the component. Else, it won't re-
render.

20. Is JSX a necessity for React?

Answer: JSX is not a necessity for React. We can write a React component without using JSX. Each JSX
element is just syntactic sugar for calling React.createElement(component, props, ...children). So,
anything you can do with JSX can also be done with just JavaScript.

21. What is a Pure Component in React?

Answer: A React component can be considered pure if it renders the same output for the same state
and props.

22. What is an Event Delegation in React?

Answer: Event delegation is a practice to handle events efficiently. Instead of attaching an event handler
to each element, we can attach a single event handler to the parent element.

23. What function allows to bind the context of the component?

Answer: To bind the context of the components in methods, we can use Arrow functions. Arrow
functions inherit this from the context in which the code is defined.

24. How do you implement a custom hook in React?

Answer: Custom hooks allow you to encapsulate reusable logic. They start with the use prefix and can
call other hooks.

25. What are render props in React?

Answer: Render props are a technique for sharing code between components using a prop whose value
is a function. This function receives props and returns a React element.