we'll dive✈️ into the differences between functional components and class components in React. Both serve the same purpose - building user interfaces - but they have distinct features that make them suitable for different scenarios.

What a Component is?

Web Applications developed using react is the combination and interlinking of different Components.

Components let you develop UserInterfaces of the website independently and even we can use reusable components to implement a similar UI.

React facilitates the developer with Class Component and Functional Components.

So let's understand these two types of components😉

Functional Components

ReactJS Functional components are some of the more common components that will come across while working in React. These are simply JavaScript functions. We can create a functional component in React by writing a JavaScript function. These functions may or may not receive data as parameters. In the functional Components, the return value is the JSX code to render to the DOM tree.

How to create a functional component?

Functional components are simple and concise. They are stateless, meaning they don't manage their own state.

const FunctionalComponent = () => {
  // Component logic goes here
  return <div>Hello, I'm a functional component!</div>;
};

Class Components

When creating a React component, the component's name must start with an upper case letter.

The component has to include the extends React.Component statement, this statement creates an inheritance to React.Component, and gives your component access to React.Component's functions.

The component also requires a render() method, this method returns HTML.

class ClassComponent extends React.Component {
  // Component logic and state go here

  render() {
    return <div>Hello, I'm a class component!</div>;
  }
}

Class components, on the other hand, can hold and manage local state. They are more feature-rich and traditionally used for complex components.

Functional Components Vs Class Components

1. Functional Components:

   • Also known as stateless components or presentational components.

   • Defined as JavaScript functions.

   • Primarily responsible for presenting UI and receiving props.

   • Do not have their own internal state (until the introduction of React Hooks in React 16.8).

   • Typically easier to read, write, and test.

   • With the introduction of React Hooks, functional components can now manage state and side effects using hooks like useState and useEffect.

   • Example:

       import React from 'react';
     
       const MyFunctionalComponent = (props) => {
         return <div>{props.message}</div>;
       };
     

2. Class Components:

   • Also known as stateful components.

   • Defined using ES6 class syntax.

   • Can have their own internal state using this.state.

   • Can use lifecycle methods (componentDidMount, componentDidUpdate, etc.).

   • Historically used to manage state and side effects before the introduction of hooks.

   • Example:

       import React, { Component } from 'react';
     
       class MyClassComponent extends Component {
         constructor(props) {
           super(props);
           this.state = {
             count: 0,
           };
         }
     
         render() {
           return <div>{this.props.message}</div>;
         }
       }
     

With the introduction of React Hooks in React 16.8, functional components gained the ability to manage state and side effects. Hooks provide a way to use state and other React features without writing a class.

Conclusion🧨

the choice between functional and class components depends on the specific requirements of your project. With the advent of Hooks, functional components have become more powerful and can handle state and side effects effectively. Class components, while slightly heavier, are still relevant and useful in certain scenarios.

Remember, the React team is actively promoting functional components and hooks, so it's a good idea to familiarize yourself with both for a well-rounded React development experience.

Hope you have learned something about the types of React Components from this blog🤗

Feel Free to explore beyond your understandings.

Thanks for reading💖