Important ReactJS Technical Interview

Questions Set 1

1.What is React?
React is a JavaScript library used to build user interfaces, especially for single-page
applications (SPAs). It helps you create dynamic and interactive web apps by breaking
down the interface into small, reusable pieces called components.
Key Points:
1. Component-based: You build your UI by creating components, which are like building
blocks of your app.
2. Declarative: You tell React how the UI should look based on the data, and React
automatically updates the UI when the data changes.
3. Virtual DOM: React uses a fast, lightweight version of the real DOM to make updates
more efficient, so your app runs faster.
4. JSX: React allows you to write HTML-like code inside JavaScript, making it easier to
design and build the UI.

2. What is Usememo?
useMemo is a React hook that memoizes (remembers) the result of a calculation and only
recomputes it when its dependencies change. It helps optimize performance by preventing
expensive calculations from running on every render.
const memoizedValue = useMemo(() => expensiveFunction(), [dependency]);
 expensiveFunction(): The function whose result you want to memoize.
 [dependency]: An array of dependencies; the memoized value will only be recomputed
when one of these changes.
Example:
const filteredNumbers = useMemo(() => numbers.filter(num => num % 2 === 0),
[numbers]);
Here, the filtering only happens when numbers changes, not on every render.
When to Use:
 To optimize performance for expensive calculations or operations.
 To prevent unnecessary re-renders when the calculated value hasn't changed.

3. What are the features of React

Here are the key features of React in simple terms:
1. Component-Based: React breaks the UI into small, reusable parts called
components. This makes code easier to manage and reuse.
2. Declarative UI: You just describe what the UI should look like based on the data,
and React takes care of updating the UI when the data changes.
 3. JSX: React uses JSX, which lets you write HTML-like code inside JavaScript. It makes
it easier to design components.
4. Virtual DOM: React uses a Virtual DOM to improve performance. Instead of
updating the entire webpage, it updates only the parts that have changed.
5. One-Way Data Flow: Data flows from parent to child components, making it easier
to track and manage changes in your app.

4.What is JSX ?
JSX (JavaScript XML) is a way to write HTML-like code inside JavaScript. It’s used in
React to define the structure of the UI. JSX makes it easier to create and manage
components by combining HTML and JavaScript in one place.

5. What is DOM?
DOM (Document Object Model) is a programming interface for web documents. It
represents the structure of a webpage in a tree-like format, where each element (such
as paragraphs, images, or links) is a node in the tree. The DOM allows programming
languages (like JavaScript) to interact with, modify, and update the content, structure,
and styles of a webpage.

6. What is Virtual Model?

The Virtual DOM is a concept used in libraries like React to optimize performance and
enhance the efficiency of web applications. It is a lightweight, in-memory
representation of the real DOM. The Virtual DOM allows React to update parts of the
user interface without having to directly manipulate the real DOM on every change,
which can be slow and inefficient.

7. What is the component life cycle of a React class

component?
In React, class components have a lifecycle that defines the different stages of a
component's existence, from creation to removal. These stages are:
1. Mounting (When the component is created and added to the DOM):
 constructor(): Initializes state and binds methods.
 getDerivedStateFromProps(): Updates state based on incoming props (called
before every render).
 render(): Returns the JSX to render the UI.
 componentDidMount(): Called after the component is added to the DOM (for
things like data fetching).
2. Updating (When the component’s state or props change):
 getDerivedStateFromProps(): Updates state before every render.
  shouldComponentUpdate(): Decides if the component should re-render (used
for performance optimization).
 render(): Re-renders the component.
 getSnapshotBeforeUpdate(): Captures information before the DOM updates
(rarely used).
 componentDidUpdate(): Called after the component updates in the DOM
(useful for side effects).
3. Unmounting (When the component is removed from the DOM):
 componentWillUnmount(): Cleans up resources (e.g., timers or event
listeners).
4. Error Handling (For handling errors during rendering):
 getDerivedStateFromError(): Updates state when an error occurs.
 componentDidCatch(): Catches errors and allows you to log them.

8. What are fragments in React?

Fragments in React allow you to group multiple elements without adding extra
elements to the DOM.
Key Points:
1. No Extra DOM Nodes: They don’t create unnecessary wrapper elements like
<div>.
2. Multiple Elements: You can return multiple elements from a component.
3. Syntax:
o Short: <>...</>

o Full: <React.Fragment>...</React.Fragment>

9. What are props in React?

Props (short for properties) in React are used to pass data from a parent component
to a child component.
Key Points:
1. Read-only: Props are immutable, meaning they cannot be changed by the
child component.
2. Data Passing: They allow components to be dynamic by passing data (like
strings, numbers, or functions) to child components.
3. Used in JSX: Props are used in JSX tags like attributes.

10. What are synthetic events in React?

Synthetic events in React are React’s cross-browser wrapper around the browser’s
native DOM events. They provide a consistent way to handle events across different
browsers.
Key Points:
 1. Cross-browser compatibility: They normalize events, ensuring they work
consistently across different browsers.
2. Automatic event pooling: React reuses event objects for performance reasons,
so you cannot directly access the event object after the event handler has
finished executing unless you call event.persist() to persist it.
3. Event Handling: Synthetic events behave similarly to native events but are
handled by React’s event system.

11. Difference between package.json and package-

lock.json?
package.json: Specifies what dependencies your project needs (with version ranges).
 package-lock.json: Specifies exact versions of dependencies and sub-
dependencies, ensuring consistency across environments.

12. Difference between client-side and server-side

rendering?
Client-side rendering (CSR) and server-side rendering (SSR) are two different
approaches to rendering a webpage in web development.
Key Differences:
1. Client-side Rendering (CSR):
o Process: The browser downloads an empty HTML shell and JavaScript
files, then the JavaScript executes and dynamically generates the content
in the browser.
o Speed: Initially slower (because JavaScript needs to load and render the
content), but after that, navigation is faster as only data is fetched.
o SEO: SEO can be more challenging since search engines might not index
content properly if JavaScript hasn’t finished executing.
Example: React, Angular, and Vue.js (mostly CSR).
2. Server-side Rendering (SSR):
o Process: The server generates and sends a fully rendered HTML page to
the browser, which displays the content immediately.
o Speed: Faster initial load since content is pre-rendered, but subsequent
page navigations may require reloading.
o SEO: Better for SEO because search engines can crawl the fully rendered
page right away.
Example: Traditional server-rendered apps using frameworks like Next.js (with SSR).

13. What is state in ReactJS?

State in React is an object that holds dynamic data for a component. It allows a
component to manage and track its own data, which can change over time (e.g., user
input, clicks, or server responses).

14. What are props?

 Props (short for properties) are inputs to a React component. They are used to pass
data from a parent component to a child component.
Key Points:
1. Read-only: Props cannot be changed by the child component.
2. Data Passing: They allow the parent component to pass values like strings,
numbers, or functions to the child component.
3. Used in JSX: Props are used as attributes in JSX.

15. Difference between State and Props?

State:
 Purpose: Manages data that changes over time within a component.
 Mutable: The component can modify its own state.
 Local: State is specific to the component where it's declared.
 Used for: Managing dynamic data, user interactions, form inputs, etc.
Props:
 Purpose: Passes data from a parent component to a child component.
 Immutable: Props cannot be modified by the child component.
 External: Props are set by the parent component.
 Used for: Passing static data, configuration, or functions to child components.

16. What is props drilling?

Props drilling is the process of passing data from a parent component to a deeply
nested child component through multiple layers of intermediate components. This can
become cumbersome when there are many layers, as each intermediate component
must explicitly pass the data down to its child.

17. Disadvantages of props drilling and how to avoid

it?
 Disadvantages: Props drilling leads to messy, hard-to-maintain code and can
cause unnecessary re-renders.
 Solutions: Use React Context API for shared state or state management
libraries like Redux to avoid passing data through every component level.

18. What are Pure Components?

In React, a Pure Component is a component that only re-renders when its props or state
have changed. It performs a shallow comparison of props and state to decide whether it
needs to re-render, making it more efficient in terms of performance.

19. What are refs in React?.

 In React, refs (short for references) are used to access and interact with DOM elements
or React components directly.

20. What is meant by forward ref?

Forward ref in React allows a parent component to pass a ref down to a child
component, enabling the parent to directly access the DOM element or React
component instance in the child.

Normally, refs are used to reference DOM elements, but by default, React does not
forward refs to functional components. forwardRef is a higher-order function that lets
you pass a ref through a component to one of its children.

Key Points:

1. Passing Refs to Child Components:

o Without forwardRef, refs can't be passed directly to a child functional
component. forwardRef solves this by allowing a ref to be forwarded to a
child.
2. Use Case:
o When you need to interact with a DOM element inside a child component
(like focusing an input field in the child from the parent component).