Functional Components

• Functional components are simply JS functions.
• In React we can create Functional Component by writing a JS function.
• To create React app efficient, we use functional component only when we are sure that our component does not require to interact with any other components.
• It does not require data from other components.

For example,

const Democomponent=()=>

    {

            return 
Welcome to Kaashiv!
;

    }

Class Components

• The class components are much like the functional component but has a few additional capabilities that makes class component a little more complicated than the functional components.
• The class components can work with each other where functional components are not aware of the other components in your program.
• From one class component to other class components, we can pass the data.
• In React we use JavaScript ES6 classes to create class-based components.

For example,

class Democomponent extends React.Component
   {
       render(){
             return 
Welcome to Kaashiv!
;
      }
  }

                 Class component  

Functional component  Class-based Components uses ES6 class syntax. Functional Components are simpler comparing to class-based functions.

  The lifecycle methods can be used. Functional Components mainly focuses on the UI of the application, not on the behavior. More code to write. Easy to write. Used for presenting static data. Used for dynamic source of data. Can’t handle fetching data. Handles any data that might change. It must have a render() method. It doesn’t have a render() method. Here,React lifecycle methods (like componentDidMount, etc.) are used React hooks are there to be as a better alternative to the traditional React lifecycle methods. For e.g:

const [name,SetName]= React.useState(‘ ‘) For e.g:

constructor(props) {

super(props);

this.state = {name: ‘ ‘}

}

  In functional components to make them Stateful, Hooks can be easily used. In class component to implement hooks,It requires different syntax.