Class & functional components in React.js

Intro

Hello dear friends, coders, and coding enthusiasts.

Today we are going to run through a concept of components in React, and especially types of them, class and functional components. So, let’s see first, what are components and why do we need them ?

Like all programming languages, JavaScript supports functions allowing reusable pieces of business logic to be inserted into larger chunks of code. This hides complexity and illustrates the concept of subparts.

React components serve the same purpose, except React components effectively divide the UI into reusable components that return HTML. In a sense, React components are subparts for user interfaces.

React components are independent mixtures of JavaScript code and HTML fragments returning markup (HTML). The JavaScript provides the business logic and enables the creation of the correct HTML to be inserted into the DOM. (CSS provides the styling.)

This will be a short intro to class and functional components, and a short comparison between then. We are not going to deal with lifecycle methods, hooks, state management, etc. that can be used in one or the other type of the components.

So, here we go…

Class Component

When defining a class component, you have to make a class that extends React.Component. The JSX to render will be returned inside the render method. The render() method is required in class components and used to return an HTML element.

A class component is an ECMAScript 6 (ES6) JavaScript class that you define in code like this:

// Class component
import React, { Component } from "react";

class Welcome extends Component {
 render() {
   return <h1>Hello, people!</h1>;
 }
}
export default Welcome;

Class components extend from the React.Component class. React.Component objects have state, meaning the object can hold information that can change over the lifetime of the object. They can also respond to lifecycle methods, like ComponentDidMount(), ComponentDidUpdate(), and ComponentWillUnMount().

Lifecycle methods enable updated state information to trigger a re-render, which updates the DOM with revised HTML markup.

Functional Component

In React, they are just JavaScript functions. There are two ways of creating them. The first is by using the function keyword:

// Standard function syntax
function Welcome(props) {
   return (
      <div>
         <h1> Hello People! </h1>
      </div>
   );
}
export default Welcome;

So it must return JSX, start with Capital letter & follow pascal naming convention, takes props as a parameter if needed.

You can create functional components using standard function description syntax or using the arrow function syntax.
In the code snippet below, we define a “Welcome” functional component, that just returns an “h1” level text. At the end of the file, we export it as a default component, to be able to import it in any other file.

And here below, we define the same component, but using a bit different syntax, that is, an arrow function syntax.

// Arrow function syntax
const Welcome = (props) => {
   return <div><h1> Hello People! </h1></div>
}
export default Welcome;

Functional components return a single HTML element. To return more elements, you can wrap them in a topmost <div> element. Functional components are also known as stateless components because they aren’t class objects and don’t maintain state. You can pass props to functional components as arguments, and they can return HTML.

Comparison

Class components:

• Extend from React.Component
• Are also known as stateful components
• Can respond to lifecycle events
• Maintain state information
• Support props
• Require a constructor to store state before they can be used to pass props to the parent class
• Require a render function that returns an HTML element

Functional components:

• Don’t extend from React.Component
• Are known as stateless components
• Don’t respond to lifecycle events
• Don’t maintain state information
• Will accept any type of data (props)
• Don’t support a constructor
• Return HTML elements or nothing
• Support React 16.8 hooks

Conclusion

Photo by Junseong Lee on Unsplash

We’ve come to the end of our article about class and functional components in React. Hope so much that you have decided upon which one to use primarily in your next projects. And the thing to note is that React is gradually shifting towards functional components at each next version. So, it would be better to dive deep into functional approach, learn, apply and practice using functional components.

With React version 16.8, class components have taken a back seat to functional components. Functional components are more concise, leading to cleaner, less complex code.

Looking forward to having you read a worthy piece of information in my next article.

Say safe, stay healty !

Stay foolish, stay hungry!