Mala Anlatır Gibi React — 10: Yeni Özellikler ve Hooklar / React 19

Mala Anlatır Gibi React — 10: Yeni Özellikler ve Hooklar / React 19

React 19 çıkmasıyla beraber, yeni özellikler ve hooklar geldi.

Artık head etiketlerini kullanabileceğiz. Yani direkt component’a <title> Burak Behlül </title> diye yazıp, kullanacağız.

Bunun harici nextjs kullananlar bilir, artık ‘use client’, ‘use server’ özelliği de React’da geldi.

React’da memoization’ı elle yapmaya son. Bu durumda, useMemo(), useCallback(), memo() gibi hookları kullanmayacağız. React kendisi yönetecek.

(Görsel, I.)

Bunun yanında Promise’ı çözen ve bir hook getirmişler. Kullanımı şöyle:

import { use, Suspense } from 'react'
use(()=> {})
use(()=> fetch(URL).then().catch())

Yanıtı beklemek <Suspense>:

<Suspense fallback="Yükleniyor...">
  // code
</Suspense>

Ayrıca, use() hook’u, useContext yerine geçiyor, bakalım:

useContext(themeContext)

use(themeContext)

Provider kalkıyor:

<ThemeContext.Provider value="dark">
  
</ThemeContext.Provider>

// Yeni özellik

<ThemeContext value="dark">
  
</ThemeContext>

forwardRef() kullanımı kalktı, sadece useRef() kullanacağız:

// eski 
const myInput = forwardRef({placeholder, ref}) => {
  return <input placeholder={placeholder} ref={ref} />
}

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

<MyInput ref={ref} />

Gelen birçok özelliği React’ın kendi sitesinden görebilirsiniz, ve gelen diğer hooklar şöyle sırasıyla, server actions:

useFormState(): Bir formun mevcut durumunu takip etmek için kullanılır:

import { useFormState } from "react"

const state = useFormState()

  return (
    <form action="/api/submit" method="post">
      <label>
        Adınız:
        <input type="text" name="name" />
      </label>
      <button type="submit" disabled={state?.pending}>
        {state?.pending ? "Gönderiliyor..." : "Gönder"}
      </button>
      {state?.error && <p>Hata: {state.error.message}</p>}
    </form>

useFormStatus(), useFormState ile aynıdır.

useActionState(): bir React Server Action’ın durumunu izlemek için kullanılır:

"use client"

import { useActionState } from "react"

async function submitForm(data) {
  "use server"
  console.log("Form verileri:", data);
}

export default function MyForm() {
  const state = useActionState(submitForm);

  return (
    <form action={submitForm} method="post">
      <label>
        Kullanıcı Adı:
        <input type="text" name="username" />
      </label>
      <button type="submit" disabled={state?.pending}>
        {state?.pending ? "Gönderiliyor..." : "Gönder"}
      </button>
      {state?.error && <p>Hata: {state.error.message}</p>}
    </form>
  )
}

useOptimistic(): Kullanıcıdan bir işlem beklemeden önce UI’yi güncellemenize olanak tanır.

Örneğin, bir liste öğesi silindiğinde, önce kullanıcı arayüzünden silinir, ardından sunucuya istek yapılır. Örnek olarak:

"use client"

import { useOptimistic } from "react"

export default function OptimisticExample() {
  const [items, setItems] = useOptimistic(
    ["Item 1", "Item 2", "Item 3"],
    (items, newItem) => [...items, newItem]
  )

  async function addItem(newItem) {
    setItems(newItem) // UI hemen güncellenir
    await fetch("/api/add-item", {
      method: "POST",
      body: JSON.stringify({ item: newItem }),
    })
  }

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={() => addItem(`Item ${items.length + 1}`)}>Ekle</button>
    </div>
  )
}

Özellikler bu kadardı. React’ın kendi sitesinden güncellemeleri takip edebilirsiniz. React 19 güncellemelerini detaylı bakmak için ise basınız.

Herkese iyi kodlamalar!