Componente funcționale în React — standardul modern de dezvoltare

Ce este Functional Component?

Functional Component (component funcțional) — este un component React definit ca o funcție, care primește un obiect props și returnează un element React. Înainte de React 16.8, astfel de componente erau numite stateless (fără stare), deoarece nu puteau gestiona starea internă.

Odată cu apariția hook-urilor în React 16.8 (februarie 2019), componentele funcționale au obținut acces la stare (useState), efecte secundare (useEffect), context (useContext) și referințe (useRef). Termenul „stateless" este depășit — componentele funcționale moderne gestionează complet starea.

React recomandă oficial componentele funcționale ca modalitate principală de creare a componentelor. Toată documentația de pe react.dev, exemplele, tutorialele și noile API-uri (Server Components, Actions) sunt construite pe abordarea funcțională. Componentele de clasă nu au fost eliminate, dar noile capacități ale React sunt disponibile doar prin hook-uri.

Crearea unui component funcțional

Cel mai simplu component funcțional — o funcție care returnează JSX. Acesta primește props ca argument, nu necesită constructor, apel super sau legare this. Props sunt disponibile direct prin argumentul funcției — fără 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>
);

Component cu stare

Pentru a adăuga stare, folosiți useState. Hook-ul returnează un tuplu de două valori: starea curentă și funcția setter. Spre deosebire de this.setState din clase, useState înlocuiește valoarea complet, fără a o îmbina cu cea anterioară.

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>
  );
}

Hook-uri în componentele funcționale

Hook-urile sunt baza React-ului modern. Fiecare hook rezolvă o sarcină specifică: useState — stare, useEffect — efecte secundare, useContext — acces la context, useRef — referințe la elemente DOM, useCallback și useMemo — memoizare.

useEffect pentru efecte secundare

useEffect înlocuiește simultan componentDidMount, componentDidUpdate și componentWillUnmount. Primul argument — callback cu efectul, al doilea — tabloul de dependențe. Dacă tabloul este gol, efectul se execută o dată după montare. Dacă dependențele sunt specificate — la fiecare modificare a oricăreia dintre ele.

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>;
}

Hook-uri personalizate

Principalul avantaj al componentelor funcționale — reutilizarea logicii prin hook-uri personalizate. Dacă în componentul de clasă logica se duplica între componentDidMount și componentDidUpdate, în cel funcțional este extrasă într-o funcție separată cu prefixul use. Hook-urile personalizate sunt principala alternativă la HOC și render props.

Compoziție în loc de moștenire

React recomandă compoziția, nu moștenirea, pentru reutilizarea codului între componente. Componentele funcționale sunt ideale pentru compoziție: un component poate conține mai multe altele, transmițându-le props și children.

Pattern-ul children — când componentul primește elemente copil prin prop-ul children — se implementează natural: function Layout({ children }). Analogul slots din Vue se implementează prin props-componente denumite: function Page({ header, sidebar, content }).

Moștenirea în React practic nu este utilizată. Chiar și componentele de clasă, care suportă tehnic extends, rareori formează ierarhii mai adânci de un nivel. Componentele funcționale cu compoziție acoperă complet nevoile de reutilizare a codului fără moștenire.

Optimizarea performanței

Componentele funcționale au mecanisme incorporate de optimizare. React.memo — analogul PureComponent pentru funcții: previne re-renderizarea dacă props-urile nu s-au schimbat (comparare superficială). useMemo stochează în cache rezultatul calculelor între renderizări.

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 memoizează funcțiile callback pentru a nu fi recreate la fiecare renderizare. Acest lucru este critic la transmiterea funcțiilor către componente copil înfășurate în React.memo: fără useCallback, componentul copil se va re-renderiza de fiecare dată, deoarece referința către funcție se schimbă.

Compararea componentelor funcționale și de clasă

Diferența dintre abordări depășește sintaxa. Componentele funcționale — sunt o închidere: starea și efectele sunt legate de o anumită renderizare. Componentele de clasă — sunt this: starea este întotdeauna preluată din this.state, care poate fi învechit în momentul executării unui callback asincron.

Componentele funcționale oferă un flux de execuție liniar. În componentul de clasă, logica asociată este adesea împrăștiată pe mai multe metode de ciclu de viață. De exemplu, abonarea la WebSocket se configurează în componentDidMount și se elimină în componentWillUnmount. În componentul funcțional, ambele operații — într-un singur useEffect cu funcție de curățare returnată.

TypeScript și componentele funcționale

TypeScript cu componentele funcționale funcționează mai natural decât cu clasele. Tipizarea props-urilor — o interfață pentru argumentul funcției. Tipul valorii returnate — JSX.Element sau ReactNode. useState deduce automat tipul din valoarea inițială.

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>
  );

TypeScript modern permite tipizarea useReducer cu tipuri union discriminate, Generics în hook-uri personalizate și verificarea strictă a children prin React.PropsWithChildren. Componentele funcționale cu TypeScript oferă siguranță completă a tipurilor fără abstracții suplimentare.