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.

Interview challenge : getMovieTitles

Myriad Systems.

To solve this challenge, write an HTTP GET method to retrieve information from a particular movie database.

https://stackoverflow.com/questions/48448432/fragment-of-missing-code-in-the-solution-movie-titles-complete-a-challenge-more

function getMovieTitlesData(title, page = 1) {
   const url = 'https://jsonmock.hackerrank.com/api/movies/search/?Title=' + title + '&page=' + page;
   console.log('URL:',url);
   const titles = [];
   return new Promise((resolve, reject) => {
      fetch(url, {
        method: 'get',
      }).then((response) => {
        return response.json();
      }).then((jsondata) => {
        for (let i = 0; i < jsondata.data.length; i++) {
           titles.push(jsondata.data[i].Title);
      }
      var total_pages = Number(jsondata.total_pages); 
      var curpage = Number(jsondata.page); 
      resolve({
         titles : titles,
         page : page,
         total_pages : total_pages
      });
    }).catch((error) => {
      console.log("Failure", error);
    })
  })

}


function getMovieTitles(substr) {
   const promises = [];
   const titles = []; 
   getMovieTitlesData(substr).then(result => {
     titles.push(...result.titles);
     for (let i = result.page + 1; i <=result.total_pages; i++) {
        promises.push(getMovieTitlesData(substr, i));
     }
     Promise.all(promises).then(datas => {
       datas.forEach(data => {
          titles.push(...data.titles);
       });
       console.log(titles.sort());

     });
  })
}

getMovieTitles('spiderman');