React: class-based vs. functional components

At the year-end conference, Ernad Delić, our software developer, took the spotlight, diving into the essential distinctions between the functional and class-based React components.

React serves as a JavaScript library for building user interfaces. React apps are created by combining reusable UI building blocks called components, which consist of HTML, CSS, and JavaScript.

React: Built-in components

Built-in browser components always start with a lowercase character. Only valid, officially defined HTML elements are allowed and rendered as DOM nodes by React (i.e., displayed on the screen).

React: Custom components

Regarding the custom component, it begins with an uppercase character and is defined by the developer. It is used to encapsulate built-in or custom components. React “traverses” the custom components until it has only built-in components left.

React: JSX, Props and State

JSX is a syntax extension to JavaScript. It is similar to HTML but has the full power of JavaScript (e.g., it may output dynamic content).

<div>
	<h2>Hello {userName}</h2>
	<p>JSX is awesome!</p>
</div>

Props serve as inputs to React components, allowing data to be passed from a parent component to its child component.

const CORE_CONCEPTS = [
    {
        title: "JSX",
        description: "Syntax extension to js"
    },
    {
        title: "Props",
        description: "Data passed to components"
    }
]

function App() {
    return (
        <>
            {CORE_CONCEPTS.map(coreConcept => <CoreConcept key={coreConcept.title} title={coreConcept.title}>{coreConcept.description}</CoreConcept>)}
        </>
    )
}

export default App;

The State allows React components to change their output over time in response to user actions, network responses, etc.

import {useState} from "react";

export default function MainContent() {
    const [isLoading, setIsLoading] = useState(false);
    const toggleIsLoading = () => {
        setIsLoading(isLoading => !isLoading);
    };
    return (
        <main>
            <button onClick={toggleIsLoading}>Toggle loading state</button>
            {isLoading && <p>Loading...</p>}
        </main>
    )
}

React Hooks allow us to choose

Furthermore, with the introduction of React Hooks, all the shortcomings that functions had about classes have been filled, which allows us to choose what we want to use.

What React developers prefer

The choice may depend on several factors, including our personal preference.  For instance, a developer who has extensive experience with object-oriented programming may feel more comfortable with the class-based approach, as it aligns with their expertise.

What the React community suggests

We may want to follow the direction in which the React community is going; in that case, our choice would be functional components.

What the React project is about

In certain situations, we may find ourselves with limited options. For example, when working on a written project that involves classes, the transition to functional components can be done gradually, depending on the attitudes of the developers involved. It is worth noting that both approaches can be combined on the same project. The last case leads us to conclude that being proficient in both approaches will certainly not harm us, no matter our preference.

Overview of creating React components

To sum up, this talk briefly overviewed an alternative way of creating React components using classes and their comparison with functions.

Although functions are widely accepted and recommended to create React components, classes are still not discarded and can be found in many legacy React projects or third-party libraries. Class-based components can also be easier to understand for an Angular developer learning React because the approach is more Angular-like than functional components.

Follow our blog section for more exciting topics we will share with you in the next period.