React JS Interview Questions

React is a JavaScript library developed by Facebook for building user interfaces. It enables developers to create reusable UI components, manage the state of their applications efficiently, and update the DOM (Document Object Model) in a performant way through its virtual DOM mechanism. React is used for its simplicity, flexibility, and performance, allowing for the development of complex and interactive web applications.

Performance optimization in React can be achieved through various strategies, including:

• Using shouldComponentUpdate or React.memo to prevent unnecessary re-renders.
• Splitting code to only load what's necessary using dynamic import() statements and React.lazy for lazy loading components.
• Keeping component state local where necessary to avoid unnecessary propagation of state changes.
• Using Immutable data structures to facilitate the quick comparison of data changes.
• Utilizing Web Workers for complex calculations to keep the UI responsive.

When to use useRef() instead of useState()

A rule of thumb is to use useState when you need to re-render the component when the state changes and useRef when you don't need to re-render the component when the state changes.
Here are some examples of when to use useRef instead of useState:

• When you need to store a value that does not trigger a re-render when it is updated.
• When you need to store a value that is not used in the render method.
• When you need to store a value that persists for the lifetime of the component.

useState is a hook used to manage state in functional components, while useEffect is a hook used to manage side effects (like fetching data, setting up event listeners, or updating the DOM) in functional components. 

In simple words, useState allows our functional components which used to be stateless become stateful. And useEffect allows our functional components leverage the component lifecycle hooks which were, in the past, only supported for class components.

The useEffect hook allows us to respond to changes in the component lifecycle. The component lifecycle refers to a set of events that occur from the time a component is mounted to the DOM until it is removed. useEffect is most commonly used to execute code when the component is initially rendered, when it is updated, and when it is unmounted.

The virtual DOM is a lightweight copy of the actual DOM in the browser. React uses this virtual DOM to optimize DOM manipulation by minimizing the number of expensive direct updates to the actual DOM. When the state of an object changes, React first changes the object in the virtual DOM. Then, it compares the virtual DOM with a pre-update version and only applies the differences to the real DOM. This process, known as "diffing," ensures that React only performs the minimum necessary updates to the DOM, leading to improved performance and a smoother user experience.

Components are the building blocks of any React application. They are reusable and can be nested inside other components to allow complex applications to be built out of simple building blocks. Components can be either class-based or functional and are used to define the visual and behavioral parts of the UI. Each component has its own state and props to manage its content, making the UI dynamic and interactive.

In React, both state and props are used to control the output of components, but they serve different purposes and are managed differently:

• Props (short for properties) are read-only and immutable, passed from parent to child component. They are used to pass data and event handlers down to child components.
• State is a mutable object that is managed within the component and can be updated using setState (in class components) or the useState hook (in functional components). State is used for data that changes over time or in response to user actions.

Hooks are a feature introduced in React 16.8 that allow you to use state and other React features without writing a class. Hooks are functions that let you "hook into" React state and lifecycle features from function components. The most commonly used hooks are useState for state management within functional components and useEffect for side effects in functional components.

Lifecycle methods are hooks that allow you to execute code at particular phases of a component's lifecycle. In class components, these include:

• Mounting (e.g., constructor, render, componentDidMount): These methods are called when an instance of a component is being created and inserted into the DOM.
• Updating (e.g., shouldComponentUpdate, render, componentDidUpdate): These methods are called when a component is being re-rendered due to changes to either its props or state.
• Unmounting (componentWillUnmount): This method is called just before a component is removed from the DOM.

React 16.3 introduced new lifecycle methods (e.g., getDerivedStateFromProps, getSnapshotBeforeUpdate) and deprecated some old ones (e.g., componentWillMount, componentWillReceiveProps, componentWillUpdate).

In React, events are handled using camelCase syntax, similar to handling events on DOM elements. However, with React, you pass a function as the event handler rather than a string. For example, the HTML <button onclick="activateUser()">Activate</button> becomes <button onClick={activateUser}>Activate</button> in React. Inside these event handlers, this in class components refers to the component instance, and you often need to bind these methods in the constructor so they can access this.