Differences between Functional Components and Class Components

Differences between Functional Components and Class Components

In this lesson, Im going to explain the differences between functional and class components in React with the help of suitable easy examples. I will create a counter and execute it in both class and functional components to understand the differences.

Differences between Functional Components and Class Components

Functional Components

In React functional components are some of the more common components. These components are same like JavaScript functions. We can create a functional component in React by writing a JavaScript function. A Functiononal component also returns HTM, this type of function behaves almost same like Class component, but writtn codes are easier to understand as compare to class components.

Example 

function Train() {
  return <h2>Hi, I am a Train!</h2>;
In this above example we have created a funciton name Car. React application has a component called Train which returns an <h2> element.To use this component in your application, use similar syntax as normal HTML: <Train />

Class Component

This is the bread and butter of most modern web apps built in ReactJS. These components are simple classes (made up of multiple functions that add functionality to the application).

Syntax:

class Car extends React.Component {
      render() {
        return <h2>Hi, I am a Train!</h2>;
      }
}

Functional Components vs Class Components

             Functional Components in React JS                          Class Components in React JS
A functional component is just a plain JavaScript function that accepts props as an argument and returns a React element(JSX) HTML. A class component requires you to extend from React. Component and create a render function that 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 components run from top to bottom and once the function is returned it can’t be kept alive. The class component is instantiated and different life cycle method is kept alive and is run and invoked depending on the phase of the class component.
Also known as Stateless components as they simply accept data and display them in some form, 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 function 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: ' '}
}

 

Be the first to comment

Leave a Reply

Your email address will not be published.


*