React.js Functional Component overview

August 27, 2023

In this post we will break down different technical aspects and mechanisms behind Functional Component.

With React 16.8 Functional Components were introduced and quickly became de facto status quo. They, however, have to use different mechanisms to accomodate needs as storage, lifecycle stuff or events stuff from Class Components. We show some pretty common React code with a functional component and explain all stuff that comes into making.

There are things that come into making of React with Functional Component code.

Code example

import React, { useState } from 'react';
import { Pwnspinner } from 'pwnspinner'; // <- 1

interface IBestTeamsProps { // <- for ex. 2
    country: string;
    cnt: number;
}

type Team = {
    name: string;
    wins: number;
    logo: string;
};

function BestTeams(props: IBestTeamsProps = {}) { // <- for ex. 2
    const [teams, setTeams] = useState<Team[]|null>(null); // <- for ex. 2
    const [bestTeam, setBestTeam] = useState<Team|null>(null); // <- 3, for ex. 2
    useEffect(() => {
        let fetchedTeams = await FetchNTeams(cnt); // <- 4 & arbitrary implementation w/ fetch inside
        setTeams(fetchedTeams);
        const bestTeam = teams.find(team => team.wins === Math.max(...teams.map(team => team.wins))); // <- 5(a)
        setBestTeam(bestTeam);
    }, [])

    return ( // <- 6
        <>
            <div>
                <u>{bestTeam.name}</u>
            </div>
            <hr>
            <div>
                {teams.map((team: Team) => <div>{team.wins} {team.name}</div> )} {/* 5(b) */}
            </div>
        </>
    )
}

Breakdown of fundamentals

import is realized via JavaScript Modules ¹.
TypeScript ² is removed during application build or compilation.
useState hook³ is storing data by Closures ⁴ and Destructuring assignment ⁵.
fetch is a browser Web API functionality ⁶.
Array operations (a).find⁷ and (b).map⁸ are new ES6 features.
JSX is syntactic sugar for React.createElement(...)⁹.