У чому різниця між функціональними та класовими компонентами?

Повне пояснення

Що це і навіщо

• Функціональні компоненти (FC) – це прості функції, що повертають JSX. Вони легкі, читаються швидко і підтримують хуки (useState, useEffect тощо).
• Класові компоненти – це ES6‑класи, що розширюють React.Component. Вони мають власний стан (this.state) і життєвий цикл через методи componentDidMount, render тощо.

Ключові принципи/терміни

• Hooks – функції, що дозволяють використовувати state і side‑effects у FC.
• Lifecycle methods – componentDidMount, shouldComponentUpdate тощо, доступні лише у класах.
• Pure function – FC не мають внутрішнього стану (крім хуків) і не зберігають контекст.

Як це працює

• FC: function Header(props) { return <h1>{props.title}</h1>; }.
• Клас: class Header extends React.Component { render() { return <h1>{this.props.title}</h1>; } }.

Практика і реалізація

• FC з хуком: const [count, setCount] = useState(0);.
• Клас: this.state = { count: 0 }; this.setState({ count: this.state.count + 1 });.

Тестування

• FC: render(<Header title="Test" />).
• Клас: mount(<Header title="Test" />) (Enzyme) або render у React Testing Library.

Особливості в контексті React

• FC підтримують React.memo для мемоізації.
• Класові компоненти не можуть бути обгорнуті React.memo безпосередньо.

Оптимізація, типові помилки та edge cases

• Не використовувати this у FC.
• У класах слід уникати анонімних функцій у render, щоб не створювати нові інстанси.
• При переході з класу на FC варто перевірити, чи не використовується this.context без відповідного контексту.

Диагностика і отладка

• Якщо компонент не оновлюється, перевірте shouldComponentUpdate у класі або React.memo у FC.
• Для хуків перевірте, чи правильно вказані залежності у useEffect.

Альтернативи

• Для старих кодових баз можна залишити класові компоненти, але нові проекти рекомендують FC з хуками.

Крайні випадки і часті помилки

1. Використання this.state у FC → TypeError.
2. Забудьте вказати залежності у useEffect → нескінченний цикл.
3. Перевантаження render у класі → низька продуктивність.
4. Не мемоізований колбек у FC → зайві перерендери.
5. Відсутність key у списку → React‑warning.
6. Використання класу без розширення React.Component → SyntaxError.
7. Неправильне використання this.props.children у класі → пропущені елементи.
8. Зміна стану через this.state = у класі → не оновлюється UI.

Cheatsheet + follow‑up питання

• FC: function Comp(props) { return <div>{props.text}</div>; }.
• Клас: class Comp extends React.Component { render() { return <div>{this.props.text}</div>; } }.
• Follow‑up: Як перевести класовий компонент у функціональний з хуками?