Promise

A promise is a JavaScript object that allows you to make asynchronous (aka async) calls. It produces a value when the async operation completes successfully or produces an error if it doesn’t complete. A promise may be in one of 3 possible states: fulfilled, rejected, or pending.

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

myResolve(); // when successful
myReject(); // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
)

 

  1. A “producing code” that does something and takes time. For instance, some code that loads the data over a network.
  2. A “consuming code” that wants the result of the “producing code” once it’s ready. Many functions may need that result.
  3. A promise is a special JavaScript object that links the “producing code” and the “consuming code” together. The “producing code” takes whatever time it needs to produce the promised result, and the “promise” makes that result available to all of the subscribed code when it’s ready.

React: Lifecycle of Components

Every React Component has a lifecycle of its own, lifecycle of a component can be defined as the series of methods that are invoked in different stages of the component’s existence.  A React Component can go through four stages of its life as follows.

  • Initialization: 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: Mounting is the stage of rendering the JSX returned by the render method itself.
  • Updating: Updating is the stage when the state of a component is updated and the application is repainted.
  • Unmounting: As the name suggests Unmounting is the final step of the component lifecycle where the component is removed from the page.

Mounting:  componentWillMount() ==> render() ==> componentDidMount()

Updating:

componentWillReceiveProps() / setState() –>

shouldComponentUpdate() –> componentWillUpdate() –> render() –> componentDidUpdate()

UnMounting:

componentWillUnmount()

Functional component vs class components

 

                 Functional Components                               Class Components                
A functional component is just a plain JavaScript pure function that accepts props as an argument and returns a React element(JSX). A class component requires you to extend from React. Component and create a render function which returns a React element.
There is no render method used in functional components. It must have the render() method returning JSX (which is syntactically similar to HTML)
Functional component run from top to bottom and once the function is returned it cant be kept alive. Class component is instantiated and different life cycle method is kept alive and being run and invoked depending on phase of class component.
Also known as Stateless components as they simply accept data and display them in some form, that they are mainly responsible for rendering UI. Also known as Stateful components because they implement logic and state.
React lifecycle methods (for example, componentDidMount) cannot be used in functional components. React lifecycle methods can be used inside class components (for example, componentDidMount).
Hooks can be easily used in functional components to make them Stateful.

example: const [name,SetName]= React.useState(‘ ‘)

 It requires different syntax inside a class component to implement hooks.

example: constructor(props) {

super(props);

this.state = {name: ‘ ‘}

}
Constructors are not used. Constructor are used as it needs to store state.

Difference between props and state in React

The major differences between States and Props are given below.

SN Props State
1. Props are read-only. State changes can be asynchronous.
2. Props are immutable. State is mutable.
3. Props allow you to pass data from one component to other components as an argument. State holds information about the components.
4. Props can be accessed by the child component. State cannot be accessed by child components.
5. Props are used to communicate between components. States can be used for rendering dynamic changes with the component.
6. The stateless component can have Props. The stateless components cannot have State.
7. Props make components reusable. The State cannot make components reusable.
8. Props are external and controlled by whatever renders the component. The State is internal and controlled by the component itself.

What is a State in React?

The State is an updatable structure which holds the data and information about the component. It may be changed over the lifetime of the component in response to user action or system event. It is the heart of the react component which determines the behavior of the component and how it will render. It must be kept as simple as possible.

What is a virtual DOM?

A Virtual DOM is a lightweight JavaScript object which is an in-memory representation of real DOM. It is an intermediary step between the render function being called and the displaying of elements on the screen. It is similar to a node tree which lists the elements, their attributes, and content as objects and their properties. The render function creates a node tree of the React components and then updates this node tree in response to the mutations in the data model caused by various actions done by the user or by the system.

Virtual DOM works in three steps:

1. Whenever any data changes in the React App, the entire UI is re-rendered in Virtual DOM representation.

2. Now, the difference between the previous DOM representation and the new DOM is calculated.

3. Once the calculations are completed, the real DOM updated with only those things which are changed.