Рэальны выкарыстоўванне Action-аўтаматаў у React 19: як выкарыстоўваць useActionState, use() і як Кампайлер гэтыя элементы знявае.
React 19 actions дапамагаюць паслабіць вялічыню коду: працоўнікі форм, оптымістычныя апдэйты, forwardRef і ручная мемаізацыя. Калі ж тады useActionState, use() і змены кампайляра?
Крыніцы: React 19 Shipped Nine Months Ago. Most Teams Are Still Writing Code It Made Obsolete.
Многі команды проста падвышылі номер версіі React і не чынілі нічога іншага. Флагі загрузкі, апрацоўка памылак і оптымістычныя абнаўленні, якія яны напісалі рокі тыму, яшчэ застаюцца ў базе коду, таму што апгрэйд ніколі іх не зламаў. Ён проста зробіў іх зайвымі. Цэга ўражэнне рукапіснага коду, які цяпер React 19 абрабатвае за вас.
Шаблон, які постаўляецца знову і знову
Адкройце практычна будзь-які компонент формы ў праекце на React 19, і вы пабачыце той самы структурны план. Існуе тры элементы стану: адны для показу статусу загрузкі, адны для памылак і адны для падтверджэння успеху. Ёсць асінхронны працоўнік для адправкі, які вызывае e.preventDefault(), увімкнюе статус загрузкі, чыстае старыя памылкі, чакае на адпаведны запыт, у try увімкнюе статус успеху, у catch копіюе паведамленне ў роздзіл з памылкамі, а ў finally выключае статус загрузкі.
Эты спосаб працы быў стандартны з тады, як React стаў популярным, і ён працуе. У React 19 ён таксама не патрэбны. Адны хук цяпер абавяўляецца обработкай запускаемых заданняў, памылак і рэзультатаў, укладаючы ў сябе таксама арранжаванне последовных запытанняў. Большасць команд нават не зазначыла гэтага, адколі апдэйт не вымагаў змян.
Што ў стабільнай версіі, а што — ні
Спачатку кароткая схема, таму што дзеякія статты опісваюць фічыры як вжываныя, калі ўсё ж такі яны яго не ўтрымліваюць.
Доступнае ў стабільнай версіі React 19.x:
- Дзеянні і хукі, пабудаваныя на іх:
useActionState,useFormStatusіuseOptimistic. - API
use()для чытання прамісаў і кантэкста пад час рэндара. refяк звычайны проп, што робіцьforwardRefзастарэлым.- Метаданыя аслівага дакумента: тагі
<title>,<meta>і<link>, які генеруюцца з компанентаў. - React Compiler, які досяг версіі 1.0 у жакста 2025 года і падтрымлівае версіі аж да React 17.
- Дадатковыя элементы з версіі 19.2, такія як
<Activity>іuseEffectEvent.
На момент напісання гэтага тэкста компанент <ViewTransition> і Fragment Refs яшчэ застаюцца канарскімі або експерыментальнымі: лічыце будзь-які код, які выкарыстоўвае іх, за застарэлы, і пераканаўцеся ў прыметках да выдання версіі, яку вы фактычна інсталюеце.
Actions: новая модэль для асінхроннага стану
Кансэпт React 19 — гэта Action, асінхронная функцыя, якая пасуецца пераходу. React берае на сябе ўсё, што з яй звязана: стан у чаканні, обработка адзінакоў, оптымістычныя абнаўленні і скасаванне форм, усе тыя рэчы, якія команды раней пісалі вручную.
useActionState, useFormStatus і useOptimistic — гэта не тры незв’язаныя функцыі. Гэта тры спосабы адбірання інфармацыі з таго ж механізма.
useActionState заменяе мадэль трох флагаў
Уместа тройкі загрузкі, адзінакоў і успеху вы пісваеце функцыю Action, якая прымеяе пярэдні стан і даны формы і вяртае наступны стан. Яе, разам з пачатковым станам, вы пасылаеце да useActionState. Гук вяртае тры рэчы: тэкушчы стан, функцыю для формы і логічную значэнне isPending.
Компанент тады выконвае тры простыя дзеянні. Атрыбут action формы прымее вярнутую функцыю безпосерэдна. Кнопка ўвімкнута толькі тады, калі isPending мае значэнне false. А будзь-яе паведамленне чытаецца з вярнутага статаусу. Не існуе статаусу завантажэння, статаусу адзінакоў, try, catch чы finally, preventDefault і няма можлівасці ручнага перазначэння.
Перадача функцыі ў action — гэта свядомы выбор. У HTML-формах завжды быў атрыбут action, і React 19 яго паўнасцю вярнуў. Гэта дапамагае адбываць поступовае паўнэйшае функцыонаванне, калі форма можа быць адправлена нават без JavaScript, а React паследні раз пасіліць ўсе функцыі, калі скрыпты будуць завантажаны.
useFormStatus дазволяе кнопцы знайоміцца з яе формай
Самым практычным спосабам выкарыстоўвання useFormStatus ёсць стварэнне кнопкі надсылкі, якая можа быць перызначаная. Унутры яе хук вяртае флаг pending, які опісвае родны форму, без перадачы якіх-лібо параметраў. Калі форма ў стане чакання, кнопка сама выключаецца, а ўсё ўсерэдзіне яе зменшваецца на ўтварэнне на кшталт „Зберагачыце“,. Дастатньва размясціць гэты компонент будзь-дзе ўнутрь будзь-якай формы, і ён працаваць будзе, чым усунулася неабходнасць праходжання па параметрах для дужа распашчастай задачы. Ёсць адна прыметка: хук чытае статус формы, якая абгортае компонент, таму яго неабходна выканаць унутры формы, а не па яе боку.
useOptimistic дапамагае кераваць мглевым адзывам
Оптымістычныя абнаўленні паказваюць корыстніку апэктыўны рэзультат адразу, яшчэ перш чым сервер яго падтвердзіць, і самі правяцца, калі запыт не выйдзе. Калі гэта робіцца вручную, неабходны тымчасовыя ID, аддзельны спіс пунктав, якія чакаюць апрацоўкі, логіка з’еднання даных і код для вярнення да поперадньго стану у разе памылкі. Лёгкаа ўтворыць тонкія памылкі.
За дапамогою useOptimistic вы даеце хуку рэальны спіс плюс невялікі рэдзюсер, які опісвае, як дадаць пункт з пазначкай «чакае». У функцыі дзеяння формы вы вызываеце функцыю-зберальнік, яку яна вяртае, а потым чакаеце на зберэжанне. Інтэрфейс адразу паказвае новы пункт, можа з зменшанай прозрачнасцю, пакуль ён чакае. Калі дзеяння завершыцца, рэальныя даныя заменяюць оптымістычную копію, а калі зберэжанне не выйдзе, React сама вяртаецца да поперадньага стану. Не трэба блока catch або ручнага вярнення.
use(): умовна чытанне рэсурсаў
use() — гэта новыя API, якае чытае рэсурс, такі як promise або кантэкст, пад час атрыбутавання. На адзінаку ад усіх іншых хуків, яго можна вызваць за адзінаковым выключнікам. Компонент можа чытаць даныя або корыстніка, ранае вярнуцца, калі дэталі супакаваны, і толькі пасля чаго чытаць настаўленні. Оберніце дрэво компонента ў межы Suspense з альтэрнатыўным варыянтом, і React будзе чакаць, пакуль не прыйдуць даныя.
Існуе адна важлівая абмежэнні. Promise-ы, якія пасылаюцца да use(), должны застацца стабільнымі праз усе атрыбутаванні, таму іх трэба ствараць за межамі компонента або выкарыстоўваць шар кэшавання, такі як React Query або SWR, або нават просты карточны мапа на рэвэлі ID. Promise, які перзначаецца на кожным атрыбутаванні, будзе прымусваць альтэрнатыўны варыянт застацца на экране вечна.
ref як проп
Эя змянэнне ўсё проста. Компаненты-функцыі цяпер прымоць ref як звычную проп, таму яе можна перадаць да асновнага элемента вводу без пакрыцця компанета forwardRef. Працэўнасць застаецца тая ж, толькі менш абгортакоў і менш імпортаў. Існуючы код з forwardRef продовжыць працаваць, адколі ўсуненне яго ўжываецца поступова і не спрычыняе бягучых проблем, але новыя компанеты не должны яго вжываць.
Кампайлер React
Кампайлер — гэта найболей тыхае з усіх апдэйтаў. Ён аналізуе компанеты пад час будовы і прыменяе мемаізацыю, якую команды зазвычай або рэалізуюць самостоятэльна, неадэкватна з useMemo, useCallback і React.memo, або вообшча не выкарыстоўваюць. Вы пішаце звычныя компанеты, а кампайлер правільна дадае функцыю кэшавання.
Ён працюе, калі запісаць плагін Babel babel-plugin-react-compiler і адагу яго ў спіс плагінаў у настройках Babel. Усёлькі ён таксама падтрымлівае React 17 і 18, можна яго застаўляць без паднятка версіі React, што дапамагае командам, якія не можуць падняць версію, але хочуць абавязковах перавагах у выдатнасці.
Увага па безпеці для серверных компанентаў
У пачатку 2026 года аднароджаныя паведамленні па безпеці, якія стосаваліся атак на адмову у службе і адкрыцці выканае коду, паўплывалі да пакетаў react-server-dom-*; для кожнай падтрымванай версіі былі аднароджаны патчы. Калі вы вжываеце React Server Components, пераканайцеся, што версія, якая у вас запісана, супарадніцца з актуальнымі паведамленнямі па безпеці, і выберыце патчаваную версію або новэйшую. Не пакладайцеся на памяць пра тое, якая версія ў безпеці.
Што робіць за гэты тыдзень
- Новыя формы: з самага пачатку выкорыстоўваюце
useActionState— задаеце дзеянне, перадаеце яго хуку і чытаецеisPendingз рэзультата, не выкарыстоўваючы жадных ручна створаных флагоў. - Ўжыстаючыя працоўнікі: не перапісвайце все заодно. Выберыце адны, пераканвертуйце яго ў Action і паглядзіце, як ён працуе. Прырост чытаемасці зазвычай настолькі явны, што дазволяе самам вызначыць прыорытэт міграцыі.
- Кампайляр: дадзіце яго ў вашу настройку кампілявання. Гэта невялікі змяненні, ён працуе з існуючым кодам і не трэба яго перапісваць, што робіць яго найпростым спосабам адпаведнага пераходу да React 19 з найшырэйшым эфектам.
- Компаненты сервера: пераканайцеся, што ваша версія адпаведна ўсім патчам па безпеке.
Загальныя тытлы пры выходзе прыклікалі ўвагу. Але справжнія змяны — у самай сутнасці: дзеяння як стандартны модэль для будзь-яых асінхронных змян стану, што тыха ўсуне значны частак коду, які распрацоўшчыкі React пішу ўсё дзень. Багато команд апдэйтавалі свае рэшэнні, але код все ўсё чакае.
Спадневана літэратура
- Чаму большасць распрацоўшчыкаў яшчэ не адчувае значных выгод ад агентаў для кодавання — Чы ў чым сэнс дадзеных апытак JetBrains і 400 000 сесыяў Claude Code ў кантэксце дэлегавання, розніцы між экспертамі і пачаткавікамі, а таксама семіэтапнага цыклу для працы агентаў.