React JS Functional and Class Components

Photo by Joel Filipe on Unsplash

Components are essentially bundles of code that compartmentalize logic and functions in a React app. We create components using JSX, which stands for JavaScript XML, a JavaScript syntax extension that lets us create HTML elements and appends them to a page automatically. Let’s explore some key differences between the two types of components as well as examples of usage for each.

Functional Components

Functional components, which are also not-so-nicely referred to as “dumb” components, are essentially JavaScript functions that render JSX. In reality, “dumb” component is a bit of a misnomer since functional components are extremely valuable in React and let us isolate different functionality and logic. With functional components, we can also easily create different user interface (UI) components to render on the page. Unlike class components, functional components do not require a render() function since they are already functions. Here is an example of a basic functional component.

function HelloWorld(props){
  return <h1>{props}</h1>;
}

On line 1, we can see that we are defining the component just like any regular JavaScript function. While we pass down props as an argument using any name that we would like, it is best practice to be semantic and just call it “props”. On line 2, we return the props in an h1 tag using curly braces. Remember that props, short for properties, are just data we pass down from parent to child components. Props are just objects and can be anything from a function to a variable.

Let’s flesh out the functional component a little bit. Here, we set up our page by importing React from the React library using a default import. We also place our prop inside of a <div> container and called {props.greeting}. Here, greeting is referencing a particular prop that is being passed down from a parent component.

import React from 'react';
function HelloWorld(props){
   return (
      <div>
        <h1>{props.greeting}</h1>
      </div>
   )
}
export default HelloWorld;

So we can see that functional components take props as an argument, and are able to call props using curly braces. Optionally, functional components can also make use of the arrow syntax that was introduced in ES6. Note that we replace function with const and use rocket, or arrow notation, to set up our function.

const HelloWorld = (props) => {
   return (
    <h1>{props}</h1>
   )
}

It is important to note that functional components on their own do not have the capability to handle state or lifecycle methods without the use of hooks, which we will detail in a bit.

Class Components

Class components in React JS are commonly referred to as “smart” components. Compared to functional components, which are typically responsible for handling presentational aspects, class components handle logic and are able to pass down props, set and handle state, as well as handle lifecycle methods. We can set up a class components by extending the Component class from the React library. All this means is that there is generic “Component” blueprint that we can import and use to make our own class components. Class components are also able to use constructors to set up the initial state.

Here is a basic example of a class component in React. Class components make use of the render() function because they are not inherently functions like functional components, so they need to have a way to explicitly return elements.

import React, { Component } from 'react';

class HelloWorld extends Component {
  render() {
    return (
      <div>
        <h1>Hello world!</h1>
      </div>
    );
  }
}

export default MyComponent;

Class components use the keyword this to refer to props, such as {this.props}. We use the this keyword because we are already in the component in which props are being defined, so we have not yet passed down any props. The props are already within that same component. Main components or parent components are typically class components in React since they manage the most important logic and functionality of an application. We can also establish state using constructors within a class component. Establishing state goes before we render anything on the page.

constructor(props) {
    super(props);
    this.state = { 
        thisState: true;
     };
  }

Using a constructor, we can set state inside of the class component. Boolean statements are typically very common when we are setting state.

Hooks

Functional components lacked the ability to handle state and lifecycle functions up until October 2018, when hooks were introduced to React. Hooks are just functions that let you use class component functionality within a functional component. While hooks are not necessary, they certainly expand functionality. For the scope of this article we will be covering just the core differences between functional and class components in React, but an example of a very useful React hooks include useState, which lets us set state inside of a functional component.