Функціональні компоненти в React — сучасний стандарт розробки

Що таке Functional Component?

Functional Component (функціональний компонент) — це React-компонент, визначений як функція, що приймає об'єкт props і повертає React-елемент. До React 16.8 такі компоненти називалися stateless (без стану), тому що вони не могли керувати внутрішнім станом.

З появою хуків у React 16.8 (лютий 2019) функціональні компоненти отримали доступ до стану (useState), побічних ефектів (useEffect), контексту (useContext) та рефів (useRef). Термін «stateless» застарів — сучасні функціональні компоненти повноцінно керують станом.

React офіційно рекомендує функціональні компоненти як основний спосіб створення компонентів. Вся документація на react.dev, приклади, туторіали та нові API (Server Components, Actions) побудовані на функціональному підході. Класові компоненти не видалені, але нові можливості React доступні лише через хуки.

Створення функціонального компонента

Найпростіший функціональний компонент — функція, що повертає JSX. Він приймає props як аргумент, не вимагає конструктора, виклику 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>
);

Компонент зі станом

Для додавання стану використовуйте useState. Хук повертає кортеж із двох значень: поточний стан і функція-сетер. На відміну від класового this.setState, 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>
  );
}

Хуки в функціональних компонентах

Хуки — основа сучасного React. Кожен хук вирішує конкретне завдання: useState — стан, useEffect — побічні ефекти, useContext — доступ до контексту, useRef — посилання на DOM-елементи, useCallback та useMemo — мемоізація.

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

Кастомні хуки

Головна перевага функціональних компонентів — повторне використання логіки через кастомні хуки. Якщо в класовому компоненті логіка дублювалася між componentDidMount та componentDidUpdate, у функціональному вона виноситься в окрему функцію з префіксом use. Кастомні хуки — основна альтернатива HOC та render props.

Композиція замість наслідування

React рекомендує композицію, а не наслідування для повторного використання коду між компонентами. Функціональні компоненти ідеально підходять для композиції: один компонент може містити кілька інших, передаючи їм props та children.

Паттерн children — коли компонент приймає дочірні елементи через проп children — реалізується природно: function Layout({ children }). Аналог slots із Vue реалізується через іменовані пропси-компоненти: function Page({ header, sidebar, content }).

Наслідування в React практично не використовується. Навіть класові компоненти, які технічно підтримують extends, рідко утворюють ієрархії глибше одного рівня. Функціональні компоненти з композицією повністю покривають потреби у повторному використанні коду без наслідування.

Оптимізація продуктивності

Функціональні компоненти отримують вбудовані механізми оптимізації. 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 мемоізує функції-колбеки, щоб вони не створювалися заново при кожному рендері. Це критично при передачі функцій у дочірні компоненти, обгорнуті в React.memo: без useCallback дочірній компонент буде ререндеритися щоразу, тому що посилання на функцію змінюється.

Порівняння функціональних і класових компонентів

Різниця між підходами виходить за рамки синтаксису. Функціональні компоненти — це замикання: стан та ефекти прив'язані до конкретного рендеру. Класові компоненти — це this: стан завжди береться з this.state, який може бути застарілим на момент виконання асинхронного колбека.

Функціональні компоненти дають лінійний потік виконання. У класовому компоненті пов'язана логіка часто розмазана по кількох lifecycle-методах. Наприклад, підписка на WebSocket встановлюється в componentDidMount і видаляється в componentWillUnmount. У функціональному компоненті обидві операції — в одному useEffect з return-функцією очищення.

TypeScript і функціональні компоненти

TypeScript з функціональними компонентами працює природніше, ніж з класами. Типізація пропсів — інтерфейс для аргументу функції. Тип значення, що повертається — 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 з дискримінованими union-типами, Generics у кастомних хуках і строгу перевірку children через React.PropsWithChildren. Функціональні компоненти з TypeScript дають повну безпеку типів без додаткових абстракцій.