React 19: Нові функції та хуки

З виходом React 19 з'явилися нові функції та хуки.

Тепер ви можете використовувати теги head. Тож ми будемо записувати **** безпосередньо в компонент і використовувати їх.

Власники NextJS знають, що функції ‘use client’ та ‘use server’ тепер з’явилися в React.

Тепер ви зможете вручну виконувати мемоізацію в React. У цьому випадку ми не будемо використовувати такі хуки, як useMemo(), useCallback(), memo(). React буде управляти цим самостійно.

(Görsel, I.)

Крім того, з'явився вирішувач Promise та хук. Його використання виглядає так:

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

очікування відповіді:

 // код  

Також, хук use() заміняє useContext, давайте подивимось:

useContext(themeContext)  

use(themeContext)

Provider йде в минуле:

// нова функція  

forwardRef() більше не використовується, тепер ми просто будемо використовувати useRef():

// старе  
const myInput = forwardRef({placeholder, ref}) => {  
 return   
}  

// нове  
function MyInput({placeholder, ref}) {  
 return   
}  

Ви можете побачити багато нових функцій на офіційному сайті React, а інші майбутні хуки виглядають так, як server actions:

useFormState(): Використовується для відстеження поточного стану форми:

import { useFormState } from "react"  

const state = useFormState()  
 return (  


 Адреса:  



 {state?.pending ? "відправляється..." : "відправити"}  

 {state?.error && 
Помилка: {state.error.message}
}     ```  **useFormStatus()**, Так само, як і **_useFormState()_**.  **useActionState()**: використовується для моніторингу статусу **_React Server Action_**:  ``` "use client"      import { useActionState } from "react"   async function submitForm(data) {    "use server"    console.log("Дані форми:", data);   }   export default function MyForm() {    const state = useActionState(submitForm);    return (    
    ім’я користувача:                {state?.pending ? "відправляється..." : "відправити"}        {state?.error && 
помилка: {state.error.message}
}    
    )   } ```  **useOptimistic()**: Дозволяє оновити UI до того, як користувач виконає дію.   Наприклад, коли елемент списку видаляється, він спочатку видаляється з UI, а потім відправляється запит на сервер. Наприклад:  ``` "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 оновлюється зараз    await fetch("/api/add-item", {    method: "POST",    body: JSON.stringify({ item: newItem }),    })    }    return (    
    {items.map((item, index) => (    
{item}
    ))}    
 addItem(`Item ${items.length + 1}`)}>Додати елемент    
    )   } ```  Ось і всі функції. Ви можете стежити за оновленнями на офіційному сайті React. [Натисніть](https://react.dev/blog/2024/12/05/react-19), щоб побачити оновлення React 19 докладніше.  Успіхів в програмуванні!



Перекладено з: [React 19: New Features and Hooks](https://buvakbehlul.medium.com/react-19-new-features-and-hooks-f30c8473155e)