React

React на одному екрані: кожен хук і для чого він

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

Описуйте, а не наказуйте: рендер і коміт

До React фронтенд-код здебільшого давав інструкції: знайди цей вузол, задай йому текст, додай клас, прибери той рядок. Кожна інструкція потребувала парної, що її скасовує, і кількість пар росла швидше за кількість фіч — тому старі фронтенд-бази й ламалися в місцях, яких ніхто не чіпав. React це перевертає. Ви пишете функцію, яка за поточним станом повертає опис інтерфейсу, а React з’ясовує, які операції над DOMDOMDocument Object Model — сторінка як дерево обʼєктівДерево обʼєктів, на яке браузер перетворює HTML-сторінку, щоб код міг її читати і змінювати. Змінили DOM — читач одразу бачить зміну; сам HTML-файл, який надіслав сервер, лишається таким, як був.Докладніше в статті →Усі терміни потрібні, щоб його досягти. Ви ніколи не прибираєте рядок; ви описуєте список, у якому його вже немає. Правильним має бути один опис, а не набір переходів між станами, що лише росте.

Схема ділить роботу на дві фази, і цей поділ — найнесучіша ідея цієї сторінки. Фаза рендеру викликає ваші компоненти, щоб отримати опис. Вона має бути чистою — ті самі входи дають той самий результат, і ніщо поза функцією не змінюється, — бо React може виконати її двічі, призупинити на півдорозі або викинути результат. Фаза коміту застосовує різницю до справжнього DOM, один раз. Ефекти виконуються після коміту, коли сторінка вже актуальна.

Коли компонент перерендерюється

Чотири причини з верху сторінки на практиці дають одну картину. Коли в компоненті змінюється стан, рендериться цей компонент і все під ним, аж до самого низу, — хай діти отримують щось змінене чи ні. Нічого над ним не рендериться. Це свідоме налаштування за замовчуванням: викликати функцію й порівняти результат дешево, а перерендер — це не оновлення DOM. Дорогим він стає лише тоді, коли піддерево велике або якийсь компонент у ньому під час рендеру робить важку роботу.

Діаграма показує три виходи, і їх варто пробувати в такому порядку, бо перші два безкоштовні, а третій має ціну. Перший — опустіть стан нижче: якщо значення цікавить лише одне невелике піддерево, тримайте стан там, і решта сторінки перестане рендеритися. Другий — передавайте шматки екрана через children: елемент, створений батьком, який не перерендерювався, — той самий елемент, що й минулого разу, і React його пропускає. Лише тоді беріть memo, useMemo і useCallback. Кожен додає порівняння до кожного рендеру, і кожен окупається лише тоді, коли пропущена робота справді більша за це порівняння.

З жовтня 2025 року існує четвертий варіант, що змінює арифметику. React Compiler 1.0 — це крок збірки, який читає ваші компоненти й сам вставляє мемоїзацію, точніше, ніж її пишуть руками, — він уміє мемоїзувати після раннього return, чого не може написаний вручну useMemo. У Meta він пришвидшив перше завантаження й переходи в Quest Store до 12%, а деякі взаємодії — більш ніж у два з половиною рази. Умова одна: ваш код має дотримуватися правил React, і передусім чистоти рендеру. Компонент, що їх порушує, компілятор не лагодить — він його пропускає, а його правила лінтера кажуть, де саме.

Ключі — це тотожність, а не прикраса

Усередині теми продуктивності ховається одне правило коректності. Рендерячи список, React за key кожного пункту вирішує, який елемент цього рендеру — той самий, що й котрий елемент минулого, а стан, фокус і напівнабраний у полі текст належать саме цій тотожності. Використати індекс масиву як ключ — означає сказати React, що «пункт на позиції два — той самий пункт, що й раніше», а це перестає бути правдою тієї миті, коли список відсортували або прибрали пункт із середини. Видимий результат — текстове поле чи прапорець, що лишається на місці, поки дані рухаються під ним. Беріть стабільний id з даних.

Стан: знімок, черга і одне джерело правди

Усередині одного рендеру стан не змінюється. count — константа на весь цей виклик вашої функції, і виклик setCount її не чіпає: він ставить оновлення в чергу й просить React про ще один рендер. Ось чому три виклики setCount(count + 1) за один клік лишають лічильник на одиниці, а не на трьох: кожен прочитав той самий count, що дорівнював нулю, і кожен попросив одиницю. Якщо передати функцію, setCount(c => c + 1), у черзі стануть три кроки, і кожен отримає результат попереднього.

З React 18 черга ще й групується всюди: усі оновлення, зроблені під час однієї події, — в обробнику, у таймауті чи після await — застосовуються одним рендером, а не кожне своїм. І значення з черги спричиняє рендер, лише якщо React вважає його іншим, а перевіряє він це через Object.is: те саме посилання вважається незміненим. Тож push у масив, що вже лежить у стані, чи зміна поля об’єкта, що вже лежить у стані, дає React ту саму адресу, і на екрані нічого не відбувається. Сторінка про JavaScript малює, що насправді копіює копія; для стану створюйте новий об’єкт для кожного рівня, який змінюєте.

Друга половина проєктування стану — що взагалі заслуговує бути станом. Усе, що можна обчислити з наявного стану чи пропсів під час рендеру, треба обчислювати, а не зберігати. fullName, що лежить у стані поряд із firstName і lastName, — це третє значення, здатне розійтися з двома іншими, і рано чи пізно воно розійдеться. Перевірка пряма: якщо два шматки стану можуть суперечити один одному, один із них похідний і має бути видалений. Команда чату Facebook вивчила це на власному досвіді й розповіла про нього 2014 року: лічильник непрочитаних показував повідомлення, яких ніхто не надсилав, — перший кейс нижче.

Ефекти синхронізують із зовнішнім світом

useEffect існує, щоб тримати компонент у згоді з чимось поза React: підпискою, браузерним APIAPIApplication Programming Interface — контракт між програмамиПравила, за якими одна програма звертається до іншої: які запити можна надіслати, у якому вигляді й що прийде у відповідь. Для того, хто звертається, це контракт — усе, що за ним, лишається чорною скринькою, і саме тому другий бік можна переписати, не зламавши вас.Докладніше в статті →Усі терміни, бібліотекою графіків, що володіє власним вузлом DOM, таймером. Це вся його робота. Власна документація React має сторінку «Можливо, ефект вам не потрібен», і це чимало говорить про те, як часто до нього тягнуться за замовчуванням. Більшості ефектів у типовій кодовій базі місце в одному з варіантів праворуч у цій таблиці.

Коли ефект доречний, дві його частини потребують уваги. Перша — масив залежностей, список значень, зміна будь-якого з яких перезапускає ефект. React порівнює кожен елемент через Object.is, тож об’єкт чи функція, створені під час рендеру, щоразу є новим значенням, і ефект, що від них залежить, виконується після кожного рендеру. На екрані, що рендериться часто, ефект, який викликає API, стає циклом, що викликає його безупинно. Саме це поклало дашборд Cloudflare у вересні 2025 року. Залежте від примітивних значень — id, а не об’єкта, що його містить, — або тримайте об’єкт стабільним через useMemo.

Друга — функція очищення, і вона не є необов’язковою. Вона виконується перед повторним запуском ефекту й тоді, коли компонент зникає, і саме в ній ви відписуєтеся, чистите таймер і скасовуєте запит. Ефект, що підписується без відписки, лишає по слухачу на кожному запуску — у розробці цього не видно, і саме через це вкладка повільна за двадцять хвилин. Ефект, що завантажує дані без очищення, має стан перегонів, якого ваша машина розробника майже ніколи не показує:

Де React виконується тепер: фреймворки й серверні компоненти

Більшу частину свого життя React був тим, що ви налаштовували самі, а Create React App був стандартним способом почати. У лютому 2025 року команда React відправила його на пенсію й почала радити фреймворки — Next.js, React Router, Expo для мобільних — або простий інструмент збірки на кшталт ViteViteінструмент збірки фронтендуІнструмент збірки й сервер розробки для фронтенд-коду, який 2020 року почав автор Vue і яким тепер користуються з більшістю фреймворків. У розробці він віддає браузеру ваші вихідні файли майже як є, тож стартує миттєво; для продакшену — збирає їх у бандли й мініфікує.Усі терміни для тих, хто хоче скласти решту сам. React досі бібліотека, і це реальний компроміс, а не гасло: маршрутизація, завантаження даних, форми й збірка — це рішення, які ви ухвалюєте й потім несете, і дві React-бази в одній компанії можуть не мати майже жодної спільної конвенції. Фреймворк ухвалює ці рішення за вас і приносить із собою ще одне: частина ваших компонентів тепер виконується на сервері.

Виграш від серверних компонентів — здебільшого аргумент про розмір бандла. Бібліотека форматування дат, що використовується лише на сервері, не коштує користувачеві нічого, а завантаження даних переїжджає впритул до компонента, якому вони потрібні, без окремого API посередині. Межа, яку треба тримати: усе інтерактивне — onClick, стан, ефект — живе в клієнтському компоненті, тож корисна форма — серверне дерево з малими клієнтськими листками. Саме такої форми збудована ця енциклопедія: кожну статтю, яку ви тут читаєте, рендерять серверні компоненти, а клієнтськими є лише малі листки — меню, пошук, зміст і заголовки таблиць, що лишаються на місці під час прокрутки.

Виконання на сервері має й другу ціну: тепер на сервері працює код React, що перетворює запит назад на дані, а в цьому коді, як і в будь-якому, бувають баги. У грудні 2025 року в ньому знайшли баг з оцінкою 10 із 10 — React2Shell, п’ятий кейс нижче. А ще є шов, де дві половини сходяться. HTML, який надсилає сервер, має збігатися з тим, що відрендерить браузер, коли React перебере сторінку, — цей крок зветься гідратацією; усе, що відрізняється між ними, — поточний час, випадкове число, часовий пояс відвідувача, — дає попередження про розбіжність або мерехтіння. Ставте такі значення в ефект або, починаючи з 19.3, за browser(), щоб сервер їх не вгадував.

П’ять кейсів і те, чого в кожному бракувало

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

Перший кейс — звідки взагалі походить спосіб, яким React думає про стан. Чат Facebook показував кількість непрочитаних повідомлень у кількох місцях сторінки, і кожне з цих подань тримало й оновлювало власне уявлення про те, що не прочитано. Лічильник раз у раз показував повідомлення, яких не існувало. Інженери його лагодили, і він повертався з наступною фічею, що чіпала чат, бо будь-яке подання могло оновити будь-яке інше, і ніхто не міг утримати в голові всі шляхи. Джинг Чен показала відповідь на F8 у 2014 році: дані течуть в одному напрямку, від єдиного сховища до кожного подання, а подання змінює дані лише тим, що надсилає дію назад на початок. Це Flux, і це те саме правило, що й «якщо два шматки стану можуть суперечити один одному, один із них похідний».

Другий нагадує, що бібліотека — це ще й юридична угода. React публікували під ліцензією BSD із додатковим пунктом про патенти: дозвіл припинявся для кожного, хто подавав на Facebook патентний позов. У липні 2017 року Apache Software Foundation внесла цю ліцензію до списку тих, від яких її проєкти не можуть залежати, а у вересні Метт Малленвеґ оголосив, що WordPress переведе свій новий редактор із React. 22 вересня Facebook переліцензував React під MIT, і за чотири дні під нею вийшов React 16. Код не змінився зовсім. Бракувало ліцензії, яку могли б затвердити юристи компаній, що ним користувалися.

Де він вироджується

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

• Похідні значення, збережені у стані, здатні розійтися з тим, з чого їх вивели.
• Ефекти для синхронізації двох шматків стану — обчислення, зроблене на кадр пізніше.
• Об’єкт чи функція в масиві залежностей — і ефект виконується після кожного рендеру.
• Завантаження в голому ефекті без очищення дає перегони й витоки.
• Індекс масиву як ключ чіпляє стан і фокус не до того рядка після переупорядкування.
• Мемоїзація всього за замовчуванням додає порівняння до кожного рендеру й ховає справжню ціну.
• Зміна стану на місці: React бачить те саме посилання й пропускає оновлення.
• Усе в одному глобальному сховищі перетворює кожну зміну на подію рівня застосунку.
• Серверні функції, написані так, ніби їх можуть викликати лише ваші власні кнопки.

Є й чесна межа, і вона вбудована в однорядкову модель нагорі сторінки. React гарантує, що екран відповідає стану. Він нічого не каже про те, чи правильний стан, чи відповіла мережа і чи можна користуватися тим, що на екрані. <div onClick>, відрендерений найкраще впорядкованим деревом компонентів у світі, однаково невидимий для клавіатури й зчитувача екрана, — про це з іншого боку розповідає сторінка про HTML і CSS. І бібліотека не може зробити сторінку легкою: кожен клієнтський компонент — це JavaScript, який телефон мусить завантажити, розібрати й виконати, перш ніж запрацює перший клік.

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

Коли це застосовувати

Пов’язані сторінки

• РозробкаVueVue — фреймворк JavaScript для побудови інтерфейсів, чия система реактивності оновлює рівно ті частини екрана, що читають значення, коли воно змінюється. Ви ніколи не оголошуєте залежностей; натомість майже кожен баг у Vue, що не є друкарською помилкою, — це значення, яке тихо вийшло з реактивної системи: його скопіювали, розклали чи замінили. Сторінка починається з усього Composition API на одному екрані; далі — відстеження й вісім способів, якими значення перестає оновлюватися, computed проти watch, шаблони й компілятор, composables, перехід із Vue 2 на Vue 3 і п’ять задокументованих кейсів.
• РозробкаJavaScriptJavaScript — мова програмування, яку виконує кожен браузер: один потік на сторінку, один стек викликів і черга для всього, що мусить чекати. Більшість того, що здається в ній довільним, випливає з цієї моделі або з рішення перших років мови, яке веб уже не може скасувати. Сторінка починається з дванадцяти несподіванок — кожна з правилом, що за нею стоїть, і виправленням; далі — цикл подій, де асинхронний код губить час і помилки, числа й посилання, область видимості, модулі й дерево залежностей і п’ять задокументованих кейсів.
• РозробкаAngularAngular — фреймворк Google на TypeScript, що постачає весь фронтенд-стек і між мажорними версіями сам оновлює ваш код автоматичними міграціями. Цей стек — компоненти, впровадження залежностей, маршрутизація, форми, HTTP, тестування й збірка, обрані й випущені разом. Між 2022 і 2026 роками він замінив більшу частину того, як на ньому писали: standalone-компоненти замість NgModules, сигнали замість zone.js і OnPush за замовчуванням. Сторінка починається з кожного будівельного блоку на одному екрані — сучасний спосіб поруч із тим, який він замінив; далі — релізи й підтримка, впровадження залежностей, виявлення змін, сигнали й RxJS, форми й безпека та п’ять задокументованих кейсів.