Λειτουργικά components στο React — το σύγχρονο πρότυπο ανάπτυξης

Τι είναι το Functional Component;

Functional Component (λειτουργικό component) — είναι ένα component React που ορίζεται ως συνάρτηση, δέχεται ένα αντικείμενο props και επιστρέφει ένα στοιχείο React. Πριν από το React 16.8, τέτοια components ονομάζονταν stateless (χωρίς κατάσταση), επειδή δεν μπορούσαν να διαχειριστούν εσωτερική κατάσταση.

Με την εμφάνιση των hooks στο React 16.8 (Φεβρουάριος 2019), τα λειτουργικά components απέκτησαν πρόσβαση σε κατάσταση (useState), παρενέργειες (useEffect), περιβάλλον (useContext) και αναφορές (useRef). Ο όρος „stateless" είναι ξεπερασμένος — τα σύγχρονα λειτουργικά components διαχειρίζονται πλήρως την κατάσταση.

Το React συνιστά επίσημα τα λειτουργικά components ως κύριο τρόπο δημιουργίας components. Όλη η τεκμηρίωση στο react.dev, τα παραδείγματα, τα σεμινάρια και τα νέα API (Server Components, Actions) βασίζονται στη λειτουργική προσέγγιση. Τα class-based components δεν έχουν αφαιρεθεί, αλλά οι νέες δυνατότητες του React είναι διαθέσιμες μόνο μέσω hooks.

Δημιουργία λειτουργικού component

Το πιο απλό λειτουργικό component — μια συνάρτηση που επιστρέφει JSX. Δέχεται props ως όρισμα, δεν απαιτεί constructor, κλήση super ή δέσμευση this. Τα props είναι διαθέσιμα άμεσα μέσω του ορίσματος της συνάρτησης — χωρίς 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 με κατάσταση

Για να προσθέσετε κατάσταση, χρησιμοποιήστε το useState. Το hook επιστρέφει μια πλειάδα δύο τιμών: την τρέχουσα κατάσταση και μια συνάρτηση setter. Σε αντίθεση με το this.setState στα classes, το useState αντικαθιστά πλήρως την τιμή, χωρίς να τη συγχωνεύει με την προηγούμενη.

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

Hooks σε λειτουργικά components

Τα hooks αποτελούν τη βάση του σύγχρονου React. Κάθε hook λύνει μια συγκεκριμένη εργασία: useState — κατάσταση, useEffect — παρενέργειες, useContext — πρόσβαση σε περιβάλλον, useRef — αναφορές σε στοιχεία DOM, useCallback και useMemo — memoization.

useEffect για παρενέργειες

Το useEffect αντικαθιστά ταυτόχρονα τα componentDidMount, componentDidUpdate και componentWillUnmount. Το πρώτο όρισμα — callback με το αποτέλεσμα, το δεύτερο — πίνακας εξαρτήσεων. Αν ο πίνακας είναι κενός, το αποτέλεσμα εκτελείται μία φορά μετά την τοποθέτηση. Αν οι εξαρτήσεις καθορίζονται — σε κάθε αλλαγή οποιασδήποτε από αυτές.

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

Προσαρμοσμένα hooks

Το κύριο πλεονέκτημα των λειτουργικών components — επαναχρησιμοποίηση λογικής μέσω προσαρμοσμένων hooks. Αν σε ένα class-based component η λογική αντιγραφόταν μεταξύ componentDidMount και componentDidUpdate, σε ένα λειτουργικό component εξάγεται σε ξεχωριστή συνάρτηση με πρόθεμα use. Τα προσαρμοσμένα hooks είναι η κύρια εναλλακτική για HOC και render props.

Σύνθεση αντί κληρονομικότητας

Το React συνιστά σύνθεση, όχι κληρονομικότητα, για την επαναχρησιμοποίηση κώδικα μεταξύ components. Τα λειτουργικά components είναι ιδανικά για σύνθεση: ένα component μπορεί να περιέχει πολλά άλλα, μεταφέροντάς τους props και children.

Το μοτίβο children — όταν το component δέχεται θυγατρικά στοιχεία μέσω του prop children — υλοποιείται φυσικά: function Layout({ children }). Το ανάλογο των slots από το Vue υλοποιείται μέσω ονομασμένων props-components: function Page({ header, sidebar, content }).

Η κληρονομικότητα στο React πρακτικά δεν χρησιμοποιείται. Ακόμη και τα class-based components, που τεχνικά υποστηρίζουν extends, σπάνια σχηματίζουν ιεραρχίες βαθύτερες από ένα επίπεδο. Τα λειτουργικά components με σύνθεση καλύπτουν πλήρως τις ανάγκες επαναχρησιμοποίησης κώδικα χωρίς κληρονομικότητα.

Βελτιστοποίηση απόδοσης

Τα λειτουργικά components διαθέτουν ενσωματωμένους μηχανισμούς βελτιστοποίησης. React.memo — το αντίστοιχο του PureComponent για συναρτήσεις: αποτρέπει την επαναπόδοση αν τα props δεν έχουν αλλάξει (επιφανειακή σύγκριση). useMemo αποθηκεύει προσωρινά το αποτέλεσμα υπολογισμών μεταξύ αποδόσεων.

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 κάνει memoize σε συναρτήσεις callback ώστε να μην δημιουργούνται ξανά σε κάθε απόδοση. Αυτό είναι κρίσιμο κατά τη μεταφορά συναρτήσεων σε θυγατρικά components τυλιγμένα σε React.memo: χωρίς useCallback, το θυγατρικό component θα επαναποδίδεται κάθε φορά, επειδή η αναφορά στη συνάρτηση αλλάζει.

Σύγκριση λειτουργικών και class-based components

Η διαφορά μεταξύ των προσεγγίσεων υπερβαίνει τη σύνταξη. Λειτουργικά components — είναι ένα closure: η κατάσταση και τα αποτελέσματα είναι δεσμευμένα σε μια συγκεκριμένη απόδοση. Class-based components — είναι this: η κατάσταση λαμβάνεται πάντα από το this.state, το οποίο μπορεί να είναι ξεπερασμένο τη στιγμή εκτέλεσης ενός ασύγχρονου callback.

Τα λειτουργικά components παρέχουν γραμμική ροή εκτέλεσης. Σε ένα class-based component, η σχετική λογική είναι συχνά διασκορπισμένη σε πολλές μεθόδους κύκλου ζωής. Για παράδειγμα, η συνδρομή WebSocket ρυθμίζεται στο componentDidMount και αφαιρείται στο componentWillUnmount. Σε ένα λειτουργικό component, και οι δύο λειτουργίες — σε ένα useEffect με συνάρτηση καθαρισμού.

TypeScript και λειτουργικά components

Το TypeScript λειτουργεί πιο φυσικά με λειτουργικά components παρά με classes. Τύπος props — μια διεπαφή για το όρισμα της συνάρτησης. Ο τύπος της επιστρεφόμενης τιμής — JSX.Element ή ReactNode. Το useState εξάγει αυτόματα τον τύπο από την αρχική τιμή.

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 επιτρέπει την τύπωση του useReducer με διακριτικούς τύπους ένωσης, Generics σε προσαρμοσμένα hooks και αυστηρό έλεγχο των children μέσω React.PropsWithChildren. Τα λειτουργικά components με TypeScript παρέχουν πλήρη ασφάλεια τύπων χωρίς πρόσθετες αφαιρέσεις.