REACT BASIC—

1.What is React?

React is a JavaScript library for building user interfaces, maintained by Facebook. It facilitates the creation of interactive and dynamic web applications by using a component-based architecture. React efficiently updates and renders the user interface through a virtual DOM, enhancing performance and providing a seamless development experience.

2.What are the key features of React?

Some key features of React include:

1.Virtual DOM for efficient rendering and performance optimization.

2.Component-based architecture for reusability and modular development.

3.One-way data flow for predictable and maintainable code.

4.Unidirectional data binding with state and props management.

5.React Native for building mobile applications using React.”

3.What is JSX? Why can’t browsers read JSX?

JSX stands for JavaScript XML. It is a React extension which allows writing JavaScript code that looks similar to HTML. It makes HTML file easy to understand. The JSX file makes the React application robust and boosts its performance. JSX provides you to write XML-like syntax in the same file where you write JavaScript code, and then preprocessor (i.e., transpilers like Babel) transform these expressions into actual JavaScript code. Just like XML/HTML, JSX tags have a tag name, attributes, and children.

Browsers cannot read JSX directly because they can only understand JavaScript objects, and JSX is not a regular JavaScript object. Thus, we need to transform the JSX file into a JavaScript object using transpilers like Babel and then pass it to the browser.

4.What is conditional rendering in React?

Conditional rendering in React involves rendering different components or content based on certain conditions. You can use if statements or ternary operators within JSX to conditionally render elements.

5.What is a React Router, and why is it used?

React Router is a library for handling routing in React applications. It allows developers to create declarative routing configurations, enabling navigation between different views or pages within a single-page application (SPA). React Router provides components like BrowserRouter, Route, and Link to define routes, match URLs, and navigate between views.

6. What is the purpose of the callback function as an argument of setState()?

The callback function is invoked when setState is finished and the component gets rendered. Since setState() is asynchronous the callback function is used for any post action.

Note: It is recommended to use the lifecycle method rather than this callback function.

setState({ name: "John" }, () =>
  console.log("The name has updated and component re-rendered")
);

7.What is the difference between Shadow DOM and Virtual DOM?

The goal of React Fiber is to increase its suitability for areas like animation, layout, and gestures. Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames.

from documentation

Its main goals are:

• Ability to split interruptible work in chunks.
• Ability to prioritize, rebase and reuse work in progress.
• Ability to yield back and forth between parents and children to support layout in React.
• Ability to return multiple elements from render().
• Better support for error boundaries.

8.Why fragments are better than container divs?

Below are the list of reasons to prefer fragments over container DOM elements,

• Fragments are a bit faster and use less memory by not creating an extra DOM node. This only has a real benefit on very large and deep trees.
• Some CSS mechanisms like Flexbox and CSS Grid have special parent-child relationships, and adding divs in the middle makes it hard to keep the desired layout.
• The DOM Inspector is less cluttered.

9.How events are different in React?

Handling events in React elements has some syntactic differences:

-React event handlers are named using camelCase, rather than lowercase.

-With JSX you pass a function as the event handler, rather than a string.

REACT STATE & HOOKS–

10.What are React hooks?

React hooks are functions that allow developers to use state and other React features in functional components. Hooks were introduced in React 16.8 as a way to write reusable logic and manage stateful behavior in functional components. Some commonly used hooks are useState, useEffect, and useContext.

11.What are “hooks” in React, and how do they change the way you manage state and side effects?

Hooks in React are functions that allow you to “hook into” React state and lifecycle features from functional components. They were introduced in React 16.8 to address some of the limitations and complexities associated with managing state and side effects in class components. Hooks make it easier to reuse logic across components and promote the use of functional components over class components.

12.What is the purpose of state in React?

State is used to manage and store data within a component. It represents the current state of the component and can be changed over time. When the state of a component is updated, React automatically re-renders the component and its child components to reflect the changes in the UI.

13. Why should we not update the state directly?

If you try to update the state directly then it won’t re-render the component.

//Wrong

this.state.message = "Hello world";

Instead, use the setState() method. It schedules an update to a component’s state object. When state changes, the component responds by re-rendering.

//Correct

this.setState({ message: "Hello World" });

Note: You can directly assign to the state object either in the constructor or using the latest javascript’s class field declaration syntax.

14.What is the purpose of the useState hook?

The useState hook is used to add state to functional components. It takes an initial state value as an argument and returns an array with two elements: the current state value and a function to update the state. By using the useState hook, functional components can maintain their own state without using class components.

15.What is the purpose of the useEffect hook?

The useEffect hook in React is used to perform side effects in functional components. It allows you to execute code after the component has rendered or when specific dependencies have changed. Side effects can include API calls, subscriptions, or manipulating the DOM. The useEffect hook takes a callback function as its first argument and an optional array of dependencies as its second argument.

16.When would You use usecontext hook?

You would use the useContext hook in React when you need to access data or functions from a context within a functional component. It simplifies consuming context values and is useful for managing global state, such as themes, user authentication, and application settings.

17.What is the significance of the dependency array in the useEffect hook?

The dependency array in the useEffect hook specifies the values that the effect depends on. When any of the values in the dependency array change, the effect is re-executed. If the dependency array is empty, the effect runs only once after the initial render. By specifying dependencies, you can control when the effect should be triggered or if it should be skipped.

18.What is the difference between props and state?

“Props and state are both used to pass data to components, but there are some key differences:

Props are passed from parent components to child components and are read-only within the child component. They are used to configure and customize a component.

State is managed within the component itself and can be changed using the setState() method. State represents the internal data of a component and can trigger re-rendering when updated.”


19.What is the purpose of the useReducer hook in React?

The useReducer hook is used to manage complex state logic in a more centralized and predictable way. It is an alternative to using useState when the state transitions involve multiple values or complex logic. useReducer takes a reducer function and an initial state and returns the current state and a dispatch function to trigger state transitions.

20.What is the purpose of the useContext hook?

The useContext hook is used to consume a React context in a functional component. It allows you to access the value provided by a context provider higher up in the component tree without the need for prop drilling. The useContext hook takes the context object as its argument and returns the current context value.

21.What is the purpose of the useRef hook in React and how is it used?

The useRef hook is used to create a mutable reference that persists across component renders. It returns a mutable ref object with a .current property that can hold a value. useRef is commonly used for accessing DOM elements, storing mutable values, and preserving values between renders without triggering a re-render.

22.Do two componenets using the same Hook share state?

No, two components using the same hook do not share state. Each component using a hook, like useState, useEffect, or useRef, maintains its own separate state and data. Hooks are used per component and don’t share state or data between different instances of the component. This is a key principle of React’s functional component model: each component manages its own state independently.

23.Explain the differnce between usestate() and useref()?

useState() is for managing and updating component state, triggering re-renders. useRef() is for accessing DOM elements and storing mutable values without causing re-renders.

24.What are the production use cases of useref()?

Production use cases for useRef() in React include:

1. Managing DOM elements.
2. Controlling form input focus.
3. Integrating with third-party libraries.
4. Caching values across renders.
5. Managing animations and timers.
6. Improving performance in specific scenarios.

25.What is the purpose of the setState method in React?

The setState method in React is used to update a component’s state. When the state changes, React automatically re-renders the component to reflect the updated state.

26.How do you update the state in React?

“You can update the state in React using the setState() method. For example:

this.setState({ count: this.state.count + 1 });

27.How do you initialize state in a React component?

you can initialize state in a React component by defining a state property within the component’s constructor. For example:

class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = { count: 0 };
  }
  // ...
}"

28.How can you update the State of a component?

We can update the State of a component using this.setState() method. This method does not always replace the State immediately. Instead, it only adds changes to the original State. It is a primary method which is used to update the user interface(UI) in response to event handlers and server responses.

29.What is the output of below code?

import { useState } from 'react';

export default function Counter() {
  const [counter, setCounter] = useState(5);

  return (
    <>
      <span>{counter}</span>
      <button onClick={() => {
        setCounter(counter + 5);
        setCounter(counter + 5);
        alert(counter);
        setCounter(counter + 5);
        setCounter(counter + 5);
      }}>Increment</button>
    </>
  )
}"

Answer: 3(Alert with 5, 10)

State values are fixed(i.e, default value 5) in each render and setting the state only changes it for the next render. React will wait untill all the code executed with in an event handler before your state updates follwed by re-rendering the UI. Also, all the 3 setter function calls are replacing the calculated value. Hence, irrespective of how many times you call setCounter(counter + 5) the final value is 10(5+5).

This can be visuallized by substituting with state variable values in the particular render,

<button onClick={() => {
        setCounter(5 + 5);
        setCounter(5 + 5);
        alert(5);
        setCounter(5 + 5);
        setCounter(5 + 5);
      }}>Increment</button>"

ERROR, HANDLING & OPTIMIZATION IN REACT–

30.How do you handle errors in React applications?

In React, you can handle errors using Error Boundaries. Error Boundaries are components that catch JavaScript errors in their child components’ lifecycle methods or during rendering, and display fallback UI instead of crashing the whole application. You can define Error Boundary components by implementing the componentDidCatch lifecycle method. By wrapping components with Error Boundaries, you can gracefully handle errors and provide a better user experience.

31.What are React error boundaries, and how can they be used to handle errors in components?

React error boundaries are special components that catch JavaScript errors in their child components’ lifecycle methods, constructors, and render methods. They help prevent the entire application from crashing due to an error in a single component. Error boundaries allow you to gracefully handle errors by displaying a fallback UI and logging the error information. They are useful in production environments to ensure that errors in components don’t break the entire application.

32.How can you optimize performance in a React application?

You can optimize performance in a React application by using techniques like shouldComponentUpdate (for class components), PureComponent, memo

33.How do you handle forms in React?

You can handle forms in React by using controlled components, where the form elements are linked to React state, and their values are controlled by React. This allows you to easily handle form submission and validation.

34.How do you handle events in React?

You can handle events in React by passing event handlers as props to components. For example, to handle a button click event:

35. How to bind methods or event handlers in JSX callbacks?

There are 3 possible ways to achieve this in class components:

1.Binding in Constructor: In JavaScript classes, the methods are not bound by default. The same rule applies for React event handlers defined as class methods. Normally we bind them in constructor.

class User extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log("SingOut triggered");
  }
  render() {
    return <button onClick={this.handleClick}>SingOut</button>;
  }
}

2.Public class fields syntax: If you don’t like to use bind approach then public class fields syntax can be used to correctly bind callbacks. The Create React App eanables this syntax by default.

handleClick = () => {
  console.log("SingOut triggered", this);
};
<button onClick={this.handleClick}>SingOut</button>

3.Arrow functions in callbacks: It is possible to use arrow functions directly in the callbacks.Javascript

handleClick() {
    console.log('SingOut triggered');
}
render() {
    return <button onClick={() => this.handleClick()}>SignOut</button>;
}

Note: If the callback is passed as prop to child components, those components might do an extra re-rendering. In those cases, it is preferred to go with .bind() or public class fields syntax approach considering performance.

36.When to use useCallback()?

Use useCallback in React to optimize performance by memoizing functions, particularly when functions depend on specific props, are passed as dependencies, or used as event handlers to prevent unnecessary re-creation and re-renders.

37.What are the common use case of usememo()?

Common use cases for useMemo in React are:

• Memoizing expensive computations.
• Preventing unnecessary component renders.
• Optimizing performance by avoiding redundant calculations.
• Memoizing props to prevent child component re-renders.

38.What are the Differences between React.memo() and usememo()?

React.memo() memoizes functional components to prevent unnecessary renders.

useMemo() memoizes the result of a computation to optimize performance by re-computing only when dependencies change.

39.Describe the concept of “virtualization” in React and how it can be applied to long lists or tables.

Virtualization in React optimizes rendering long lists or tables by only rendering the visible items as the user scrolls. It saves memory and boosts performance, especially with large datasets, by reusing DOM elements and dynamically rendering content in the viewport. Libraries like react-window and react-virtualized simplify its implementation.

40.Explain what “memoization” is and how it can be utilized for performance optimization in React.

Memoization is a performance optimization technique that caches expensive function results. In React, you can use React.memo() to avoid unnecessary re-renders of components with the same props, and useMemo() to cache computed values based on dependencies, improving rendering performance. It’s particularly useful for complex lists or heavy calculations in React components.

REACT COMPONENTS–

41. 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 you 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.

If you need a React functionality whose Function component equivalent is not present yet, like Error Boundaries.

In older versions, If the component needs state or lifecycle methods then you need to use class component.

Note: You can also use reusable react error boundary third-party component without writing any class. i.e, No need to use class components for Error boundaries.

42.What is the difference between a functional component and a class component in React?

In React, a functional component is a plain JavaScript function that accepts props as an input and returns a React element. Functional components are simpler and easier to test and maintain. On the other hand, a class component is a JavaScript class that extends the React.Component class. Class components have additional features, such as lifecycle methods and local state.

43.What is a controlled component in React?

A controlled component in React is a component whose value is controlled by the state. Input elements like text fields and checkboxes are often controlled components in React.

44.What is an uncontrolled component in React?

An uncontrolled component in React is a component whose value is not controlled by the state. The value is typically handled directly by the DOM, and React does not manage it.

45.What are stateless components?

If the behavior of a component is independent of its state then it can be a stateless component. You can use either a function or a class for creating stateless components. But unless you need to use a lifecycle hook in your components, you should go for function components. There are a lot of benefits if you decide to use function components here; they are easy to write, understand, and test, a little faster, and you can avoid this keyword altogether.

46.What are the different phases of React component’s lifecycle?

If the behavior of a component is independent of its state then it can be a stateless component. You can use either a function or a class for creating stateless components. But unless you need to use a lifecycle hook in your components, you should go for function components. There are a lot of benefits if you decide to use function components here; they are easy to write, understand, and test, a little faster, and you can avoid this keyword altogether.

React class components have a lifecycle that can be divided into several phases, each with its associated methods. These methods allow you to hook into different points in the component’s existence and perform tasks or side effects. Here are the different phases of a React component’s lifecycle:-

1.intilization

2.Mounting

3.Updating

4.Unmounting

5.Error Handling.

47. What would be the common mistake of function being called every time the component renders?

You need to make sure that the function is not being called while passing the function as a parameter.

render() {
  // Wrong: handleClick is called instead of passed as a reference!
  return <button onClick={this.handleClick()}>{'Click Me'}</button>
}

Instead, pass the function itself without parenthesis:Javascript

render() {
  // Correct: handleClick is passed as a reference!
  return <button onClick={this.handleClick}>{'Click Me'}</button>
}

48.What is the significance of the key prop when rendering a list of components?

The key prop in React is used to give each element in a list a unique identifier. When rendering a list of components, React uses the key prop to efficiently update and reorder the components. It helps React determine which components need to be updated, added, or removed when the list changes, improving performance and preventing unnecessary re-rendering.

49.Explain the concept of “compound components” and provide an example of using them in a React application.

“Compound components” is a design pattern in React that allows you to build a set of components that work together to achieve a specific functionality. These components are meant to be used together as a group, and they share a common parent to manage and coordinate their behavior. Compound components provide a structured way to create complex UI components with a clear and intuitive API.

50.What is the purpose of the key prop in React lists?

The key prop in React lists is used to help React identify each item in a list of elements. It ensures efficient updates when items are added, removed, or rearranged in the list.

51. What is children prop?

Children is a prop (this.props.children) that allows you to pass components as data to other components, just like any other prop you use. Component tree put between component’s opening and closing tag will be passed to that component as children prop.

There are several methods available in the React API to work with this prop. These include React.Children.map, React.Children.forEach, React.Children.count, React.Children.only, React.Children.toArray.

52.What is the purpose of the render method in a class component?

The render method in a class component is responsible for returning the JSX that represents the component’s UI. It is a required method and must return a single root element.

53.How do you make an HTTP request in React?

You can make an HTTP request in React using technologies like the fetch API or by using third-party libraries like Axios. These requests are typically made in lifecycle methods like componentDidMount or by using hooks like useEffect.

54.What is a React fragment?

A React fragment is a lightweight way to group multiple elements in React without adding an extra DOM node. It is useful when you need to return adjacent elements from a component without a wrapping container.


55.What are React fragments and why are they useful?

React fragments allow you to group multiple elements without adding an extra DOM element to the rendered output. Fragments are useful when you need to return multiple elements from a component’s render method without introducing unnecessary markup. They can be declared using the <React.Fragment> syntax or the shorthand <> syntax.

56.What is the role of a router in a React application?

A router in a React application, like React Router, is used for handling client-side routing. It allows you to navigate between different views or components based on the URL, enabling a single-page application (SPA) experience.

57.How do you handle routing in React using React Router?

To handle routing in React using React Router, you need to define route components that specify which component to render for a given URL. You also set up a <Router> component that manages the overall routing configuration.

58.What is the virtual DOM in React?

The virtual DOM in React is a lightweight in-memory representation of the actual DOM. React uses it to efficiently update and render components by minimizing actual DOM manipulations.

59.How do you pass props from a parent component to a child component?

You can pass props to a child component by including them as attributes when rendering the child component. For example:

<ChildComponent prop1={value1} prop2={value2} />

60. What is Lifting State Up in React?

When several components need to share the same changing data then it is recommended to lift the shared state up to their closest common ancestor. That means if two child components share the same data from its parent, then move the state to parent instead of maintaining local state in both of the child components

61.What is context?

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

For example, authenticated users, locale preferences, UI themes need to be accessed in the application by many components.

const { Provider, Consumer } = React.createContext(defaultValue);

Intermediate

62.What are the biggest limitations of React?

“In terms of limitations, React has a learning curve, especially for newcomers, and can involve a fair amount of boilerplate code. Configuration setup can be complex, and developers need to be mindful of performance optimization. React lacks built-in global state management, which can lead to choices and complexities. SEO can be affected by client-side rendering. Staying up-to-date with the evolving tooling ecosystem and dealing with library fragmentation can be challenging. Additionally, React doesn’t offer built-in solutions for routing and AJAX, and mobile development often requires learning React Native separately.”

63.Explain the concept of conditional rendering in React.

Conditional rendering in React refers to the ability to conditionally render components or content based on certain conditions or values. This can be done using conditional statements (like if or ternary operators) within the component’s render method, or by using logical operators (&& or ||) to conditionally include or exclude elements from the JSX.

64.What are inline conditional expressions?

You can use either if statements or ternary expressions which are available from JS to conditionally render expressions. Apart from these approaches, you can also embed any expressions in JSX by wrapping them in curly braces and then followed by JS logical operator &&.

Example:-

<h1>Hello!</h1>;
{
  messages.length > 0 && !isLogin ? (
    <h2>You have {messages.length} unread messages.</h2>
  ) : (
    <h2>You don't have unread messages.</h2>
  );
}

65.What is the purpose of the React Router library, and how does it handle client-side routing in React applications?

React Router is a popular library used for client-side routing in React applications. It provides a declarative way to define routes and manage navigation between different views or pages within a single-page application. React Router uses the URL history API to keep the UI in sync with the current URL and enables navigation without page refreshes. It allows for dynamic routing, nested routes, and parameterized routes, making it easy to create complex routing configurations in React applications.

66.Explain the purpose of render() in React.

It is mandatory for each React component to have a render() function. Render function is used to return the HTML which you want to display in a component. If you need to rendered more than one HTML element, you need to grouped together inside single enclosing tag (parent tag) such as <div>, <form>, <group> etc. This function returns the same result each time it is invoked.

67.What is arrow function in React? How is it used?

The Arrow function is the new feature of the ES6 standard. If you need to use arrow functions, it is not necessary to bind any event to ‘this.’ Here, the scope of ‘this’ is global and not limited to any calling function. So If you are using Arrow Function, there is no need to bind ‘this’ inside the constructor. It is also called ‘fat arrow ‘(=>) functions.

68.Explain the Lists in React.

Lists are used to display data in an ordered format. In React, Lists can be created in a similar way as we create it in JavaScript. We can traverse the elements of the list using the map() function.

69.How do you implement Server Side Rendering or SSR?

React is already equipped to handle rendering on Node servers. A special version of the DOM renderer is available, which follows the same pattern as on the client side.

import ReactDOMServer from "react-dom/server";
import App from "./App";

ReactDOMServer.renderToString(<App />);

This method will output the regular HTML as a string, which can be then placed inside a page body as part of the server response. On the client side, React detects the pre-rendered content and seamlessly picks up where it left off.

Advance React and Redux-

70.Explain the concept of the virtual DOM in React.

The Virtual DOM in React is a lightweight, virtual representation of the actual DOM. It’s crucial because it optimizes performance by minimizing direct DOM updates, making UI rendering more efficient and improving developer productivity.”

71.What is a higher-order component (HOC) in React?

A higher-order component (HOC) is a function that takes a component and returns a new enhanced component. HOCs are used to add additional behavior or data to a component. They are a way to reuse component logic and implement cross-cutting concerns such as authentication, logging, or data fetching.

72.What is the role of lifecycle methods in React?

Lifecycle methods in React are special functions that allow developers to execute code at specific points in a component’s lifecycle, such as when it is created, updated, or destroyed. They help manage component behavior, handle side effects, and optimize performance. However, as of React 16.3, many lifecycle methods have been deprecated in favor of using React hooks for similar functionality.

73.What is the output of below code?

import { useState } from 'react';

export default function Counter() {
  const [counter, setCounter] = useState(5);

  return (
    <>
      <span>{counter}</span>
      <button onClick={() => {
        setCounter(counter => counter + 5);
        setCounter(counter => counter + 5);
        alert(counter);
        setCounter(counter => counter + 5);
        setCounter(counter => counter + 5);
      }}>Increment</button>
    </>
  )
}"

Answer:-Alert with 5, 25

React queues all the updater functions(e.g, counter => counter + 5) which will be processed after all the code inside event handler has been executed. During the next re-render(state update through setState), React goes through the queue and increment the counter based on the previous value in each function call. So the final value of counter becomes 25(initial value 5 + 5 + 5 + 5 + 5) whereas the alert shows default value 5 because the counter value won’t be updated by that time.”

74.What is the output of span after one click?

import { useRef } from 'react';
export default function Counter() {
  let countRef = useRef(0);

  function handleIncrement() {
    countRef.current = countRef.current + 1;
  }

  return 
  <>
    <span>Count: {countRef.current}</span>
    <button onClick={handleIncrement}>
      Click me
    </button>
  <>
}"

Answer :Count: 0

In React, every update has two phases.

Render: This is where React calls the components in order to output something on the screen

Commit: React applies changes to the DOM

Any updates to the ref will be reflected only in the commit phase. In other words, React sets counterRef.current during the commit phase. Hence, countRef.current always holds value 0 irrespective of how many times the Increment button clicked.”

75.What is the outcome of below code after button click?

import { useRef } from 'react';

function MyCustomInput(props) {
  return <input {...props} />;
}

export default function MyCustomForm() {
  const inputRef = useRef(null);

  function handleInputFocus() {
    inputRef.current.focus();
  }

  return (
    <>
      <MyCustomInput ref={inputRef} />
      <button onClick={handleInputFocus}>
        Click Me
      </button>
    </>
  );
}"

Warning: Function components cannot be given refs.

By default, React does not allow a component access the DOM nodes of other components even for child components. If you still try to access the DOM nodes directly then you will receive below error:”

76.What is the outcome of number of clicks after 3 button clicks?

import { useRef } from 'react';import { useRef } from 'react';

export default function Counter() {
  let ref = useRef(0);

  function handleClick() {
    ref.current = ref.current + 1;
  }

  return (
    <>
                <div>Clicked + {ref.current} + times</div>
                <button onClick={handleClick}>
                        Click me!
                </button>
    </>
  );
}"

“Answer: 0 times

If you try to use {ref.current} in the render method, the number won’t be updated on click. This is because ref.current does not trigger a re-render unlike state. This property is mainly used to read and write the values inside event handler or outside the render method.”

77.Explain the concept of React forwardRef and when would you use it?

React forwardRef is a feature that allows components to pass a ref down to a child component. It is useful when you want to access a DOM node or a React component instance from a parent component. Forwarding refs enables components to receive a ref from a parent component and pass it to a child component without breaking encapsulation or introducing additional props.

78.Explain the concept of React reconciliation and how it works.

React reconciliation is the process of comparing the previous and current states of the virtual DOM to determine the minimal set of changes required to update the actual DOM. React uses a diffing algorithm to efficiently update the DOM only where necessary. It performs a tree reconciliation, comparing the component tree and its children to determine the changes. This process helps optimize rendering performance and ensure that the UI is always up-to-date with the application state.

79.How does React handle code splitting and lazy loading of components?

React supports code splitting and lazy loading of components using dynamic imports. By using dynamic imports and the React.lazy function, you can split your application into smaller chunks and load them on-demand. This helps reduce the initial load time of your application and improves performance by loading only the necessary components when they are needed.

80.What is an event in React?

“An event is an action which triggers as a result of the user action or system generated event like a mouse click, loading of a web page, pressing a key, window resizes, etc. In React, the event handling system is very similar to handling events in DOM elements. The React event handling system is known as Synthetic Event, which is a cross-browser wrapper of the browser’s native event.

Handling events with React have some syntactical differences, which are:

React events are named as camelCase instead of lowercase.

With JSX, a function is passed as the event handler instead of a string.”

81.What are synthetic events in React?

A synthetic event is an object which acts as a cross-browser wrapper around the browser’s native event. It combines the behavior of different browser’s native event into one API, including stopPropagation() and preventDefault().

82.What is the purpose of the React Fiber reconciler, and how does it improve the performance of React applications?

The React Fiber reconciler is a core part of the React library that was introduced to improve the performance and responsiveness of React applications. Its purpose is to enable asynchronous rendering and to better prioritize and control the updates and rendering of components in the React virtual DOM.

83.Describe how React handles the process of “re-rendering” components efficiently.

“React achieves efficient re-rendering through ‘reconciliation’ and the ‘virtual DOM.’ It creates a virtual representation of the DOM, diffs it with the previous version to identify changes, and updates the real DOM minimally in batches. Asynchronous rendering and keys in lists optimize performance. React also promotes ‘pure components’ to prevent unnecessary renders when props or state haven’t changed.”

84.How can you implement a “render prop” or “function as a child” pattern in React?

“To implement the ‘render prop’ pattern in React, you create a parent component that accepts a function prop. Inside the parent component’s render method, you invoke this function and pass it the data or behavior you want to share. Then, in another component or part of your application, you use the parent component and provide the function to render the desired content. This pattern enables the sharing of data or logic between components in a clean and reusable manner.”

85.What is the purpose of the “context” API in React, and how can you avoid some of its performance pitfalls?

“The “”context”” API in React allows you to share data across components. It’s useful for global state like themes or authentication.

1.To avoid performance issues:

2.Don’t overuse context; use it for truly shared state.

3.Limit deeply nested consumers to prevent excessive subscriptions.

4.Be mindful of frequent context updates; optimize when necessary.”

86.How can you implement the “render-props” pattern to share code between components in a React application?

“To implement the “”render-props”” pattern in React:

Create a parent component with a render function prop.

Use the parent component in another component, providing the render function to access and render data or behavior.

This pattern enables code and data sharing between components, enhancing reusability and flexibility in your application.”

87.Discuss the benefits and drawbacks of using server-side rendering (SSR) in a React application.

“Benefits of SSR in React:

Improved initial load time.

SEO friendliness.

Enhanced accessibility.

Better social sharing.

Drawbacks of SSR in React:

Increased server load.

Complex development.

Limited use cases for highly dynamic apps.

Client-side hydration complexity.

Reduced JavaScript optimization.

Complex state management in some scenarios.”

88.How can you utilize the “shouldComponentUpdate” lifecycle method for optimizing component rendering?

To utilize the shouldComponentUpdate method for optimizing component rendering:

1.mplement custom comparison logic to determine when a component should or shouldn’t re-render based on props and state changes.

2.Use shallow comparisons for objects and arrays.

3.Apply memoization techniques to cache and reuse computed results.

4.Consider using PureComponent for class components or React.memo for functional components for automatic shallow prop and state comparisons to optimize rendering.”

89.What are the trade-offs of using a state management library like Redux for large-scale React applications?

Using a state management library like Redux can offer significant benefits for large-scale React applications. It provides a centralized and predictable way to manage application state, making it easier to understand and maintain data flow. Redux also offers powerful developer tools for debugging, and middleware support allows you to handle asynchronous actions and side effects effectively. However, there are trade-offs. Implementing Redux often introduces additional boilerplate code, resulting in a steeper learning curve, which might not be justified for smaller projects. Overusing Redux in smaller applications can lead to over-engineering and unnecessary complexity. It’s essential to assess the specific needs of your application and carefully consider whether the benefits of using Redux outweigh the drawbacks in your particular context.

90.Dive into the React source code and explain how the “createElement” function works internally.

“The createElement function in the React source code plays a crucial role in creating React elements, forming the foundation of the virtual DOM rendering process. It accepts three main arguments: the type of the element, typically a string for HTML elements or a function for React components; props, representing the properties or attributes of the element; and children, which can be other elements or text content.

Internally, createElement first checks the type of the element to determine whether it’s a standard HTML element or a custom React component. It then extracts the provided props and children from the arguments and constructs a new React element object with this information.

This resulting React element is pivotal in React’s reconciliation process, where it’s used to create and update the virtual DOM. While the actual implementation in the React source code is more intricate, this overview encapsulates the core functionality of the createElement function, which serves as a foundational building block for defining the structure of React components and user interfaces.”

91.Explain the “fiber root” concept and how it relates to the React rendering process.

“The “”fiber root”” is a fundamental concept in the React rendering process. It represents the entry point or the root of a React application’s component tree. Each React application has a single fiber root, which corresponds to a DOM element (e.g., a <div>) where the React application is rendered.

The fiber root is significant because it serves as the starting point for React’s reconciliation and rendering process. When changes occur in the component tree (due to state updates or other factors), React starts the reconciliation process from the fiber root, working its way down the component tree to determine what updates are needed to reflect the changes.

In summary, the fiber root is the top-level entry point of a React application’s component tree, and it is essential for initiating the reconciliation and rendering process when changes occur in the application’s state or props.”

92.How does React handle the scheduling and prioritization of updates using its “scheduler” package?

React’s “scheduler” package prioritizes and schedules updates using a priority-based system. It categorizes tasks, arranges them in a queue, and employs time slicing to prevent blocking the main thread. Higher-priority tasks are executed first, ensuring a responsive user interface while optimizing rendering updates. React dynamically adjusts task priorities and leverages requestAnimationFrame for efficient scheduling.

93.Describe the data structure and purpose of the “Fiber” data structure in the React source code.

The “Fiber” data structure in React is a fundamental concept used extensively in the reconciliation and rendering process. It serves as a unit of work or a virtual stack frame for React components. Its primary purposes include representing components in the component tree, facilitating the reconciliation process by efficiently tracking changes, managing work-in-progress updates, and enabling scheduling and prioritization of tasks. Essentially, it’s a key part of how React manages and updates the user interface.

94.What are the steps involved in setting up server-side rendering (SSR) for a React application?

Set Up a Server: Use Node.js with Express.js or Next.js.

Configure React: Adjust the app for SSR.

Implement Routing: Set up server-side routing.

Data Fetching: Decide how to fetch data on the server.

Server Rendering: Use ReactDOMServer or SSR frameworks.

Client Hydration: Make the client components interactive.

State Management: Manage state between server and client.

SEO: Optimize for search engines.

Testing: Test thoroughly.

Deployment: Deploy to your server or cloud.”

95.Discuss the challenges and solutions related to managing client-side and server-side data consistency in SSR.

Managing client-side and server-side data consistency in SSR can be challenging. Key solutions include using universal data-fetching libraries, sending initial data with the HTML response, synchronizing global state, maintaining consistent APIs, thorough testing, and implementing server redirects when necessary. These strategies help ensure a seamless and consistent user experience.

96.What are “hydration” and “rehydration” in the context of React SSR, and why are they important?

“Hydration: It’s the initial rendering of React components on the server and sending the HTML markup to the client. When the client receives this HTML, React initializes and makes it interactive by attaching event listeners and state. Hydration optimizes performance, as it makes the application interactive quickly.

Rehydration: After the initial hydration, React continues to manage the component tree on the client. When updates occur (e.g., user interactions), React re-renders components on the client and updates the DOM efficiently. Rehydration ensures smooth subsequent client-side updates while preserving state and maintaining a responsive user experience.”

97.How can you protect sensitive data, like API keys, in a React application?

• To protect sensitive data like API keys in a React application:
• Use environment variables for storing secrets.
• Employ a server-side proxy to manage API requests.
• Implement OAuth and store tokens securely.
• Control access with authentication and authorization.
• Set up CORS and security headers.
• Apply rate limiting and encryption.
• Consider secrets management services.
• Enable monitoring and regular updates.
• Conduct security reviews and testing.

98.Explain the concept of “content security policies” (CSP) and how they relate to React application security.

Content Security Policy (CSP) is a browser security feature that prevents Cross-Site Scripting (XSS) attacks. It defines rules for loading scripts and resources, ensuring that only trusted sources are allowed. In React applications, CSP helps mitigate security risks by controlling data injection, code execution, and external dependencies, enhancing overall security. Configuration can be done via HTTP headers or HTML meta tags.

99.How can you prevent unauthorized access to certain routes or components in a React application?

• Authentication: Implement user login and authentication.
• Authorization: Set permissions for different user roles.
• Private Routes: Create routes accessible only to authenticated users.
• Conditional Rendering: Show/hide components based on user authentication and authorization.
• Redirects: Redirect unauthorized users to appropriate pages.
• Route Guards: Use guards to protect routes.
• Server-Side Checks: Perform authorization checks on the server.
• Token-Based Security: Use tokens for authentication and authorization.
• Error Handling: Handle unauthorized access gracefully.
• Secure API Endpoints: Protect API endpoints.
• Session Management: Securely manage user sessions.
• Security Testing: Conduct security testing for vulnerabilities.

100.How can you implement “code splitting” in React to load only the necessary JavaScript bundles for a page?

To implement code splitting in React:

• Use React.lazy and Suspense for dynamic component loading.
• Split code based on routes with tools like React Router.
• Configure Webpack to automatically split code bundles.
• Analyze and optimize bundles using tools like Webpack Bundle Analyzer.
• Use named exports for better code splitting.
• Consider manual splitting for fine-grained control.

101.What were the major problems with MVC framework?

Following are some of the major problems with MVC framework:

• DOM manipulation was very expensive
• Applications were slow and inefficient
• There was huge memory wastage
• Because of circular dependencies, a complicated model was created around models and views.

102.Explain Flux.

Flux is an architectural pattern which enforces the uni-directional data flow. It controls derived data and enables communication between multiple components using a central Store which has authority for all data. Any update in data throughout the application must occur here only. Flux provides stability to the application and reduces run-time errors.

103.What is Redux?

Redux is one of the most trending libraries for front-end development in today’s marketplace. It is a predictable state container for JavaScript applications and is used for the entire applications state management. Applications developed with Redux are easy to test and can run in different environments showing consistent behavior.

104.What are the three principles that Redux follows?

1. Single source of truth: The state of the entire application is stored in an object/ state tree within a single store. The single state tree makes it easier to keep track of changes over time and debug or inspect the application.
2. State is read-only: The only way to change the state is to trigger an action. An action is a plain JS object describing the change. Just like state is the minimal representation of data, the action is the minimal representation of the change to that data.
3. Changes are made with pure functions: In order to specify how the state tree is transformed by actions, you need pure functions. Pure functions are those whose return value depends solely on the values of their arguments.

105.What do you understand by “Single source of truth”?

Redux uses ‘Store’ for storing the application’s entire state at one place. So all the component’s state are stored in the Store and they receive updates from the Store itself. The single state tree makes it easier to keep track of changes over time and debug or inspect the application.

106.List down the components of Redux.

Redux is composed of the following components:

1. Action – It’s an object that describes what happened.
2. Reducer – It is a place to determine how the state will change.
3. Store – State/ Object tree of the entire application is saved in the Store.
4. View – Simply displays the data provided by the Store.

107.How are Actions defined in Redux?

Actions in React must have a type property that indicates the type of ACTION being performed. They must be defined as a String constant and you can add more properties to it as well. In Redux, actions are created using the functions called Action Creators. Below is an example of Action and Action Creator:

function addTodo(text) {
       return {
                type: ADD_TODO,    
                 text    
    }
}

108.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.

109.What is the significance of Store in Redux?

A store is a JavaScript object which can hold the application’s state and provide a few helper methods to access the state, dispatch actions and register listeners. The entire state/ object tree of an application is saved in a single store. As a result of this, Redux is very simple and predictable. We can pass middleware to the store to handle the processing of data as well as to keep a log of various actions that change the state of stores. All the actions return a new state via reducers.

110.What are the advantages of Redux?

Advantages of Redux are listed below

• Predictability of outcome – Since there is always one source of truth, i.e. the store, there is no confusion about how to sync the current state with actions and other parts of the application.
• Maintainability – The code becomes easier to maintain with a predictable outcome and strict structure.
• Server-side rendering – You just need to pass the store created on the server, to the client side. This is very useful for initial render and provides a better user experience as it optimizes the application performance.
• Developer tools – From actions to state changes, developers can track everything going on in the application in real time.
• Community and ecosystem – Redux has a huge community behind it which makes it even more captivating to use. A large community of talented individuals contribute to the betterment of the library and develop various applications with it.
• Ease of testing – Redux’s code is mostly functions which are small, pure and isolated. This makes the code testable and independent.
• Organization – Redux is precise about how code should be organized, this makes the code more consistent and easier when a team works with it.

111.When would you use flushsync in Reactjs?

In React, there is no built-in concept or function called flushSync. It seems like you might be referring to an incorrect or outdated term or function. React’s API evolves, and new features are introduced from time to time, so it’s possible that flushSync was not a part of React or may have been a part of a third-party library or an experimental feature.

If you have specific use cases or questions related to React or a particular functionality, please provide more details, and I’d be happy to assist you accordingly.