Q1. Explain the concept of a Virtual DOM in React.

A Virtual DOM (Document Object Model) is a lightweight in-memory

representation of the actual DOM in a web page. In React, the Virtual
DOM acts as an intermediary between the React component’s render
output and the browser’s DOM.

When a React component’s state changes, react updates the Virtual

DOM, instead of directly updating the actual DOM. This is more efficient
because updating the Virtual DOM is faster than updating the actual
DOM, as it can calculate the difference between the previous and
current render output, and only update the parts that have changed.

React then takes the updated Virtual DOM and uses it to update the
actual DOM, minimizing the amount of work that needs to be done in the
actual DOM and improving the overall performance of the application.

In summary, the Virtual DOM in React acts as an optimization to

increase the speed and efficiency of updates to the user interface.

Q2. How do browsers read JSX?

In general, browsers are not capable of reading JSX and only can read
pure JavaScript. The web browsers read JSX with the help of a
transpiler. Transpilers are used to convert JSX into JavaScript. The
transpiler used is called Babel

Q3. What is higher-order component in React?

Higher-order components or HOC is the advanced method of reusing
the component functionality logic. It simply takes the original component
and returns the enhanced component. HOC are beneficial as they are
easy to code and read. Also, helps to get rid of copying the same logic in
every component.

Q4. Explain the lifecycle methods of components?

A React Component can go through four stages of its life as follows.

Initialization: This is the stage where the component is constructed with

the given Props and default state. This is done in the constructor of a
Component Class.

Mounting: Mounting is the stage of rendering the JSX returned by the

render method itself.

Updating: Updating is the stage when the state of a component is

updated, and the application is repainted.

Unmounting: As the name suggests Unmounting is the final step of the

component lifecycle where the component is removed from the page.

Q5. Explain Lifting State Up in React.

When multiple components need to share the same data, it is advised to
lift the shared state up to their parent. This means when two child
components share the same data from their parent, the state is lifted up
to the parent instead of the child components.

Q6. What do you know about controlled and uncontrolled

components?

Controlled Components
1. They do not maintain their own state
2. Data is controlled by the parent component
3. They take in the current values through props and then notify the
changes via callbacks

Uncontrolled Components
1. They maintain their own state.
2. Data is controlled by the DOM.
3. Refs are used to get their current values
Q7. What is the use of ref in React?

Refs are a function provided by React to access the DOM element and
the React element that you might have created on your own. They are
used in cases where we want to change the value of a child component,
without making use of props and all. They have wide functionality as we
can use callbacks with them.

The syntax to use ref is

const node = this.myCallRef.current;

Q8. What is prop drilling and its disadvantages?

Prop drilling is basically a situation when the same data is being sent at
almost every level due to requirements in the final level. The problem
with Prop Drilling is that whenever data from the Parent component will
be needed, it would have to come from each level, regardless of the fact
that it is not needed there and simply needed in the last.
Q9. What are custom hooks in React?

Custom hooks are normal JavaScript functions whose names start with
“use”, and they may call other hooks. We use custom hooks to maintain
the DRY concept that is Do not Repeat Yourself. It helps us to write a
logic once and use it anywhere in the code.

Q10.What are benefits of using react-redux?

They are several benefits of using react-redux such as:
It provides centralized state management i.e. a single store for whole
application
It optimizes performance as it prevents re-rendering of component
Makes the process of debugging easier
Since it offers persistent state management therefore storing data for
long times become easier

Q11.List down the components of Redux.

Redux is composed of the following components:

Action – It is an object that describes what happened.

Reducer – It is a place to determine how the state will change.

Store – State/ Object tree of the entire application is saved in the Store.

View – Simply displays the data provided by the Store.

In case you are facing any challenges with these React interview
questions, please comment on your problems in the section below.

Q12.Explain the role of Reducer.

Reducers are pure functions which specify how the application’s state
changes in response to an ACTION. Reducers work by taking in the
previous state and action, and then it returns a new state. It determines
what sort of update needs to be done based on the type of the action,
and then returns new values. It returns the previous state as it is if no
work needs to be done.

Q13.What is context API?

Context API is used to pass global variables anywhere in the code. It
helps when there is a need for sharing state between a lot of nested
components. It is light in weight and easier to use, to create a context
just need to call React.createContext(). It eliminates the need to install
other dependencies or third-party libraries like redux for state
management. It has two properties Provider and Consumer.

Q14.Explain the difference between server-side rendering and

client-side rendering in React.

In a React application, there are two main ways to render the

components: server-side rendering (SSR) and client-side rendering
(CSR).
Server-side rendering (SSR) is when the initial render of a React
application is done on the server. The server generates the HTML for
the initial state of the application and sends it to the browser. When the
JavaScript bundle loads, React takes over and the application continues
to function as a SPA (Single-Page Application) on the client side.

This approach has a few benefits such as:

Improved performance for search engines and users on slow
connections
Faster time-to-first-byte
Better accessibility for users who have JavaScript disabled

Q15.How do you handle optimization in a large React application?

There are several techniques that can be used to optimize a large React
application:

Use the React Developer Tools to identify and fix performance

bottlenecks. The React Developer Tools allow you to track the
performance of individual components and identify which components
are causing the most re-renders.

Use the shouldComponentUpdate lifecycle method to prevent

unnecessary re-renders. This method allows you to control when a
component should update based on its props and state.

Use PureComponent and memo instead of Components. These are

more efficient alternatives to React.Component that only re-render when
props or state have changed.

Use the useEffect hook to handle side effects. This hook allows you to
run side effects, such as network requests, after a component has
rendered.
Use the useMemo hook to memoize expensive calculations. This hook
allows you to cache the results of expensive calculations and only
recalculate them when the inputs have changed.

Lazy loading: Lazy loading is a technique where you only load the
components that are needed for the current view. This can greatly
improve the performance of your application.

Code splitting: Code splitting is a technique where you split your

application into smaller chunks of code that are loaded on demand. This
can greatly improve the performance of your application.

Optimize the loading time of your application by using techniques like

code minification, compression, and caching.

It’s also important to keep in mind that performance optimization is an

ongoing process and you should regularly check and optimize your
application as it grows.

Q16.Explain the concept of a Render Prop in React.

A render prop in React is a technique for conveying component logic.

Instead of using a component’s props to communicate data and
behaviour, a render prop is a function that a component utilises to select
what to render. The “provider” component makes the render prop
available, but the “consumer” component is the one that uses it. With
this approach, component flexibility and reuse are enhanced.

Q18.How do you handle security in a React application?

Handling security in a React application involves multiple steps,
including:

Input validation: Validate all user inputs on the client and server side to
prevent any malicious data from being processed.

Authenticating and authorizing users: Use a secure authentication

mechanism such as JSON Web Tokens (JWT) to ensure that only
authorized users can access sensitive data.

Storing sensitive data securely: Do not store sensitive information

such as passwords and credit card numbers in local storage, use
encrypted storage instead.

Implementing HTTPS: Use HTTPS to ensure secure communication

between the client and server and protect against network attacks such
as man-in-the-middle attacks.

Keeping dependencies up to date: Regularly update React and its

dependencies to patch any known security vulnerabilities.

Using Content Security Policy (CSP): Implement a Content Security

Policy (CSP) to restrict the types of resources that can be loaded in a
React application and prevent cross-site scripting (XSS) attacks.

Regular security audits: Conduct regular security audits to identify and

address potential security issues in a timely manner.
Q19.What is the difference between a function component and a
class component in React?

In React, there are two main types of components: function components

and class components.

Function Components, also known as “stateless” or “functional”

components, are JavaScript functions that accept props as input and
return React elements as output. They are simple, easy to understand
and test, and are usually used for presentational components that do not
have their own state or lifecycle methods.

Class Components, on the other hand, are JavaScript classes that

extend the React. Component base class. They are used for creating
components that have a state or need to access lifecycle methods such
as componentDidMount or shouldComponentUpdate. Class components
are more complex than function components but provide more advanced
features.

In summary, the main difference between function and class

components in React is that function components are simpler, more
straightforward, and easier to understand, while class components are
more powerful and provide more advanced features but are also more
complex.
Q20.What is reconciliation?

Reconciliation is the process through which React updates the Browser

DOM and makes React work faster. React uses a diffing algorithm so
that component updates are predictable and faster. React would first
calculate the difference between the real DOM and the copy of DOM
(Virtual DOM) when there's an update of components. React stores a
copy of Browser DOM which is called Virtual DOM. When we make
changes or add data, React creates a new Virtual DOM and compares it
with the previous one. This comparison is done by Diffing Algorithm.
Now React compares the Virtual DOM with Real DOM. It finds out the
changed nodes and updates only the changed nodes in Real DOM
leaving the rest nodes as it is. This process is called Reconciliation.

Q21.What is Redux Thunk?

Redux Thunk middleware allows you to write action creators that return
a function instead of an action. The thunk can be used to delay the
dispatch of an action or to dispatch only if a certain condition is met. The
inner function receives the store methods dispatch() and getState() as
parameters.