React.js

Question 1

What is React?

Answer 1

React is a JavaScript library for building user interfaces

Question 2

What are the key features of React?

Answer 2

Key features include component-based architecture

Question 3

Explain the difference between functional and class components

Answer 3

Functional components are JavaScript functions that return React elements. Class components are ES6 classes that extend React.Component and have a render method. Functional components with hooks are now preferred over class components.

Question 4

What are React Hooks?

https://www.youtube.com/watch?v=TNhaISOUy6Q

Answer 4

Hooks are functions that let you use state and other React features in functional components without writing a class. Examples include useState

Question 5

What is the useState Hook?

Answer 5

useState is a Hook that lets you add state to functional components. It returns an array with the current state value and a function to update it.

Question 6

Explain the useEffect Hook

Answer 6

useEffect lets you perform side effects in functional components. It runs after every render and can be used for data fetching

Question 7

What is the difference between props and state?

Answer 7

Props are read-only and passed from parent to child components. State is mutable and managed within the component itself. Props are immutable

Question 8

What is JSX?

Answer 8

JSX is a syntax extension for JavaScript that looks like HTML and makes it easier to write and add HTML in React. It gets transformed to regular JavaScript function calls.

Question 9

What is the virtual DOM?

Answer 9

The virtual DOM is a lightweight copy of the actual DOM. React uses it to improve performance by minimizing direct manipulation of the DOM and efficiently updating only the necessary parts.

Question 10

Explain the React component lifecycle

Answer 10

The React lifecycle is divided into three main phases:

Initialization phase: 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 Phase: This phase begins when a component is created and inserted into the DOM.
Updating Phase: This occurs when a component is re-rendered due to changes in props or state.
Unmounting Phase: This is the final phase when a component is removed from the DOM.

The component lifecycle consists of mounting (adding to the DOM)

Question 11

What is prop drilling? How can you avoid it?

Answer 11

Prop drilling occurs when props are passed through multiple levels of components. It can be avoided using Context API

Question 12

What is the Context API?

Answer 12

Context provides a way to pass data through the component tree without manually passing props at every level. It’s an alternative to prop drilling.

Question 13

How do you handle forms in React?

Answer 13

Forms can be controlled by storing form data in component state and updating it with onChange handlers. React uses synthetic events to handle form submissions.

Question 14

What is the difference between controlled and uncontrolled components?

Answer 14

Controlled components have their state managed by React

Question 15

What is the purpose of useReducer Hook?

Answer 15

useReducer is an alternative to useState for complex state logic. It’s preferable when you have multiple sub-values or when the next state depends on the previous one.

Question 16

Explain React.memo

Answer 16

React.memo is a higher-order component that prevents unnecessary re-renders of functional components by doing a shallow comparison of props.

Question 17

What is the key prop in React lists?

Answer 17

The key prop helps React identify which items have changed

Question 18

How does React handle performance optimization?

Answer 18

React uses techniques like virtual DOM

Question 19

What is the useCallback Hook?

Answer 19

useCallback returns a memoized version of a callback function that only changes if one of the dependencies has changed.

Question 20

Explain the useMemo Hook

Answer 20

useMemo returns a memoized value that only recomputes when one of its dependencies changes

Question 21

What are custom Hooks?

Answer 21

Custom Hooks are JavaScript functions that start with ‘use’ and can call other Hooks. They allow you to extract component logic into reusable functions.

Question 22

How do you handle side effects in React?

Answer 22

Side effects are handled using the useEffect Hook. This can include data fetching

Question 23

What is the useContext Hook?

Answer 23

useContext provides a way to consume context in a functional component without wrapping the component in a Context.Consumer.

Question 24

Explain the concept of lifting state up

Answer 24

Lifting state up means moving the state to a common ancestor component when multiple components need to share the same changing data.

Question 25

What are error boundaries in React?

Answer 25

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree

Question 26

How do you do conditional rendering in React?

Answer 26

Conditional rendering can be done using JavaScript operators like if

Question 27

What is the difference between React and React Native?

Answer 27

React is for web development

Question 28

Explain the useRef Hook

Answer 28

useRef returns a mutable ref object that persists for the full lifetime of the component. It’s often used to access DOM elements directly.

Question 29

What is prop types?

Answer 29

Prop types is a way to check the types of props in React components to catch bugs early. It’s typically used with the ‘prop-types’ library.

Question 30

What is the difference between createElement and cloneElement?

Answer 30

createElement creates a new React element

Question 31

How do you pass data between components?

Answer 31

Data can be passed between components using props

Question 32

What is the purpose of the React.Fragment?

Answer 32

React.Fragment lets you group multiple elements without adding an extra DOM node to the rendered HTML.

Question 33

Explain server-side rendering in React

Answer 33

Server-side rendering involves rendering React components on the server and sending the fully rendered page to the client

Question 34

What is code splitting in React?

Answer 34

Code splitting is a technique to split your code into smaller chunks and load them on demand

Question 35

How do you optimize performance in a React application?

Answer 35

Techniques include using React.memo

Question 36

What is the purpose of the useImperativeHandle Hook?

Answer 36

useImperativeHandle customizes the instance value that is exposed when using ref on a child component.

Question 37

Explain the difference between state and props

Answer 37

State is internal and controlled by the component itself

Question 38

What are Higher-Order Components (HOC)?

Answer 38

HOCs are functions that take a component and return a new component with additional props or behavior.

Question 39

How do you handle routing in React?

Answer 39

Routing is typically handled using libraries like React Router

Question 40

What is the purpose of the useLayoutEffect Hook?

Answer 40

useLayoutEffect is similar to useEffect

Question 41

Explain React portals

Answer 41

Portals provide a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

Question 42

What is the use of the useDebugValue Hook?

Answer 42

useDebugValue is used to display a label for custom hooks in React DevTools.

Question 43

How do you test React components?

Answer 43

React components are typically tested using libraries like Jest and React Testing Library

Question 44

What is the difference between deep and shallow rendering?

Answer 44

Shallow rendering renders only the component being tested without rendering child components

Question 45

Explain the React.lazy and Suspense

Answer 45

React.lazy allows dynamic imports of components