Funkční komponenty v React — moderní standard vývoje

Co je Functional Component?

Functional Component (funkční komponenta) — je React komponenta definovaná jako funkce, která přijímá objekt props a vrací React element. Před React 16.8 se takové komponenty nazývaly stateless (bez stavu), protože nemohly spravovat vnitřní stav.

S příchodem hooků v React 16.8 (únor 2019) získaly funkční komponenty přístup ke stavu (useState), vedlejším efektům (useEffect), kontextu (useContext) a referencím (useRef). Termín „stateless" je zastaralý — moderní funkční komponenty plně spravují stav.

React oficiálně doporučuje funkční komponenty jako hlavní způsob vytváření komponent. Veškerá dokumentace na react.dev, příklady, tutoriály a nová API (Server Components, Actions) jsou postaveny na funkčním přístupu. Třídní komponenty nebyly odstraněny, ale nové možnosti React jsou dostupné pouze přes hooky.

Vytvoření funkční komponenty

Nejjednodušší funkční komponenta — funkce vracející JSX. Přijímá props jako argument, nevyžaduje konstruktor, volání super ani vázání this. Props jsou dostupné přímo přes argument funkce — bez this.props.

// Functional component without state
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Arrow function (common variant)
const Greeting = ({ name }) => (
  <h1>Hello, {name}!</h1>
);

Komponenta se stavem

Pro přidání stavu použijte useState. Hook vrací dvojici hodnot: aktuální stav a setter funkci. Na rozdíl od třídního this.setState, useState nahrazuje hodnotu zcela, neslučuje ji s předchozí.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Hooky ve funkčních komponentách

Hooky jsou základem moderního React. Každý hook řeší konkrétní úkol: useState — stav, useEffect — vedlejší efekty, useContext — přístup ke kontextu, useRef — reference na DOM elementy, useCallback a useMemo — memoizace.

useEffect pro vedlejší efekty

useEffect současně nahrazuje componentDidMount, componentDidUpdate a componentWillUnmount. První argument — callback s efektem, druhý — pole závislostí. Pokud je pole prázdné, efekt se provede jednou po připojení. Pokud jsou závislosti uvedeny — při každé změně kterékoli z nich.

import React, { useState, useEffect } from 'react';

function UserData({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    let cancelled = false;

    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        if (!cancelled) setUser(data);
      });

    // Cleanup - analog of componentWillUnmount
    return () => { cancelled = true; };
  }, [userId]); // Dependency

  return <div>{user?.name}</div>;
}

Vlastní hooky

Hlavní výhoda funkčních komponent — znovupoužití logiky prostřednictvím vlastních hooků. Pokud se v třídní komponentě logika duplikovala mezi componentDidMount a componentDidUpdate, ve funkční se extrahuje do samostatné funkce s prefixem use. Vlastní hooky jsou hlavní alternativou k HOC a render props.

Kompozice místo dědičnosti

React doporučuje kompozici, nikoli dědičnost, pro znovupoužití kódu mezi komponentami. Funkční komponenty jsou ideální pro kompozici: jedna komponenta může obsahovat několik dalších a předávat jim props a children.

Vzor children — když komponenta přijímá potomky přes prop children — je implementován přirozeně: function Layout({ children }). Analogie slots z Vue je implementována pomocí pojmenovaných props-komponent: function Page({ header, sidebar, content }).

Dědičnost se v React prakticky nepoužívá. Dokonce i třídní komponenty, které technicky podporují extends, zřídka tvoří hierarchie hlubší než jednu úroveň. Funkční komponenty s kompozicí plně pokrývají potřeby znovupoužití kódu bez dědičnosti.

Optimalizace výkonu

Funkční komponenty mají vestavěné mechanismy optimalizace. React.memo — analog PureComponent pro funkce: zabraňuje opětovnému vykreslení, pokud se props nezměnily (mělké porovnání). useMemo ukládá do mezipaměti výsledek výpočtů mezi vykresleními.

import React, { useMemo } from 'react';

// React.memo - memoize component
const ExpensiveList = React.memo(({ items }) => {
  return <ul>
    {items.map(item =>
      <li key={item.id}>{item.name}</li>
    )}
  </ul>;
});

// useMemo - caching result
function Dashboard({ transactions }) {
  const summary = useMemo(() => {
    return transactions.reduce((acc, t) => acc + t.amount, 0);
  }, [transactions]);

  return <p>Total: {summary}</p>;
}

useCallback memoizuje callback funkce, aby nebyly znovu vytvářeny při každém vykreslení. To je kritické při předávání funkcí potomkům zabaleným v React.memo: bez useCallback se potomek bude vykreslovat pokaždé, protože reference na funkci se mění.

Srovnání funkčních a třídních komponent

Rozdíl mezi přístupy přesahuje syntaxi. Funkční komponenty — jsou uzávěrem: stav a efekty jsou vázány na konkrétní vykreslení. Třídní komponenty — jsou this: stav je vždy získáván z this.state, který může být v okamžiku provedení asynchronního callbacku zastaralý.

Funkční komponenty poskytují lineární tok provádění. V třídní komponentě je související logika často rozptýlena po několika metodách životního cyklu. Například předplatné WebSocket se nastavuje v componentDidMount a odstraňuje v componentWillUnmount. Ve funkční komponentě jsou obě operace — v jednom useEffect s funkcí čištění.

TypeScript a funkční komponenty

TypeScript s funkčními komponentami pracuje přirozeněji než s třídami. Typování props — rozhraní pro argument funkce. Typ návratové hodnoty — JSX.Element nebo ReactNode. useState automaticky odvodí typ z počáteční hodnoty.

import React, { useState } from 'react';

interface ButtonProps {
  label: string;
  variant?: 'primary' | 'secondary';
  onClick: () => void;
}

const Button: React.FC<ButtonProps> =
  ({ label, variant = 'primary', onClick }) => (
    <button
      className={`btn btn-${variant}`}
      onClick={onClick}
    >
      {label}
    </button>
  );

Moderní TypeScript umožňuje typování useReducer s diskriminovanými union typy, Generics ve vlastních hookách a přísnou kontrolu children pomocí React.PropsWithChildren. Funkční komponenty s TypeScript poskytují úplnou typovou bezpečnost bez dalších abstrakcí.