Які типи компонентів існують?

ReactJunior~2 хв читання

1. Функціональні компоненти (Function Components) - сучасний стандарт

Це звичайні JavaScript-функції, які приймають props і повертають JSX (опис інтерфейсу).

javascript

function Greeting({ name }) {
  return <h1>Привіт, {name}!</h1>;
}

Використання:

javascript

<Greeting name="Тім" />

Особливості:

прості, читабельні, перевикористовувані;
можуть використовувати хуки (useState, useEffect, useContext і т. д.);
не мають власного життєвого циклу, як класи - замість цього логіка реалізується через хуки.

2. Класові компоненти (Class Components) - старий формат (до React 16.8)

Це ES6-класи, які успадковуються від React.Component.

javascript

class Greeting extends React.Component {
  render() {
    return <h1>Привіт, {this.props.name}!</h1>;
  }
}

Особливості:

мають методи життєвого циклу (componentDidMount, componentDidUpdate, componentWillUnmount і т.д.);
використовують this.state і this.setState() для роботи зі станом;
сьогодні застосовуються дедалі рідше - їх замінили функціональні компоненти з хуками.

3. Компоненти вищого порядку (Higher-Order Components, HOC)

Це функції, які приймають компонент і повертають новий компонент (тобто "обгортають" його додатковою логікою).

javascript

function withLogger(Component) {
  return function Wrapped(props) {
    console.log('Рендериться:', Component.name);
    return <Component {...props} />;
  };
}

Використання:

javascript

const EnhancedGreeting = withLogger(Greeting);

Застосовуються для:

повторного використання логіки (наприклад, авторизація, логування, кешування);
роботи зі сторонніми бібліотеками (Redux connect - це HOC).

Сьогодні HOC поступово замінюються хуками і композиціями компонентів.

4. Контейнерні та презентаційні компоненти (патерн розділення)

Це архітектурний підхід, а не різні типи "за кодом".

Презентаційний (UI) компонент
відповідає тільки за відображення (розмітку і стилі):

javascript
const UserCard = ({ name, age }) => ( <div className="card"> <h2>{name}</h2> <p>{age} років</p> </div> );
Контейнерний компонент
керує станом, логікою, запитами і передає дані вниз:

javascript
function UserContainer() { const [user, setUser] = useState({ name: "Тім", age: 25 }); return <UserCard name={user.name} age={user.age} />; }

Це розділення допомагає:

писати більш "чисті" і перевикористовувані UI-компоненти;
тестувати логіку окремо від представлення.

5. Контрольовані і неконтрольовані компоненти (форми)

Стосуються елементів форм (input, select, textarea).

Контрольований компонент - React повністю керує його значенням через state:

javascript
const [value, setValue] = useState(""); return <input value={value} onChange={e => setValue(e.target.value)} />;
Неконтрольований компонент - значення зберігається в DOM, і React отримує його через ref:

javascript
const inputRef = useRef(); const handleSubmit = () => console.log(inputRef.current.value); return <input ref={inputRef} />;

6. Pure Components (чисті компоненти)

Це компоненти, які перемальовуються тільки при реальній зміні props або state.

У функціональній формі:

javascript

const Greeting = React.memo(({ name }) => <h1>Привіт, {name}</h1>);

У класовій формі:

javascript

class Greeting extends React.PureComponent {
  render() {
    return <h1>Привіт, {this.props.name}</h1>;
  }
}

Допомагають уникати зайвих ререндерів і підвищують продуктивність.

7. Error Boundary (компоненти-перехоплювачі помилок)

Це спеціальні класові компоненти, які ловлять помилки в дочірніх компонентах, щоб не "падав" весь застосунок.

javascript

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  componentDidCatch(error, info) {
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) return <h2>Щось пішло не так</h2>;
    return this.props.children;
  }
}

Підсумок

Тип компонента	Що робить	Приклад
Функціональний	Повертає JSX через функцію	`function Hello()`
Класовий	Використовує `this.state`, життєві цикли	`class Hello extends React.Component`
HOC	Приймає компонент і повертає новий	`withLogger(Component)`
Контейнерний / Презентаційний	Розділення логіки і UI	`UserContainer / UserCard`
Контрольований / Неконтрольований	Керування вводом даних	`<input value={...} />`
Pure / React.memo	Оптимізований, не перемальовується даремно	`React.memo()`
Error Boundary	Ловить помилки дочірніх компонентів	`componentDidCatch`

Коротко:

У React всі компоненти поділяються по суті на функціональні і класові, а решта типів - це патерни або розширення цих базових форм (наприклад, HOC, контейнерні, чисті і т.д.).

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.