React Important Points

What is ReactJS?

React JS is a popular JavaScript library for building user interfaces,

particularly single-page applications where we need a dynamic,
responsive experience. It is highly efficient and uses a virtual DOM to
render components. It works on the client side and is written in JSX.

What are the major features of ReactJS?

The major features of ReactJS are as follows,

●​ It uses VirtualDOM instead of RealDOM considering that RealDOM

manipulations are expensive.
●​ Supports server-side rendering
●​ Follows Unidirectional data flow or data binding
●​ Uses reusable/composable UI components to develop the view

How React JS Works?

React is a JavaScript library that efficiently updates the user interface

(UI) by using the concept of the Virtual DOM. The Virtual DOM is an
in-memory representation of the actual DOM. When a component's state
or props change, React doesn’t immediately update the real DOM.
Instead, it updates the Virtual DOM first, which is faster to manipulate.
Here's how the process works step-by-step:**

1.​ Initial Rendering:

○​ When an app first loads, React creates a Virtual DOM tree
based on the components' render methods and displays the
UI. This tree mirrors the structure of the actual DOM but
stays in memory.
2.​ State/Props Change:
○​ When a component's state or props change (for example,
user input), React triggers a re-render. The component's
render method produces a new Virtual DOM tree to represent
the updated UI.
3.​ Diffing Algorithm:
○​ React compares the new Virtual DOM tree with the previous
one using a process called diffing. The algorithm identifies
what has changed — whether it’s a new element, a changed
attribute, or an element that has been removed. This
comparison happens in-memory, which is much faster than
manipulating the real DOM directly.
4.​ Reconciliation:
○​ After diffing, React calculates the minimal set of changes
required and applies these changes to the real DOM. This
step is called reconciliation, where only the necessary DOM
elements are updated, and React avoids re-rendering
everything.
5.​ Efficient DOM Updates:
○​ By minimizing the number of updates, React avoids
performance bottlenecks. Directly updating the real DOM is
slow because it triggers expensive browser reflows and
repaints. React’s approach ensures that only the parts of the
UI that need to change are updated, which leads to smoother,
faster interactions.
6.​ Asynchronous Updates:
○​ React is designed to batch updates and can prioritize user
interactions over background changes, ensuring a responsive
user experience without blocking the main thread."
What is State and Props?

In React, State and Props are fundamental concepts used to manage

data and control component behavior.

State

●​ State is a local data storage for a component that can change over
time.
●​ It is mutable, meaning it can be updated using functions like
useState in functional components or setState in class
components.
●​ State is used for managing dynamic data, such as form inputs,
button clicks, or API responses.
●​

Props

●​ Props (short for properties) are used to pass data from a parent
component to a child component.
●​ They are immutable, meaning the child cannot modify them.
●​ Props enable communication between components and are often
used to make components reusable.

When to use a Class Component over a Function

Component?
After the addition of Hooks(i.e. React 16.8 onwards) it is always
recommended to use Function components over Class components in
React. Because we could use state, lifecycle methods and other features
that were only available in the class component present in the function
component too.
But even there are two reasons to use Class components over Function
components.
i.​ If you need a React functionality whose Function component
equivalent is not present yet, like Error Boundaries.
ii.​ In older versions, If the component needs state or lifecycle
methods then you need to use a class component.

What is Virtual DOM and how does it work?

The Virtual DOM is a lightweight, in-memory representation of the real

DOM in React. It serves as an intermediate step between the real DOM
and the component’s state changes, helping React optimize updates to
the UI.

What is a controlled component and uncontrolled component and

which is preferred?

In React, controlled and uncontrolled components refer to how form

data is handled and stored in a component.​
​
Controlled Component:

A controlled component is a form element whose value is controlled by

the React component's state.

How it works:

○​ The input field’s value is bound to a state variable.

○​ The input's value is updated through setState or the
useState hook.
○​ React has full control over the value of the input element.

Uncontrolled Component:

An uncontrolled component is a form element whose value is not

directly controlled by React’s state. Instead, the form data is handled by
the DOM itself, and React interacts with it through refs.
●​ How it works:
○​ The form element’s value is managed by the DOM, not
React’s state.
○​ You use a ref to access the DOM element and get its value
when needed.

Can you explain to me what webpack is and how it works?

webpack is a module bundler for JavaScript applications. It takes all our

modules, such as JavaScript files, CSS files, and images, and bundles
them together into a single output file. It also has the ability to optimise
and transform your code, making it more efficient for browsers to parse
and execute.

Exp -𝐈𝐦𝐚𝐠𝐢𝐧𝐞 𝐲𝐨𝐮'𝐫𝐞 𝐩𝐚𝐜𝐤𝐢𝐧𝐠 𝐟𝐨𝐫 𝐚 𝐭𝐫𝐢𝐩. 𝐈𝐧𝐬𝐭𝐞𝐚𝐝 𝐨𝐟 𝐜𝐚𝐫𝐫𝐲𝐢𝐧𝐠 𝐢𝐧𝐝𝐢𝐯𝐢𝐝𝐮𝐚𝐥

𝐢𝐭𝐞𝐦𝐬 𝐬𝐞𝐩𝐚𝐫𝐚𝐭𝐞𝐥𝐲, 𝐞𝐯𝐞𝐫𝐲𝐭𝐡𝐢𝐧𝐠 pack 𝐢𝐧𝐭𝐨 𝐨𝐧𝐞 𝐬𝐮𝐢𝐭𝐜𝐚𝐬𝐞, 𝐦𝐚𝐤𝐢𝐧𝐠 𝐢𝐭 𝐞𝐚𝐬𝐢𝐞𝐫 𝐭𝐨
𝐦𝐚𝐧𝐚𝐠𝐞 𝐚𝐧𝐝 𝐭𝐫𝐚𝐧𝐬𝐩𝐨𝐫𝐭.

What are the loaders and plugins in webpack? Can you explain what
they are and how they differ?

Loaders and plugins are both essential parts of webpack, but they serve
different purposes. Loaders are used to preprocess files before they are
added to the bundle. For example, you might use a loader like Babel to
transpile your ES6 JavaScript code into ES5, which is compatible with
older browsers. Plugins, on the other hand, are used to perform a wider
range of tasks, such as bundle optimization, asset management, and
environment configuration. They hook into the webpack compilation
process and can manipulate the bundle in various ways.

𝐀𝐧 𝐞𝐱𝐚𝐦𝐩𝐥𝐞 𝐟𝐨𝐫 𝐭𝐡𝐢𝐬 𝐰𝐨𝐮𝐥𝐝 𝐛𝐞 𝐝𝐞𝐜𝐨𝐫𝐚𝐭𝐢𝐧𝐠 𝐚 𝐜𝐚𝐤𝐞. 𝐋𝐨𝐚𝐝𝐞𝐫𝐬 𝐚𝐫𝐞 𝐥𝐢𝐤𝐞 𝐩𝐫𝐞𝐩𝐚𝐫𝐢𝐧𝐠
𝐭𝐡𝐞 𝐢𝐧𝐠𝐫𝐞𝐝𝐢𝐞𝐧𝐭𝐬 – 𝐦𝐢𝐱𝐢𝐧𝐠 𝐭𝐡𝐞 𝐛𝐚𝐭𝐭𝐞𝐫, 𝐚𝐝𝐝𝐢𝐧𝐠 𝐟𝐥𝐚𝐯𝐨𝐫𝐬, 𝐞𝐭𝐜. – 𝐰𝐡𝐢𝐥𝐞 𝐩𝐥𝐮𝐠𝐢𝐧𝐬 𝐚𝐫𝐞
𝐥𝐢𝐤𝐞 𝐚𝐝𝐝𝐢𝐧𝐠 𝐟𝐫𝐨𝐬𝐭𝐢𝐧𝐠, 𝐝𝐞𝐜𝐨𝐫𝐚𝐭𝐢𝐨𝐧𝐬, 𝐚𝐧𝐝 𝐟𝐢𝐧𝐚𝐥 𝐭𝐨𝐮𝐜𝐡𝐞𝐬 𝐭𝐨 𝐦𝐚𝐤𝐞 𝐭𝐡𝐞 𝐜𝐚𝐤𝐞 𝐥𝐨𝐨𝐤
𝐚𝐧𝐝 𝐭𝐚𝐬𝐭𝐞 𝐞𝐯𝐞𝐧 𝐛𝐞𝐭𝐭𝐞𝐫.
What is tree shaking, and how does webpack utilise it to optimise
bundles?

Tree shaking is a process used to remove unused code from our bundle.
It works by analysing the code and identifying which modules and
exports are not being used anywhere in your application. Then, it
eliminates those unused parts from the final bundle, resulting in a
smaller and more efficient package.

What are Higher-Order Components?

An HOC is a function that takes a component and returns a new
component. This allows for code reuse and separation of concerns
without altering the original component.

Imagine you have multiple components that need to fetch data from an
API. Instead of duplicating the data-fetching logic in each component,
you can create an HOC to handle it.

What is a Pure Component?

A PureComponent in React is a type of component that optimises

performance by n a shallow comparison of props and state. This means
that React will only re-render the component if its props or state have
changed, which can help avoid unnecessary renders and improve
performance.

Basic Use - Consider a component that renders a list of items and has
performance concerns when the list grows large or the parent
component frequently re-renders. Using PureComponent can help
ensure that this component only re-renders when its actual data
changes.
What is the use of the react-dom package?
The react-dom package provides DOM-specific methods that can be
used at the top level of our app. Most of the components are not
required to use this module. Some of the methods of this package are:
i.​ render()
ii.​ hydrate()
iii.​unmountComponentAtNode()
iv.​findDOMNode()
v.​ createPortal()

What are hooks ?

Hooks are special JavaScript functions introduced in React

16.8 that allow you to use state, side effects, and other
features in functional components. Before hooks, state and
lifecycle methods were only available in class components,
but hooks bring these capabilities to functional components,
making them more powerful and concise.​
​
1. useState

The useState hook allows functional components to manage

state. It returns a pair: the current state value and a function
to update it

2. useEffect

The useEffect hook allows you to perform side effects in

function components. Side effects can include things like
fetching data, updating the DOM, or setting up timers.
3. useContext

useContext allows you to access the React context. It is used

to manage global state in your application, making it easy to
share data (like themes, user info) without passing props
manually through every level of the component tree.

4. useReducer

useReducer is similar to useState, but it allows for more

complex state logic. It’s often used when the state depends
on multiple values or actions.

​
5. useCallback

The useCallback hook returns a memoized version of a

callback function. It’s useful when you pass a function as a
prop to a child component, and you want to avoid unnecessary
re-creations of the function on each render.

6. useMemo

useMemo returns a memoized value, which is only recomputed

when the dependencies change. It's helpful when you want to
optimize expensive calculations or render operations.

7. useLayoutEffect

useLayoutEffect is similar to useEffect, but it runs

synchronously after all DOM mutations. It’s useful when you
need to measure DOM elements or perform calculations that
need to be done before the browser paints the screen.

8. useTransition

useTransition is a hook for handling concurrent rendering

in React. It helps to manage state updates that are less
urgent, improving performance by deferring non-urgent
updates.

9.useRef

useRef is used to persist a value across renders without

causing a re-render when the value changes. It is commonly
used to reference DOM elements directly or store mutable
values.

useMemo vs useCallback vs React.memo

Suppose you have a component that performs a complex

calculation based on some input data. If this calculation is
expensive and you want to avoid recalculating it on every
render unless the input data changes, useMemo is the right tool.

Imagine you have a child component that receives a callback

function as a prop. You want to avoid creating a new instance
of this callback on every render of the parent component,
which could lead to unnecessary re-renders of the child
component.

React.memo is a higher-order component used to optimise

functional components by preventing unnecessary re-renders.
It performs a shallow comparison of props to determine if the
component should re-render. If the props haven't changed, the
component is not re-rendered.
1. Props Drilling

●​ Definition: Props drilling occurs when you pass data

through multiple layers of components, even when only a
deeply nested component needs the data.
●​ How it works: Each component in the tree has to pass
the props down, even if the intermediary components
don’t use them.
●​ Use Case: Useful in very simple applications with limited
state management needs.
●​ Drawbacks:
○​ Leads to cluttered and hard-to-maintain code,
especially in deep component hierarchies.
○​ If the app scales, modifying or adding a new state
requires passing down props to multiple components,
which increases complexity and potential bugs.

2. Context API

●​ Definition: The Context API allows you to create a global

state that can be accessed by any component without
passing props manually at each level.

Key Points for Interview:

1.​Context API Use: Share state globally without

prop-drilling.
2.​Components:
○​ createContext: To create the context.
○​ Provider: Wraps components and supplies the state.
○​ useContext: Access the context in child components.
3.​When to Use: For state shared across multiple
components, like themes or user authentication.
3- Redux Toolkit

●​ Definition: Redux Toolkit (RTK) is a set of tools and best

practices to simplify using Redux, a state management

Key Points for Interview:

1.​Redux Toolkit Simplifies Workflow:

○​ createSlice: Combines actions and reducers.
○​ configureStore: Simplifies store setup and
middleware integration.
2.​Core Hooks:
○​ useSelector: Reads state from the store.
○​ useDispatch: Dispatches actions to modify state.
3.​When to Use:
○​ Ideal for global state in medium-to-large
applications, especially where multiple components
share or modify the same data.

How does Reducer work in redux?

In Redux, a reducer is a pure function responsible for specifying how the

application's state should change in response to an action. It acts as the
"brain" of the Redux state management system, taking the current state
and an action as inputs and returning the updated state.
Key Responsibilities of a Reducer:

1.​ State Update Logic: Reducers contain the logic to determine how
the state changes based on the type of action dispatched.
2.​ Pure Function: Reducers must always produce the same output for
the same input, without causing side effects (e.g., API calls or
mutations).
3.​ Immutable Updates: Reducers create new state objects without
modifying the existing state, ensuring immutability

Work Flow of Redux ​

​
​
​

​
​
​
​
​

Why Prefer Redux Toolkit over Context API or Props

Drilling:
○​ Scalability: Redux Toolkit is much better suited for
managing large or complex states across a big
application.
○​ Separation of Concerns: It clearly separates state,
actions, and reducers, making the logic more
manageable.
○​ Performance: Redux optimises state updates by
ensuring only the components that need data
updates are re-rendered, avoiding unnecessary
re-renders that can happen with Context API.
○​ Debugging: The Redux DevTools make it easier to
track state changes, while Context API doesn’t
provide such tools.

Which is better 1 - setNameList(()=> [...nameList,

newName]) 2 - setNameLisit((prev)=> [...prev,
newName]) ​
​
Previous State Reference: The second method uses a function
to access the previous state (prev). This is crucial in React
when you’re updating state based on the current state, as it
ensures that you’re working with the most up-to-date version
of the state.

Avoiding Race Conditions: The first method (setNameList(()

=> [...nameList, newName])) relies on the nameList variable
at the time the state update is called. If multiple updates
happen in quick succession, it may lead to stale or incorrect
state because nameList might not reflect the latest changes.

Performance: By using the functional update form, React can

more efficiently batch state updates, reducing unnecessary
re-renders.
React VS Next

React and Next.js are both powerful tools for building web
applications, but they serve slightly different purposes and
have their own advantages and disadvantages. Here's a
breakdown:

React

Pros:

1.​Component-Based Architecture: Encourages reusable

components, which can simplify development and
maintenance.
2.​Large Ecosystem: A vast community and extensive
libraries/tools to enhance functionality.
3.​Flexibility: You can choose your routing, state
management, and other tools.
4.​Rich UI Libraries: Many pre-built UI libraries (like
Material-UI, Ant Design) are available.

Cons:

1.​SEO Challenges: React is client-side rendered by default,

which can make SEO more complex unless additional
setups (like server-side rendering) are implemented.
2.​Boilerplate Code: Requires more setup for routing and
state management, which can lead to boilerplate code.
3.​Learning Curve: New concepts (like hooks) may have a
steeper learning curve for beginners.

Next.js

Pros:
1.​Server-Side Rendering (SSR): Built-in support for SSR
improves SEO and performance.
2.​Static Site Generation (SSG): Allows for pre-rendering
pages at build time, which can enhance loading speed.
3.​File-Based Routing: Simplifies routing with a
straightforward file structure.
4.​API Routes: Enables building serverless functions directly
within the application.
5.​Automatic Code Splitting: Optimizes loading by only
loading the necessary code for each page.

Cons:

1.​Less Flexibility: While it provides many built-in features, it

may feel restrictive compared to using React alone.
2.​Learning Curve: Understanding the Next.js conventions
and features may require additional learning.
3.​Build Times: For large projects, build times can become
lengthy with SSG.

Which to Prefer?

●​ Use React if you need a highly customizable front-end

solution and are okay with handling routing, state
management, and SEO manually.
●​ Use Next.js if you want built-in support for SSR, SSG, and
a more straightforward routing setup, especially for
SEO-sensitive applications.

React Performance Points

To optimize the performance of a React application, I would
start by identifying where the performance bottlenecks are.
1.​Slow Initial Load Time
●​ Code Splitting: Use React’s React.lazy() and Suspense
to load components only when needed.
●​ Tree Shaking: Ensure that your build process (e.g.,
Webpack) removes unused code.
●​ Optimize Bundle Size: Use tools like Webpack Bundle
Analyzer to identify and reduce the size of your bundles.
●​ Minification: Minify your JavaScript and CSS files in
production.

2. Frequent Re-renders

●​ Memoization: Use React.memo for functional components

and PureComponent for class components to prevent
unnecessary re-renders.
●​ useMemo and useCallback: Use these hooks to
memoize values and functions to avoid recalculating them
on every render.
●​ Optimizing State Management: Lift state up or use
context wisely to avoid unnecessary updates in child
components.

3. Slow Rendering of Large Lists

●​ Virtualization: Implement libraries like react-window or

react-virtualized to only render visible items in large
lists.
●​ Pagination: Instead of loading all data at once, load data
in chunks (e.g., server-side pagination).
●​ components that don’t need to re-render.

5. Heavy Computations During Rendering

●​ Web Workers: Offload heavy computations to web
workers to prevent blocking the main thread.
●​ Debouncing and Throttling: For events like scroll or
resize, use debouncing or throttling to limit the number of
state updates.

6. Inefficient API Calls

●​ Batching Requests: Combine multiple API requests into

one if possible.
●​ Caching: Use libraries like React Query to cache data and
minimize requests.

useEffect VS useLayoutEffect

In React, both useEffect and useLayoutEffect are hooks that

allow you to perform side effects in function components.
However, they are used in different scenarios and have
different timings in the component lifecycle.

useEffect

Description:

●​ Runs after the DOM has been updated. It doesn't block

the browser from painting.

Usage:

●​ Ideal for operations that don't require immediate

reflection in the DOM, such as fetching data, setting up
subscriptions, or manipulating data.
Pros:

●​ Non-blocking: Doesn't prevent the browser from painting,

leading to smoother user experience.
●​ Good for asynchronous operations: Since it runs after the
render, it’s suitable for operations like fetching data.

Cons:

●​ Changes to the DOM might not be visible immediately, as

it runs after the paint.
●​ You might see a flicker if the effect causes a re-render.

useLayoutEffect

Description:

●​ Runs synchronously after all DOM mutations but before

the browser has painted. It blocks the paint until it
completes.

Usage:

●​ Ideal for operations that need to read layout from the

DOM and re-render synchronously, such as measuring
elements, synchronously modifying the DOM, or
performing animations.

Pros:

●​ Immediate layout updates: It allows you to measure and

manipulate the DOM before the browser paints, which can
prevent flickering.
●​ Useful for synchronizing visual updates with the DOM.

Cons:

●​ Can lead to performance issues if used excessively, as it

blocks painting and can cause janky experiences.
●​ Not suitable for asynchronous operations, as it expects
synchronous behavior.

When to Use

●​ Use useEffect:
○​ For side effects that don't require immediate DOM
updates.
○​ When dealing with APIs, subscriptions, or timers.
●​ Use useLayoutEffect:
○​ When you need to measure or modify the DOM
immediately after changes.
○​ For animations or layout calculations that require
immediate access to the DOM before painting.

Summary

●​ Choose useEffect for most cases as it optimizes user

experience by not blocking rendering.
●​ Opt for useLayoutEffect in scenarios where layout
calculations are crucial, but use it judiciously to avoid
performance pitfalls.

Data Binding in React

Data binding in React refers to the process of connecting the

UI (user interface) with the application's data (state or props).

React primarily supports one-way data binding, where the

data flows in a single direction, from parent to child or from
state/props to the UI.
​
​
React Lifecycle Methods in Class and Functional Components

1. Mounting (Component Creation): This phase occurs when a

component is inserted into the DOM.

2. Updating (Component Re-rendering): This phase occurs

when props or state are updated.

3. Unmounting (Component Removal): This phase occurs

when a component is removed from the DOM.

Lifecycle Diagram

Here’s a simplified flow:

●​ Mounting: constructor() →
getDerivedStateFromProps() → render() →
componentDidMount()
●​ Updating: getDerivedStateFromProps() →
shouldComponentUpdate() → render() →
getSnapshotBeforeUpdate() → componentDidUpdate()
●​ Unmounting: componentWillUnmount()

Presentation Component: A Presentation Component is a

type of component focused primarily on how things look. it
doesn't manage state or side effects.

Race Condition - a situation where the behavior of a program

depends on the relative timing of asynchronous operations.