React 19 - érkezik

Hosszú idő után először (majdnem egy éve) jelentkeztek be a React Blogon.

Más csatornákon természetesen főként a Next.js-hez kapcsolódó fejlesztésekkel foglalkoztak.

Bár a React 19 még nem érkezett meg, ez a bejelentés előrevetíti, hogy több témakör is felkavarhatja az amúgy sem állóvíznek nevezhető React világot.

React Compiler

A React Compiler bejelentése egy újabb lépés a fejlesztésben, és több mint hasznosnak ígérkezik! Nem csupán kutatási állapotban van már, hanem production környezetben is bevethető. Az Instagram már használja ezt a megoldást, és jelenleg más Meta felületekhez is integrálják. Hamarosan pedig nyílt forráskódúvá válik.

Ahogyan ismeretes, a React állapotváltozásra néha túl sokszor újra rendereli a komponenseket. Eddig különböző optimalizálási technikákkal próbáltunk ennek a tulajdonságnak a hatását csökkenteni (néha azonban ezek a technikák lassabbak voltak, mint ha egyszerűen hagytuk volna a felesleges rendereléseket...). A useMemo, useCallback és memo API-k segítségével próbáltuk ezt elkerülni.

Miért is hasznos akkor a React Compiler?

A React Compiler használata azért hasznos, mert automatizálja a fent említett optimalizációs műveleteket, így nem kell őket kézzel elvégezni. Ez gyorsabb és hatékonyabb React alkalmazásokat eredményez, miközben időt és erőforrásokat takarít meg a fejlesztők számára.

A React csapata a bejegyzésben hangsúlyozza, hogy a React Compiler legjobban akkor működik, ha a kódod megfelel bizonyos általános elvárásoknak, például a React Strict Mode és a React ESLint plugin használatának szabályainak.

Actions

Eddig ezekre szerver action-ökként emlegettük, ám ez most változni fog.

Nem csak pl Next.js esetében lesz lehetőség ezekre (Next.js 14-gyel jelentették be a stabil szerver action-öket), hanem a kliens oldali React alkalmazások esetében is.

Mivel most a kliens oldal az érintett, ezért a hook-ok is képbe kerülnek és használatba lépnek.

Kapunk pár új hook-ot:

• useFormStatus
• useFormState
• useOptimistic hogy az action-öket ki tudjuk használni.

Példa a useFormStatus-ra

import { useFormStatus } from "react-dom";
import action from './actions';

function Submit() {
    const status = useFormStatus();
    
    return <button disabled={status.pending}>Submit</button>
}

export default function App() {
    return (
        <form action={action}>
          <Submit />
        </form>
      );
}

példa a useOptimistic-re

async function deliverMessage(message) {
    await new Promise((res) => setTimeout(res, 1000));
    return message;
}

import { useOptimistic, useState, useRef } from "react";

function Thread({ messages, sendMessage }) {
    const formRef = useRef();
    
    async function formAction(formData) {
        addOptimisticMessage(formData.get("message"));
        formRef.current.reset();
        await sendMessage(formData);
    }
    
    const [optimisticMessages, addOptimisticMessage] = useOptimistic(
        messages,
        (state, newMessage) => [
          ...state,
          {
            text: newMessage,
            sending: true
          }
        ]
    );
        
    return (
        <>
          {optimisticMessages.map((message, index) => (
            <div key={index}>
              {message.text}
              {!!message.sending && <small> (Sending...)</small>}
            </div>
          ))} 
    
          <form action={formAction} ref={formRef}>
            <input type="text" name="message" placeholder="Hello!" />
            <button type="submit">Send</button>
          </form>
        </>
    );
}


export default function App() {
    const [messages, setMessages] = useState([
        { text: "Hello there!", sending: false, key: 1 }
    ]);
    
    async function sendMessage(formData) {
        const sentMessage = await deliverMessage(formData.get("message"));
        setMessages((messages) => [...messages, { text: sentMessage }]);
    }
    
    return <Thread messages={messages} sendMessage={sendMessage} />;
}

Ezen hookok segítségével még jobb felhasználói élmény biztosítható majd az űrlapkezelések tekintetében.

Új funkciók a React Canary kiadásokból

Ahogyan a cikk elején említettem, az utóbbi időben a React fejlesztői főként más csatornákon kommunikálták legújabb fejlesztéseiket, amelyek leginkább a Next.js-hez kapcsolódtak. Ezeket a fejlesztéseket eddig csak a React Canary kiadásain keresztül érhettük el, nem pedig stabil verziókban. Gyakorlatilag ez azt eredményezte, hogy csak a Next.js segítségével tudtuk ezeket a funkciókat használni.

Mindez változni fog a React 19-el.

„use client” és a „user server” direktívák

Itt meg kell jegyezni, hogy a React az csupán React, azaz egy UI rendering könyvtár, nem több, ezeknek a használatához továbbra is szükség lesz valamely framework vagy saját megoldás használata.

Új HTML elementek,

mint <title>,<meta>,<link>, nem lesz többé szükség a React Helmet-re például.

Személy szerint ezt egy jó dologként élem meg, örülök, hogy egy helyen van, de érdekes is egyúttal. Egy UI rendering könyvtár, mint a React, miért akarja a SEO kérdéseket hirtelen a saját kezébe venni és ő gondoskodni róla, na mindegy, ezt ők már úgy néz ki eldöntötték.

ééés még pár dolog, amik nem is képezték a blog cikk tartalmát.

Ilyen például, hogy végre elfelejthetjük a forwardRef-et (ennek nagyon örülök), a React.lazy-t lényegtelenné tették a React Server Component-ek, valamint, a use hook érkezte, amelynek segítségével lehetséges lesz context-et használni, vagy promise-t megvárni.

Ha többet szeretnél tudni akkor látogass el a 24-es React konferenciára

2024 május 15-16-án rendezendő React konferencián egészen biztos, hogy ezekből sok minden bővebb kifejtésre fog majd kerülni.

Ha valaki menni szeretne, ne habozzon, személyesen Henderson, Nevadában kerül megtartásra, vagy vegyen részt online.