Class component vs functional component

In React Native mainly two types of components Class Component & Functional Component. 

Class components are ECMAScript2015(ES6) that extend a base class from React called Component. It is used as a container component to handle state management.

Before introducing the concept of hooks in React 16.8 functional component is a plain javascript function but after hooks it maintains have state and lifecycle also.  

Class Component Vs Functional Component:-

Class Component:

  1. In the class component, the render method is used when the state of the component is changed.
  2. It is a Stateful component.
  3. It requires extending from React Component and creating render function which returns a React element.
  4. It is used the Complex lifecycle method.
  5. Required “this” keyword for referring to the object itself.
  6. Lifecycle of class components are:-

    (a) Mount: It includes methods that are called in the following order when an instance of a component is being created and inserted.

 (i)

 (ii)

(b) Update: It includes an update that can be caused by changes to props or state. These methods are called in the following order when a component is re-rendered:

(i)     

(ii)

(iii)

(iv)

 

(c) Unmount: It includes a method is called when a component is removed.

(i)

  1. The basic syntax of class Component using state:-

Functional Component:

In Functional Component, render the UI based on props.

  1. It is used a stateless component.
  2. It is a javascript function that accepts props as an argument and returns a React Component.
  3. Easier or simpler lifecycle.
  4. Not Required “this” keyword for referring to object.
  5. Lifecycle of class components are:-

 (a) Mount: It includes when you want to perform an action each time renders and mount.      

(b) Update: It includes when you want to perform an action on component update.

                     

7. Basic Syntax functional component using state:-

Leave a Reply