20 Questions - biswajitsundara/react GitHub Wiki

1. What is React JS?

React.js is an open-source JavaScript library used for building user interfaces. It allows developers to create reusable UI components that manage their own state, making it easier to build complex and interactive web applications.

2. Difference between React & angular, vue, Nextjs?

React is a JavaScript library for building user interfaces, while Angular, Vue.js, and Next.js are frameworks that provide more opinionated solutions, including file structure. React, on the other hand, offers flexibility, leaving the design decisions to the user.

3. Real DOM vs Virtual DOM?

Real DOM is the actual representation of the webpage structure. Updating the real DOM is expensive as it recalculates the entire DOM tree. Virtual DOM is the lightweight copy of the real DOM. When the state changes it updates the virtual DOM & then it compares with the real DOM and updates only the part where the changes have happened. The process is called diffing & reconciliation. This is much faster compared to updating the DOM.

4. Why keys are important in react?

Key is required to correct rendering of lists or collection of elements.

  • The key prop helps in determining which element has changed, added or removed from the list.
  • It helps to perform efficient updates to the Virtual DOM and minimizes the re rendering.
  • If keys are not provided it will rely on the element order and that will have in efficient reconciliation when elements are added/removed/updated.
  • It may incorrectly associate the old state of an element with the new element when the elements get reordered causing state loss.
  • It might trigger re renders for the elements which are not changed causing re render overhead.

5. How props and states are different from each other?

  • Props are used to pass data between components. They are read only and can not be changed in the recipient component.
  • Props are immutable, when props are passed to a component, their values remain constant throughout it's lifecycle.
  • Props data flows from parent to child. Parent component owns the data and can share with child components.
  • State on the other hand is mutable it's a component specific data that changes over time.
  • Components have their own state and can update it using the setState method.
  • State is local/internal to the component and can not be accessed or modified by other components.
  • When state changes react triggers a re render of the component so the changes reflect on the UI.

6. Difference between functional & class components?

  • Functional components are javascript functions those return JSX. Until react 16.7 the state management was not available in functional component however post that with the hooks feature that manages the states using useState, useEffect etc.
  • Functional components are light weight and performant as we don't have to create an instance.
  • Class components extend the class React.component and have a render method.
  • Class components manage their state using this.state and with life cycle methods like componentDidMount, componentDidUpdate
  • Class component is the legacy approach and it's recommended to use functional components.

7. How can we re render a react component?

The most common way to trigger a re-render is by updating the component's state using the useState method