React 19 Diumumkan! 🚀, Apa saja yang baru?

Daftar Isi:

Apakah Engkau seorang pengembang web yang menggunakan React? Apabila iya, Terdapat Berita gembira nih! Tim pengembang React baru saja mengumumkan rilis terbaru mereka, Adalah React 19. 🎉

Sudah Sekeliling 2 tahun dari versi react 18.0.2 Copot 14 Juni 2022 di umumkan. Terdapat beberapa ketidakpuasan dari pengguna React 18.0.2, banyak kritik yang di sampaikan oleh pengembang React di versi ini. Akhirnya tim React mengkonfirmasi akan Terdapat rilis besar dengan versi 19.0.0. Banyak React Developer yang menantikan rilis versi 19 ini. Rilis ini dirancang Demi mengoptimalkan performa dan memperkenalkan fitur-fitur canggih yang akan menyederhanakan proses pengembangan web.

Informasi belajar ReactJS Bahasa Indonesia

Fitur-fitur terbaru React 19

Beberapa fitur baru yang ditawarkan oleh React 19 antara lain:

React Compiler: React 19 memperkenalkan compiler baru yang dirancang Demi meningkatkan performa aplikasi React. Compiler ini memungkinkan pengembang Demi mengoptimalkan kode React mereka dan mengurangi waktu rendering yang diperlukan Demi aplikasi mereka. Dengan menggunakan compiler baru ini, pengembang dapat Membangun aplikasi React yang lebih Segera dan responsif.
Actions: React 19 memperkenalkan mode konkuren yang memungkinkan rendering yang lebih responsif dan Lancar. Dengan menggunakan Concurrent Mode, aplikasi React dapat merespons input pengguna dengan lebih Segera dan memberikan pengalaman yang lebih Bagus.
New hook: React 19 juga memperkenalkan hook baru Adalah:
- useActionState: Hook ini memungkinkan pengembang Demi mengelola state aplikasi dengan lebih mudah dan efisien.
- useFormStatus: Hook ini memungkinkan pengembang Demi melacak status form dengan lebih Bagus dan memberikan feedback yang lebih Bagus kepada pengguna.
- useOptimistic: Hook ini memungkinkan pengembang Demi melakukan operasi optimistik dengan mudah dan Terjamin.
New API: use – React 19 juga memperkenalkan API baru Adalah use. API ini memungkinkan pengembang Demi menggunakan fitur-fitur baru React dengan lebih mudah dan efisien. Dengan menggunakan API use, pengembang dapat mengakses fitur-fitur baru React tanpa perlu mengubah kode yang sudah Terdapat.
React Server Components: Salah satu fitur paling menarik dari React 19 adalah Server Components. Fitur ini memungkinkan pengembang Demi Membangun komponen yang di-render di sisi server dan dikirimkan ke klien sebagai HTML Stagnan. Hal ini dapat meningkatkan performa dan mengurangi waktu muat aplikasi.
Improvements: React 19 juga melalukan improvement Adalah:
- ref as a prop: di React 19 kita dapat menggunakan ref sebagai props, ini sangat memudahkan Demi memanipulasi ref yang akan di gunakan di child Components.
- Diffs for hydration errors: React 19 juga Membangun lebih simple handle error log Demi hydration error, yang sebelumnya multiple error log ketika membuka browswe console, sekarang di React 19 hanya di buat 1 baris jadi lebih mudah Demi di baca.
- as a provide: ini juga menarik memudahkan developer Demi membaca code dikarenakan code jadi lebih Rapi. di React 19 Dapat menggunakan sebagai provider.
- Cleanup functions for refs: React 19 juga memperbaiki fitur ref yang mana dapat melakukan cleanup ketika element sudah di hapus dari DOM.
- useDeferredValue initial value: adalah React Hook yang memungkinkan developer Demi menunda pembaharuan sebagian UI.
Support for Document Metadata: React 19 juga mendukung metadata Berkas yang lebih Bagus. Dengan menggunakan fitur ini, pengembang dapat mengatur metadata Berkas dengan lebih mudah dan efisien.

Seperti yang saya sampaikan sebelumnya bahwa React 19 Mempunyai banyak kritik dari para developer yang mana masalah rendering ulang yang berlebihan,banyak developer menghabiskan banyak waktu berjam jam Demi mengatasi masalah ini yang sering kali menyebabkan kinerja developer menurun.
Developer mencoba memperbaiki masalah rendering ulang dengan menggunakan teknik-teknik yang Terdapat, seperti menggunakan React.memo, useMemo, useCallback, dan lain-lain. Tetapi, teknik-teknik tersebut seringkali Kagak efektif dan memakan waktu yang Pelan.
Dengan adanya React 19, pengembang React dapat mengoptimalkan performa aplikasi mereka dan menggunakan fitur-fitur baru yang akan menyederhanakan proses pengembangan web.

Saya akan mencoba Demi menjelaskan secara rinci fitur-fitur baru yang ditawarkan oleh React 19.

1. React Compiler

React Compiler adalah compiler baru yang dirancang Demi meningkatkan performa aplikasi React. Compiler ini memungkinkan pengembang Demi mengoptimalkan kode React mereka dan mengurangi waktu rendering yang diperlukan Demi aplikasi mereka. Dengan menggunakan compiler baru ini, pengembang dapat Membangun aplikasi React yang lebih Segera dan responsif.

Kenapa React Compiler ini Krusial? Karena dengan adanya compiler ini, pengembang dapat mengoptimalkan kode React mereka dan mengurangi waktu rendering yang diperlukan Demi aplikasi mereka. Dengan menggunakan compiler baru ini, pengembang dapat Membangun aplikasi React yang lebih Segera dan responsif.
Sebagai Misalnya, Engkau Mempunyai React Component yang menghasilkan Object atau Array baru pada setiap render.

import React from "react";

const AlphabetList = () => {
  // define the alphabet array
  const alphabet = Array.from({ length: 26 }, (_, i) =>
    String.fromCharCode(65 + i)
  );

  return (
    div>
      h2>Alphabet Listh2>
      ul>
        {/* merender alphabet sebagai list items */}
        {alphabet.map((letter, index) => (
          li key={index}>{letter}li>
        ))}
      ul>
    div>
  );
};

export default AlphabetList;

Meskipun konten dari komponen ini Kagak berubah / sama, React Kagak akan mengetahui hal tersebut secara efisien, akibatnya React akan merender ulang komponen ini setiap kali komponen induknya merender ulang. Mekanisme rendering ulang ini dapat dengan Segera menjadi Kagak terkendali, sehingga berdampak signifikan terhadap kinerja aplikasi dan kurang Bagus di sisi user.

READ Belajar Kubernetes di Local Menggunakan Minikube

Demi mengatasi masalah ini, kita Dapat menggunakan React.memo atau useMemo Demi menghindari rendering ulang yang Kagak perlu. dan mungkin useCallback juga Dapat di gunakan Demi menghindari rendering ulang yang Kagak perlu.
code di atas akan kita optimalkan dengan menggunakan useMemo seperti ini:

import React, { useMemo } from "react";

const AlphabetList = () => {
  // define the alphabet array via useMemo()
  const alphabet = useMemo(() => {
    return Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i));
    // no dependencies, so it will only be calculated once on the first render
  }, []);

  return (
    div>
      h2>Alphabet Listh2>
      ul>
        {/* render the alphabet as list items */}
        {alphabet.map((letter, index) => (
          li key={index}>{letter}li>
        ))}
      ul>
    div>
  );
};

export default AlphabetList;

Gimana rumit Kagak? kita harus menggunakan useMemo Demi menghindari rendering ulang yang Kagak perlu. Dengan adanya React Compiler, kita Kagak perlu Tengah menggunakan useMemo Demi menghindari rendering ulang yang Kagak perlu. Compiler ini akan mengoptimalkan kode React kita dan mengurangi waktu rendering yang diperlukan Demi aplikasi kita. Tim React telah Membangun “React Compiler”. Kompiler React sekarang akan mengelola perenderan ulang ini. React akan memutuskan secara Mekanis bagaimana dan Ketika mengubah status dan memperbarui UI.

Jadi, dengan adanya React Compiler baru di React 19 ini, pengembang Kagak perlu Tengah khawatir tentang rendering ulang yang Kagak perlu. Compiler ini akan mengoptimalkan kode React kita dan mengurangi waktu rendering yang diperlukan Demi aplikasi kita.

2. Actions

React 19 mengenalkan Action Adalah sebuah fitur yang menyederhanakan dalam pengelolaan data mutations (fetching data ke API) atau state di aplikasi React. Dengan menggunakan Actions, developer dapat mengelola pending state, error, optimistic update dan request secara berurutan Kagak dengan secara manual Tengah. Actions ini memungkinkan developer Demi mengelola state aplikasi dengan lebih mudah dan efisien.

Kasus paling banyak di aplikasi React adalah ketika melakukan data mutation (fetching data ke API) dan kemudian response data dari API akan di update ke state. Sebagai Misalnya lebih spesifik Tengah Adalah ketika user Ingin mengupdate data profile, maka akan melakukan request ke API, kemudian API akan meresponse data yang di update ke state. Saya akan memberikan Misalnya Demi menghandle kasus tersebut Metode manual dan menggunakan Action.

Metode Manual

// Before Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    // Fetch data from API
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    }
    redirect("/path");
  };

  return (
    div>
      input value={name} onChange={(event) => setName(event.Sasaran.value)} />
      button onClick={handleSubmit} disabled={isPending}>
        Update
      button>
      {error && p>{error}p>}
    div>
  );
}

Apabila kita bedah code di atas, kita Dapat lihat bahwa kita harus mengelola state isPending secara manual. Hal ini Membangun code kita menjadi lebih kompleks dan sulit Demi di maintain.

Menggunakan Actions

// Using pending state from Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      }
      redirect("/path");
    });
  };

  return (
    div>
      input value={name} onChange={(event) => setName(event.Sasaran.value)} />
      button onClick={handleSubmit} disabled={isPending}>
        Update
      button>
      {error && p>{error}p>}
    div>
  );
}

Apabila kita bedah Tengah code di atas, kita Dapat lihat bahwa kita Kagak perlu Tengah mengelola state isPending secara manual. useTransition akan mengelola state isPending dengan nilai awal adalah true dan akan menjadi false ketika proses selesai. Hal ini memungkinkan developer menjaga UI agar tetap responsif dan interaktif Ketika data berubah. Gimana menurut kalian? lebih mudah dan efisien bukan?

3. New hooks

React 19 juga memperkenalkan beberapa hooks baru yang dapat membantu pengembang dalam mengelola state lebih mudah. Berikut adalah beberapa hooks baru yang diperkenalkan di React 19 dan akan kita bedah 1 per 1:

3.1. `useActionState`

useActionState adalah hooks yang digunakan Demi mengelola state dengan Metode yang lebih deklaratif. Hooks ini memungkinkan kita Demi mendefinisikan aksi-aksi yang dapat mempengaruhi state dan mengubah state berdasarkan aksi-aksi tersebut. Berikut adalah Misalnya penggunaan useActionState di kasus yang sebelumnya Adalah update profile:

// Using  Actions and useActionState
function ChangeName({ name, setName }) {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));
      if (error) {
        return error;
      }
      redirect("/path");
      return null;
    },
    null
  );

  return (
    form action={submitAction}>
      input type="text" name="name" />
      button type="submit" disabled={isPending}>
        Update
      button>
      {error && p>{error}p>}
    form>
  );
}

Dengan kasus yang sama kita dapat mensederhanakan kode dengan menggunakan useActionState hooks. yang mana di dalam fungsi useActionState terdapat fungsi submitAction yang dapat langsung di panggil dari form action.

READ 7 Langkah keluar dari tutorial hell

3.2. `useFormStatus`

useFormStatus adalah hooks yang memudahkan dalam Membangun suatu design system, misalnya kita Ingin mengakses informasi yang Terdapat di dalam form tanpa harus menggunakan props di dalam komponen, kita dapat menggunakan hooks ini. walaupun kasus ini dapat di selesaikan juga menggunakan Context Tetapi kita harus Membangun Provider dan Consumer yang mana akan Membangun kode menjadi lebih kompleks.

Berikut adalah Misalnya penggunaan useFormStatus hooks:

import { useFormStatus } from "react-dom";
import { submitForm } from "./actions.js";

function Submit() {
  const { pending } = useFormStatus();
  return (
    button type="submit" disabled={pending}>
      {pending ? "Submitting..." : "Submit"}
    button>
  );
}

function Form({ action }) {
  return (
    form action={action}>
      Submit />
    form>
  );
}

export default function App() {
  return Form action={submitForm} />;
}

3.3. `useOptimistic`

useOptimistic hook ini akan membantu meningkatkan pengalaman pengguna dan akan menghasilkan respons yang lebih Segera. Ini akan Berfaedah Demi aplikasi yang perlu berinteraksi dengan server. hook ini akan segera memperbarui UI dengan Dugaan permintaan akan berhasil. Dinamakan optimistic karena pengguna akan Memperhatikan hasil optimistic (success) dari melakukan suatu tindakan, padahal sebenarnya tindakan tersebut membutuhkan waktu Demi diselesaikan.

import { useOptimistic, useState } from "react";

const Optimistic = () => {
  const [messages, setMessages] = useState([
    { text: "Hey, I am initial!", sending: false, key: 1 },
  ]);
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [
      ...state,
      {
        text: newMessage,
        sending: true,
      },
    ]
  );

  async function sendFormData(formData) {
    const sentMessage = await fakeDelayAction(formData.get("message"));
    setMessages((messages) => [...messages, { text: sentMessage }]);
  }

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

  const submitData = async (userData) => {
    addOptimisticMessage(userData.get("username"));

    await sendFormData(userData);
  };

  return (
    
      {optimisticMessages.map((message, index) => (
        div key={index}>
          {message.text}
          {!!message.sending && small> (Sending...)small>}
        div>
      ))}
      form action={submitData}>
        h1>OptimisticState Hookh1>
        div>
          label>Usernamelabel>
          input type="text" name="username" />
        div>
        button type="submit">Submitbutton>
      form>
    >
  );
};

export default Optimistic;

fakeDelayAction adalah fungsi yang akan menunda eksekusi selama 1 detik.
submitData adalah fungsi yang akan menambahkan pesan optimistic ke daftar pesan dan kemudian mengirimkan data ke server.
sendFormData adalah fungsi Demi mengirim data form ke fakeDelayAction.

Didalam submitData kita menggunakan addOptimisticMessage ini akan menambahkan form data jadi itu akan Terdapat di dalam optimisticMessage. Kita akan menggunakan ini Demi menampilkan pesan di dalam UI.

{
  optimisticMessages.map((message, index) => (
    div key={index}>
      {message.text}
      {!!message.sending && small> (Sending...)small>}
    div>
  ));
}

4. New API: use

React 19 juga memperkenalkan beberapa hooks baru Adalah use. Hook ini akan menyederhanakan bagaimana kita mengelola Promise yang mana React akan menunggu Tamat Promise tersebut terselesaikan.
Promise adalah objek yang merepresentasikan hasil dari suatu eksekusi asynchronous. Promise dapat berada dalam 3 keadaan Adalah pending, fulfilled, dan rejected.
Kembali ke hooks use, berikut ini adalah Misalnya penggunaan hooks use:

import { use } from "react";

const fetchUsers = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  return res.json();
};

const UsersItems = () => {
  const users = use(fetchUsers());

  return (
    ul>
      {users.map((user) => (
        div key={user.id} className="bg-blue-50 shadow-md p-4 my-6 rounded-lg">
          h2 className="text-xl font-bold">{user.name}h2>
          p>{user.email}p>
        div>
      ))}
    ul>
  );
};
export default UsersItems;

Dari kode di atas kita menggunakan use Demi mengeksekusi fungsi fetchUsers yang mengambil data dari API. Kita menggunakan use Demi menunggu Tamat Promise tersebut terselesaikan.

Sebagai catatan bahwa hooks use Kagak dapat di gunakan fungsi promise yang di buat di dalam render. Apabila kita mencoba menjalankannya di dalam render maka akan di dapati warning seperti ini A component was suspended by an uncached promise. Creating promises inside a Client Component or hook is not yet supported, except via a Suspense-compatible library or framework.

Metode lain Demi menggunakan hooks use adalah di gabungkan dengan Context.

import { use } from "react";
import ThemeContext from "./ThemeContext";

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState("light");

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
  };

  return (
    ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    ThemeContext.Provider>
  );
};

function Heading({ children }) {
  if (children == null) {
    return null;
  }

  // ini Kagak akan bekerja menggunakan useContext
  // karena di awal return.
  const theme = use(ThemeContext);
  return (
    h1 style={{ color: theme === "light" ? "red" : "white" }}>{children}h1>
  );
}

5. React Server Components

Ini hal yang menarik di React 19 yang mungkin kita Paham react sebelumnya hanya dapat berjalan di Client Side Rendering Adalah rendering di sisi client. sebelumnya kita Paham react yang dapat di render di sisi server (Server Side Rendering) Adalah sebuah framework nextjs. Tetapi di React 19, React memperkenalkan fitur baru Adalah React Server Components. React Server Components adalah komponen yang di render di server dan di kirim ke client sebagai HTML Standar. React Server Components memungkinkan kita Demi mengirimkan komponen yang di render di server ke client sebagai HTML Standar. Ini akan mengurangi waktu loading halaman dan juga mengurangi beban client.
Sama halnya dengan NextJS Seluruh komponent pada dasarnya adalah server side rendering, Tetapi ketika di berikan code use client maka NextJS akan merender di client side. Sepertinya React 19 mengadopsi konsep ini.

"use client";

type ClientComponentProps = {
  children: React.ReactNode,
};

export default function ClientComponent({ children }: ClientComponentProps) {
  console.log("client rendered");
  return {children}>;
}

export default function ServerComponent() {
  console.log("server rendered");
  return >;
}

Jadi bagaimana membedakan antara komponen yang di render di server dan di client? kita dapat mengggunakan console di browser, Apabila kita menjalankan app di mode client maka kita dapat Memperhatikan console client rendered di console browser, dan Apabila kita menjalankan app di mode server maka kita dapat Memperhatikan console server rendered di console terminal.

READ Manajemen Docker Container dengan Portainer

Tetapi react memberikan catatan bahwa React Server Components Lagi dalam tahap eksperimen dan belum siap Demi digunakan di produksi. Apabila Kagak Terdapat break di antara major version, Tetapi Apabila Kagak Terdapat break dan sudah stable maka kita dapat menggunakan React Server Components di produksi.

6. Improvements

Saya akan mencoba membreakdown beberapa perubahan yang Terdapat di React 19:

6.1. ref as a prop

Ketika ini react dapat menggunakan ref sebagai props, yang mana di versi sebelum nya kita harus mengambil ref props menggunakan forwardRef yang mana cukup merepotkan dan susah Demi membaca code nya. Berikut ini adalah Misalnya penggunaan ref sebagai props:

function MyInput({ placeholder, ref }) {
  return input placeholder={placeholder} ref={ref} />;
}

//...
MyInput ref={ref} />;

6.2. Diffs for hydration errors

Seperti yang sudah saya jelaskan di part 1 Adalah React 19 juga Membangun lebih simple handle error log Demi hydration error, yang sebelumnya multiple error log ketika membuka browswe console, sekarang di React 19 hanya di buat 1 baris jadi lebih mudah Demi di baca.

6.3. as a provide

sebagai provider yang di versi sebelumnya Apabila kita Ingin menggunakan Context kita harus Membangun Provider terlebih dahulu, di versi 19 kita dapat menggunakan Context tanpa harus mendefenisikan provider, berikut akan saya berikan Misalnya antara menggunakan Provider dan Kagak menggunakan di versi React 19:

// Metode Pelan di versi 
function App() {
  const [theme, setTheme] = useState("light");
  // ...
  return (
    ThemeContext.Provider value={theme}>
      Page />
    ThemeContext.Provider>
  );
}

// Metode baru di versi 19
const ThemeContext = createContext("");

function App({ children }) {
  return ThemeContext value="dark">{children}ThemeContext>;
}

gimana lebih simple bukan?.

6.4. Cleanup functions for refs

React 19 juga Membangun ref sebagai function dan dapat di clear, berikut contohnya:

input
  ref={(ref) => {
    // ref dibuat

    // BARU: return Demi membersihkan / reset ref
    // ketika element sudah di hapus dari DOM.
    return () => {
      // fungsi
    };
  }}
/>

6.5. useDeferredValue initial value

useDeferredValue adalah React hook yang mengijinkan Demi memisahkan UI kedalam prioritas yang tinggi atau prioritas yang rendah. Ia bekerja dengan membiarkan React menginterupsi dirinya sendiri ketika sesuatu yang Krusial terjadi. Misalnya yang lebih sederhana perhatikan kode ini:

function App() {
  const [count, setCount] = React.useState(0);
  const deferredCount = React.useDeferredValue(count);
  return (
    
      ImportantStuff count={count} />
      SlowStuff count={deferredCount} />
      button onClick={() => setCount(count + 1)}>Incrementbutton>
    >
  );
}

Demi render awal count dan deferredCount nilainya sama persis (0). Tetapi, ketika pengguna mengklik tombol Increment, sesuatu yang menarik terjadi?
Setiap render kini menampilkan nilai hitungan serta nilai tangguhan yang kita teruskan ke .

Pada React.js 19, kita dapat menggunakan tag title, link dan meta secara langsung pada komponen React kita. Fitur ini dapat membantu meningkatkan SEO (Search Engine Optimization) dan memastika aksebilitas.Berikut Misalnya penggunaan tag title dan meta:

function BlogPost({ post }) {
  return (
    article>
      h1>{post.title}h1>
      title>{post.title}title>
      meta name="author" content="Josh" />
      link rel="author" href="https://twitter.com/joshcstory/" />
      meta name="keywords" content={post.keywords} />
      p>Eee equals em-see-squared...p>
    article>
  );
}

Ringkasan

Akan Terdapat kompiler React baru yang akan diperkenalkan di versi React yang akan datang.
React 19 akan melakukan rendering ulang Mekanis, memoisasi, dan optimalisasi status dan UI.
Di perbaharui dan ditambahkan Hooks baru yang akan mempermudah pengembangan aplikasi.
React 19 dapat melakukan compiling di server side dan client side.
React 19 Mempunyai penanganan form yang lebih Bagus menggunakan Actions, useActionState, useFormStatus dan useOptimistic.

Dari Seluruh pembaharuan yang Terdapat di React 19, saya sendiri sangat menantikan fitur React Compiler dan new Hooks dimana React Compiler sangat membantu dalam mengoptimalkan performa aplikasi React yang selama ini sering saya dapati di beberapa project saya dan sangat susah Demi mengoptimalkan performa aplikasi di React. dan juga New Hook yang mempermudah dalam mengelola state aplikasi dengan lebih mudah dan efisien.
Apabila Terdapat yang Ingin ditanyakan atau di diskusikan silahkan tulis di kolom komentar.

Sumber:

Fitur-fitur terbaru React 19

1. React Compiler

2. Actions

Metode Manual

Menggunakan Actions

3. New hooks

3.1. `useActionState`

3.2. `useFormStatus`

3.3. `useOptimistic`

4. New API: use

5. React Server Components

6. Improvements

6.1. ref as a prop

6.2. Diffs for hydration errors

6.3. as a provide

6.4. Cleanup functions for refs

6.5. useDeferredValue initial value

Ringkasan

Useful Links

Subscribe Now

React 19 Diumumkan! 🚀, Apa saja yang baru?

Fitur-fitur terbaru React 19

1. React Compiler

2. Actions

Metode Manual

Menggunakan Actions

3. New hooks

3.1. useActionState

3.2. useFormStatus

3.3. useOptimistic

4. New API: use

5. React Server Components

6. Improvements

6.1. ref as a prop

6.2. Diffs for hydration errors

6.3. as a provide

6.4. Cleanup functions for refs

6.5. useDeferredValue initial value

Ringkasan

Useful Links

Subscribe Now

3.1. `useActionState`

3.2. `useFormStatus`

3.3. `useOptimistic`