DEV Community

Cover image for React components -(Class component v/s function component)
Manikandan K
Manikandan K

Posted on

React components -(Class component v/s function component)

What is a Component?

  • Component is independent and reusable bits of code.
  • Components let you break up the user interface into separate pieces / that can then be reused / and handled independently.

Image description

Class Component v/s Function Component

Class Component :

  • To define a React component / as a class, extend the built-in Component class / and define a render method.
class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}
Enter fullscreen mode Exit fullscreen mode
  • To use Lifecycle methods in class Components.
  • Little complex compared with Functional Components.

Class component without state

Image description

Class component with state

Image description

Function Component :

  • React functional component is a simple JavaScript function / that accepts props and returns a React element.
  • These functions may or may not receive data as parameters.
// Normal function 
function Welcome () {
        return <h1>Hello, {this.props.name}</h1>;
    }


//Arrow function
 const Welcome  = () =>  {
        return <h1>Hello, {this.props.name}</h1>;
    }

Enter fullscreen mode Exit fullscreen mode
  • Function components are called stateless components (Before Introducing hook).
  • Access state and other react features (lifecycle methods) using hooks.
  • Easy to create Function components.

function component without state

Image description

function component with state

Image description

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay