Що таке React простими словами: JSX, props і хуки

React (його ще називають React.js або ReactJS) — безкоштовна JavaScript-бібліотека з відкритим кодом для створення інтерфейсів: сторінок сайтів, вебзастосунків, а разом із React Native — і мобільних застосунків. Інтерфейс у React збирають з окремих блоків-компонентів, а бібліотека сама оновлює екран, коли змінюються дані.

Станом на жовтень 2026 року актуальна гілка — React 19.3: вона вийшла 9 вересня 2026 року, а 14 жовтня з’явилося виправлення 19.3.1. Бібліотеку створили у Facebook (нині Meta); перший публічний коміт датовано 29 травня 2013 року, а код поширюється за ліцензією MIT. З 24 лютого 2026 року React, React Native і JSX належать уже не Meta, а незалежній React Foundation під егідою Linux Foundation.

React простими словами: навіщо він потрібен

Перша ідея React — компоненти. Найпростіше уявити його як конструктор: кнопка, картка товару, поле пошуку, шапка сайту — окремі деталі. Кожну описують один раз, а потім збирають із них сторінки, як із цеглинок.

Друга ідея — декларативність. На чистому JavaScript розробник сам шукає елемент на сторінці й змінює його після кожної дії користувача, а коли таких дій десятки, код заплутується. У React достатньо описати, що має бути на екрані за поточних даних, а узгодити з цим сторінку бібліотека бере на себе.

React відповідає саме за інтерфейс, тому його називають бібліотекою, а не фреймворком. Маршрутизацію, завантаження даних чи серверний рендеринг беруть з інших інструментів або з фреймворку на основі React. Новий проєкт офіційна документація радить починати саме з фреймворку: Next.js, React Router або Expo для мобільних застосунків. Новини веброзробки — у рубриці «Веб».

Що таке компонент у React

Компонент — окремий фрагмент інтерфейсу, що поєднує власну розмітку, логіку й оформлення. Технічно це звичайна функція JavaScript, що повертає розмітку. Розмір довільний: від однієї кнопки до цілої сторінки.

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

Далі компонент використовують як тег: <Greeting name="Олено" />. Назва компонента обов’язково починається з великої літери — так React відрізняє власні компоненти від HTML-тегів, які пишуть з малої. Одні компоненти вкладають в інші: картка товару містить зображення, заголовок і кнопку. Так утворюється дерево батьківських і дочірніх компонентів.

Дві поради з документації: не оголошуйте компонент усередині іншого, бо це, за словами посібника, сповільнює застосунок і породжує помилки, і пишіть компоненти як функції. Класові React досі підтримує, вони трапляються в старому коді, але команда рекомендує функції.

Що таке JSX у React

JSX — спосіб записувати розмітку прямо в JavaScript-коді. Зовні він нагадує HTML, але є розширенням синтаксису JavaScript. Браузер JSX напряму не виконує: під час збирання проєкту інструменти на кшталт Vite перетворюють його на звичайний JavaScript. Формально JSX і React незалежні: їх можна використовувати й окремо.

JSX суворіший за HTML. Основні правила з документації:

компонент повертає один кореневий елемент; якщо зайва обгортка не потрібна, елементи групують фрагментом <>…</>;
усі теги закривають, зокрема одиночні: <img />, <br />;
більшість атрибутів пишуть у camelCase, а замість class — className;
у фігурні дужки {} вставляють будь-який вираз JavaScript: змінну, обчислення, виклик функції.

Що таке props у React

Props (пропси, скорочення від properties — «властивості») — дані, які батьківський компонент передає дочірньому. Записують їх так само, як атрибути HTML, проте значенням може бути що завгодно з JavaScript: рядок, число, об’єкт, масив чи функція.

Компонент отримує props як єдиний аргумент-об’єкт і зазвичай одразу розбирає його на змінні: function Avatar({ name, size = 100 }). Тут 100 — резервне значення на випадок, якщо size не передали.

Головне правило: props призначені тільки для читання. Якщо дані мають змінитися, батьківський компонент передає нові props, а власні змінні дані компонент зберігає у state. Окремий випадок — prop children: у нього потрапляє все, що вкладено між тегами компонента, наприклад <Card>…</Card>; на цьому будують обгортки на зразок панелей.

Props і state: у чому різниця

Props надходять ззовні, від батьківського компонента, приблизно як аргументи у функцію, і визначають, яким буде дочірній компонент.
State (стан) — «пам’ять» самого компонента: що введено в поле, яке фото показує галерея, що лежить у кошику. Компонент змінює стан сам, і після кожної зміни React рендерить його заново.

Стан належить конкретному екземпляру: два однакові лічильники на сторінці рахують кліки незалежно. Часто батьківський компонент тримає дані у своєму стані й передає їх дітям як props. Якщо двом компонентам потрібні спільні дані, стан переносять у їхній найближчий спільний батьківський компонент — у документації це називають lifting state up, «підняття стану».

Що таке хуки в React

Хуки (англ. hooks, «гачки») — функції з префіксом use у назві, через які компонент підключається до можливостей React: стану, ефектів, контексту. Хуки стали стабільними в React 16.8 у лютому 2019 року, і відтоді для стану та ефектів не потрібні класи.

useState: пам’ять компонента

useState повертає пару: поточне значення і функцію для його зміни. Класичний приклад — лічильник кліків:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Кліків: {count}
    </button>
  );
}

Нуль тут — початкове значення. Чому не обійтися звичайною змінною let count = 0? Під час кожного рендеру React викликає функцію компонента заново, і локальна змінна щоразу починається з нуля, а її зміна ще й не підказує React, що екран треба оновити. Функція setCount розв’язує обидві проблеми.

useEffect: зв’язок із зовнішнім світом

useEffect потрібен, коли компонент має узгоджувати свою роботу з чимось поза React: таймером, подіями браузера, з’єднанням із сервером, стороннім віджетом. Код ефекту виконується після того, як React оновив екран. Другий аргумент — масив залежностей: ефект перезапускається, лише коли змінилося одне з його значень. Порожній масив означає «виконати, коли компонент з’явився на екрані», а без масиву ефект спрацьовує після кожного оновлення.

const [seconds, setSeconds] = useState(0);

useEffect(() => {
const id = setInterval(() => setSeconds(s => s + 1), 1000);
return () => clearInterval(id);
}, []);

Функція, яку повертає ефект, — функція очищення (cleanup). React викликає її перед кожним повторним запуском ефекту і востаннє, коли компонент зникає з екрана. У режимі розробки зі Strict Mode React навмисно монтує компонент удруге, щоб виявити ефекти без очищення, тож повідомлення в консолі може з’явитися двічі. А якщо ефект лише обчислює один стан з іншого, він, за словами документації, найімовірніше, зайвий.

Правила хуків

Хуки викликають лише на верхньому рівні компонента або власного хука — не в умовах, циклах, вкладених функціях, обробниках подій і не після умовного return.
Хуки викликають лише з компонентів React або інших хуків, а не зі звичайних функцій JavaScript.

React розрізняє хуки за порядком виклику, тому під час кожного рендеру він має бути однаковим. Більшість порушень правил хуків ловить лінтер eslint-plugin-react-hooks. Повторювану логіку виносять у власний хук — функцію з назвою на use, усередині якої викликають інші хуки.

Віртуальний DOM: як React оновлює сторінку

DOM — це модель сторінки в браузері, дерево всіх її елементів. В архівній документації React віртуальний DOM описано як підхід, за якого «ідеальне» представлення інтерфейсу тримають у пам’яті й синхронізують зі справжнім DOM. Цей процес називають reconciliation, тобто узгодженням.

Нова документація пояснює те саме через три кроки:

Тригер — привід для рендеру: перший показ компонента або зміна стану.
Рендер — React викликає компоненти й з’ясовує, що має бути на екрані.
Коміт — React вносить у DOM лише мінімально потрібні зміни, а якщо результат не змінився, сторінку не чіпає.

Частину оптимізацій раніше робили вручну через useMemo, useCallback і React.memo. З жовтня 2025 року є стабільний React Compiler 1.0: під час збирання він автоматично мемоізує компоненти й хуки, тобто кешує результати обчислень. Компілятор працює і з React, і з React Native.

React і React Native: у чому різниця

У браузері React через пакет react-dom перетворює компоненти на елементи сторінки. React Native переносить той самий підхід на Android та iOS: це відкритий фреймворк, де так само працюють компоненти, JSX, props, state і хуки. Тільки замість <div> і <p> там базові компоненти View, Text та Image, які в застосунку стають нативними елементами інтерфейсу платформи.

Meta випустила React Native у 2015 році, а тепер він, як і React, належить React Foundation. Для нового мобільного проєкту офіційний сайт радить фреймворк Expo. Новини мобільної розробки — у рубриці «Мобайл».

Наскільки React популярний

У Stack Overflow Developer Survey 2026 React назвали 41,5% із 10 281 учасника, що відповіли на запитання, з якими вебфреймворками та вебтехнологіями вони активно працювали протягом року. Вище лише Node.js (46,4%), у Vue.js — 17,2%, в Angular — 16%. Зарплати українських розробників на JavaScript, TypeScript та інших мовах — в огляді за даними DOU.

З чого почати вивчати React

База. HTML, CSS і сучасний JavaScript: функції, деструктуризація, методи масивів map і filter, модулі import/export. Без цього розібратися з React буде важко.
Офіційний посібник. Сторінка Quick Start на react.dev/learn, за словами авторів, охоплює близько 80% понять, потрібних щодня. Далі — туторіал із грою в хрестики-нулики, розрахований на тих, хто ще не знає React.
Українська версія. Переклад документації від спільноти — на uk.react.dev; він входить до списку перекладів документації, які підтримує спільнота.
Перший проєкт. Створіть його у фреймворку або за допомогою інструмента збирання Vite. Create React App брати не варто: React-команда оголосила його застарілим 14 лютого 2025 року.
Дані з сервера. Далі варто навчитися отримувати дані через API — що це таке, ми пояснили в матеріалі про API простими словами.

Часті питання

React — це бібліотека чи фреймворк?

Офіційно React — бібліотека: він відповідає за інтерфейс, а маршрутизацію, завантаження даних і серверний рендеринг дають фреймворки на його основі, як-от Next.js чи React Router. Бібліотека безкоштовна й поширюється за ліцензією MIT.

Чим props відрізняються від state?

Props компонент отримує від батьківського компонента і змінювати їх не може. State — це його власні дані, які він змінює сам, наприклад через useState, і після кожної зміни React оновлює екран.

Що таке React Native?

Це фреймворк для мобільних застосунків Android та iOS, побудований на React. Компоненти пишуть на JavaScript, а на екрані вони стають нативними елементами платформи.

Чи потрібно знати JavaScript перед React?

Так: компоненти React — це функції JavaScript, тож спершу варто освоїти функції, масиви, об’єкти й модулі, а вже потім JSX і хуки.

Яка остання версія React?

Станом на жовтень 2026 року — React 19.3.1, яка вийшла 14 жовтня 2026 року. Мінорний реліз 19.3 з’явився 9 вересня 2026 року.

Що таке React простими словами: компоненти, JSX, props і хуки