React

Question 1

What is React

Answer 1

An open-source JavaScript library used for building user interfaces. Allows developers to create reusable UI components and efficiently update and render them as the application state changes.

Question 2

What are the key features of React.js?

Answer 2

Virtual DOM, Component-base architecture, Unidirectional data flow, JSX and supports server-side rendering

Question 3

What is JSX?

Answer 3

Is a syntax extension for JavaScript used in React.js. Allows you to write HTML-like code directly within JavaScript.

Question 4

Difference between function and class components

Answer 4

Function components are stateless and defined as JavaScript Functions. Class components, are defined as ES6 classes and have additional features like lifecycle methods and state management.

Question 5

What is the difference between a controlled and an uncontrolled component?

Answer 5

Controlled component is a component whose state is controlled by React. Receives its current value and change callbacks as props and notifies parent components of state changes. Uncontrolled component stores its own state internally and manages it through the DOM.

Question 6

What is the significance of the “children” prop in React?

Answer 6

A special prop that allows components to display whatever is included between their opening and closing tags.

Question 7

What is the difference between props and state.

Answer 7

Both used to mange data. Props are read-only and passed from parent to child component. State is mutable and is managed internally within a component. Used to manage data that can change over time within a component

Question 8

Significance of the virtual DOM?

Answer 8

Is a lightweight copy of the actual DOM. When there is a change in application state, it is compared to real DOM and only updates the necessary part.

Question 9

What are React Fragments

Answer 9

Allow you to group multiple elements together without adding an extra DOM.

Question 10

What is Context API in React?

Answer 10

Creates a global state accessible to any component within a designated context.

Question 11

Explain the concept of prop drilling in React.

Answer 11

Process of passing props through multiple layers of components in order to reach a deeply nested component that needs to access the data.

Question 12

How does React handle list and keys

Answer 12

Each item in the list should have a unique “key” prop assigned to it. The “key” prop helps React identify which items have changed, been added, or been removed. Keys improve the efficiency of list rendering and help maintain component state correctly.

Question 13

What are React hooks

Answer 13

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

Question 14

What is the purpose of useEffect hook

Answer 14

Is used to perform side effects in a React component.

Question 15

What is the role of the useState hook

Answer 15

Is used to add state to functional components. Returns an array with two element, the current state value and a function to update the value.

Question 16

What is the purpose of useCallback hook

Answer 16

Used to memorize functions, returns a memorized version of the callback function that only changes if one of the dependencies has changed.

Question 17

What is React Fiber

Answer 17

Is a re implementation of React’s core algorithm for rendering and updating components.Introduced to improve performance, enable incremental rendering and better support concurrent mode

Question 18

What are portals in React.

Answer 18

Allows you to render components at a different positions on the DOM tree, which can be useful for modals, tooltips, and overlays.

Question 19

Explain the concept of code splitting in React

Answer 19

Is a technique used to split a React application’s JavaScript bundle into smaller chunks. It allows you to load only the required code when needed.

Question 20

Explain the concept of error boundaries in React.

Answer 20

React component that catches JavaScript errors in their child compoent tree and display fallback UI instead of crashing the whole application. Helps isolate errors and provide bettwer user experience.

Question 21

What is the purpose of “React.StrictMode”

Answer 21

Helps highlight potential problems and deprecated features in the application code

Question 22

Explain the concept of higher-order components

Answer 22

Functions that take a component as input and return an enhanced version of that component.

Question 23

What is a state in React?

Answer 23

Is an object that holds some information that may change over the lifetime of the component. When the state object changes, the component re-renders

Question 24

What are the components in React?

Answer 24

Reusable and self-contained module that represents a part of the user interface. It can be a function component or a class component

Question 25

Why use React instead of other frameworks, like Angular?

Answer 25

Easy creation of dynamic application, Improved performance through virtual DOM, Reusable components, unidirectional data flow, dedicated tools for easy debugging and massive community.

Question 26

Can web browsers read JSX directly?

Answer 26

Because web browsers are built to only read regular JS objects and JSX is not a regular JavaScript object. File needs to be transformed into a regular JavaScript object. For this, we use Babel

Question 27

How can you handle events in React

Answer 27

Handle events by providing event handlers as props to elements. React uses synthetic events that wrap the native browser events and provide consistent behavior across different browsers.

Question 28

What is Reconciliation?

Answer 28

Reconciliation is the process through which React updates the Browser DOM

Question 29

What is the difference between Shadow DOM and Virtual DOM?

Answer 29

Shadow DOM is a web standard provided by browser primarily used to encapsulate HTML, CSS and JavaScript. While the Virtual DOM is a concept used in some JavaScript libraries (e.g., React) which involves keeping a virtual representation of the UI in memory and syncing it with the real DOM through a reconciliation process.

Question 30

What is useRef

Answer 30

Is a React Hook that lets you reference a value that’s not needed for rendering. Typically used when you need direct access to a DOM element or an instance of a component.

Question 31

What is context API

Answer 31

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Question 32

What are Disadvantages of React?

Answer 32

Fast changes and updates makes it difficult to create documentation, and required constant relearning. SEO Problems. it is just a view library.

Question 33

Why is Vite so fast?

Answer 33

Vite use ESM for on-demand file serving and compilation during development, ensuring that only changed or requested files are processed.