React 19.3 пен React 18: өнім командасы үшін шын мәнінде не өзгерді

React 19.3 2026 жылғы 9 қыркүйекте шықты. Көп релиз мақаласы мүмкіндік тізіміне ұқсайды; мен оларды алып тастауға болатын код тізімі деп оқимын. Өндірістік қолданбалардың көбінде әлі кездесетін React 18-мен салыстырғанда, 19 желісі жаңа синтаксистен гөрі әр команда өзі жазған уақытша шешімдерден арылуға арналған: форма күйінің машиналары, forwardRef орамдары, барлық жерде memo және typeof window тексерістері.

React 19.0 негізін қалады. Actions пен useActionState әр формадағы қолмен құрастырылған isPending / error / data үштігін алмастырды. useOptimistic оптимистік UI-ды reducer емес, hook етті. use() render кезінде promise не context оқиды, шартты түрде де қолдануға болады. ref кәдімгі prop болды, сондықтан forwardRef ескі тәсілге айналды; <Context> өзі provider бола алады; кез келген компоненттегі <title> мен <meta> head ішіне көтеріледі. Бірақ өзгерістің құны болды: string refs, legacy context, ReactDOM.render және функция компоненттеріндегі propTypes алынып тасталды. Ескі тәуелділіктері бар React 18 қолданбасына жай нұсқа нөмірін өсіру емес, толық жаңарту керек.

React 19.2 мен React Compiler 1.0 қолданбамен жұмыс сезімін өзгертті. <Activity mode="hidden"> қойындыны не келесі бетті күйімен бірге mounted қалдырып, эффектілерін кідіртеді — бұрын мұны display: none қойып, іске асады деп үміттеніп қайталайтынбыз. useEffectEvent exhaustive-deps ережесімен тартысты аяқтайды: эффект roomId-ге жауап береді, callback ең соңғы тақырыпты ғана оқиды. Ішінара алдын ала рендерлеу (prerender, сосын resume) статикалық қаңқаны CDN-нен жіберіп, динамикалық бөлігін ағынмен жеткізуге мүмкіндік береді. Compiler қолмен берілетін useMemo, useCallback және React.memo шақыруларының көбін қажетсіз етті. Кітапханаға сілтемелік бірегейлік керек жерде қалдырамын, бірақ енді әдет бойынша қоса салмаймын.

React 19.3 қозғалыстар мен DOM шекараларына арналған. <ViewTransition> енді тұрақты: элементті орап, жаңартуды startTransition деп белгілейсіз, браузер пайда болу, жоғалу және ортақ элементтерді анимациялайды. addTransitionType бір күй жаңартуынан «next» және «previous» бағыттарының екі жаққа сырғуына мүмкіндік береді. Fragment refs қосымша wrapper div-сіз focus(), IntersectionObserver үшін observeUsing() және көршілес элементтер тобын өлшеу мүмкіндігін береді. react-dom ішіндегі use(browser()) typeof window !== "undefined" тексерісін алмастырады: компонент серверде уақытша тоқтап, Suspense fallback-ін көрсетеді де, hydration-нан кейін клиентте рендерленеді. Server Components «use client» provider файлынсыз <Context value> көрсете алады; react-dom Trusted Types нысандарын жолға айналдырмай өткізеді, сондықтан қатаң require-trusted-types-for CSP React-пен жұмыс істейді.

Қатар салыстырғанда айырмашылық импорттардан көрінеді. React 18-де күту күйі, оптимистік жаңарту және анимациялы тізімі бар форма үш кітапхана мен жеке hook талап ететін; 19.3-те useActionState, useOptimistic және <ViewTransition> React-тің өзінен жеткілікті. 18-де «тек клиентте рендерле» деген mounted жалаушасы мен layout секірісі еді; енді бір жол және Suspense шекарасы жеткілікті. 18-де өнімділік memo-ны тәртіппен қолдануды қажет етті; қазір Compiler мен Chrome DevTools-тағы React Performance Tracks қай әрекет кадрды нақты бұғаттағанын көрсетеді.

Ақша өңдейтін өнімді бір pull request-пен 18-ден 19.3-ке көтермес едім. Әдейі қызықсыз жолым: алдымен ескірген API ескертулерін көру үшін 18.3, сосын ресми codemod-пен 19, одан кейін бір маршрутта feature flag артындағы Compiler, ең соңында кодты жоятын жерлерде ғана жаңа API. 19.3 — қосымша мүмкіндік беретін нұсқа, релизде үйлесімділікті бұзатын өзгеріс жоқ делінген; бірақ 2025 жылғы желтоқсандағы Server Components қауіпсіздік хабарламалары patch нұсқалары major нұсқалардай маңызды екенін еске салады. Қолданбаңыз әлі 18-де болса, package.json мен ең маңызды үш экранын жіберіңіз. Жаңарту ретін және кейін жоюға болатын кодты ұсынамын.