На этой неделе мы будем говорить о новых обновлениях и хуках React 19. Пройдя и используя некоторые из этих новых обновлений, я могу только согласиться с тем, что они упростили некоторые строгие действия, которые разработчики выполняют при создании приложений, особенно приложений, связанных с интерактивными формами.

Присоединяйтесь ко мне и давайте рассмотрим некоторые из этих новых обновлений.

Компилятор React: Компилятор React выбирает ваш код React, преобразует его в код JavaScript для браузера и управляет состоянием вашего компонента или пользовательского интерфейса. Это единственное действие помогает оптимизировать производительность вашего приложения.

Если вы знакомы с хуком useMemo, хуком useCallback и React.Memo, вы поймете, что они помогают запоминать (сохранять значения или функции для будущего использования) ваши компоненты, поэтому их не нужно переделывать. рендеринг, когда нет изменений состояния. Когда происходят изменения в состоянии, React повторно отображает рассматриваемый компонент и его дочерние элементы, а когда в вашем коде нет изменений, компонент остается неизменным, сохраняя предыдущую память, значение и состояние в компоненте или перехватчик на будущее. использует; тем самым оптимизируя производительность ваших компонентов. Это именно то, что компилятор React делает автоматически, без необходимости вручную вызывать какие-либо из вышеупомянутых перехватчиков.

Действия формы: Одним из самых больших преимуществ использования React является управление и изменение состояния, и это чаще всего происходит, когда мы используем элементы. Формы помогают нам более эффективно создавать и обрабатывать взаимодействие с пользователем.

При использовании действий формы вам не нужны обработчики событий, такие как onSubmit и onChange, для выполнения динамической мутации данных, вместо этого мы можем передать свойство action к элементу

const myFunction = async (formData) => {
  const [name, setName] = useState("")

  const updatedName = await nameChange(formData.get("name"))
     setName(updatedName)
}

При таком подходе нам не нужно применять useState для изменения данных через event.target.value. Вместо этого в myFunction мы можем получить мутированные данные через аргумент.

Это означает, что из элемента в нашей форме мы должны установить атрибут имени. Использование этого метода означает, что мы позволяем React обрабатывать саму форму через Объект формы Native React вместо изменения состояния вручную с помощью обработчиков событий.

Серверные компоненты: React 19 позволяет отображать компоненты на сервере перед объединением в отдельную среду от клиентского приложения или настройки сервера SSR. Компоненты сервера — это не то же самое, что SSR (рендеринг на стороне сервера), а отдельная серверная среда в компонентах сервера React.
Эта функция позволяет компонентам предварительно выполнить предварительную визуализацию, что приводит к более быстрому отображению контента и сокращению времени загрузки.

Метаданные: React 19 позволяет использовать гибкие метаданные. Разработчики могут управлять title, description и другими мета-тегами отдельных компонентов через компонент DocumentHead. Это поможет улучшить SEO (поисковую оптимизацию).

Const AboutUs = () => {
 return (
    
      
      
      // content
    >
  );
}

React 19 имеет ряд новых хуков, некоторые из которых новые, другие — улучшения существующих хуков. Давайте обсудим их ниже.

Хук use(): Хук use — это экспериментальный API, который можно напрямую использовать для чтения значения Promise или контекста внутри компонента или хука (что на данный момент является его единственным известным ограничением). ).
Хук use очень универсален и его также можно использовать вместо useEffect, поскольку его можно использовать для асинхронной выборки данных. Это помогает
добиться более аккуратного и лаконичного блока кода.

Предупреждение: Это не замена useEffect, поскольку у него все еще есть свои ограничения, которые _useEffect _ будет выполнять без ограничений.

import {use} from "react"
const fetchData = async () => {
    const response = await fetch("https://........");
    return response.json()
}

const userData = () => {
    const user = use(fetchData());

        return (
    
{user.name}
  );
}

useActionState(): это новый хук, который помогает управлять изменениями состояния. Это помогает управлять состоянием ожидания, обработкой ошибок и окончательным
обновления состояния. useActionState _ работает аналогично _useReduce _in, поскольку он получает два (2) параметра: функцию, вызываемую при отправке формы, и _initialState и возвращает массив, содержащий три (3) значения: состояние, которое теперь является текущим состоянием, если есть мутация состояния, новое действие (formAction), которое можно передать в качестве свойства в нашем компоненте формы для вызова действия сервера, и _isPending _который возвращает _boolean _value, если форма отправлена.

import { useActionState } from "react";

async function incrementFunction(initialState, formData) {
  return initialState   1;
}

function StatefulForm({}) {
  const [state, formAction, isPending] = useActionState(incrementFunction, 0);

  console.log(state);

  return (
    

В этом примере incrementFunction добавляет 1 к состоянию каждый раз при нажатии кнопки . initialState равно 0, а затем увеличивается до 1 при первом нажатии кнопки, тем самым изменяя state на 1, а при каждом втором нажатии кнопки добавляется 1 к последнему состояние компонента.

хук useOptimistic():

Это новый хук, который позволяет пользователям видеть результат своих действий еще до полной загрузки страниц. Страницы оптимистично отображаются для пользователя, даже когда сервер все еще находится в режиме получения данных.

В надежде, что выборка данных будет успешной, React отображает ожидаемый результат клиенту, а в случае сбоя выборки данных React возвращается к значению предыдущего состояния, чтобы не отображать неверные данные . Это уникальное действие помогает обеспечить плавное и быстрое отображение данных, тем самым улучшая взаимодействие с пользователем.

useFormStatus():

Как следует из названия, useFormStatus дает нам статус нашей формы или полей формы. Этот хук не принимает ни одного параметра, но точно возвращает 4 объекта:

ожидание: возвращает логическое значение: true или false. Он возвращает true при отправке формы и false при отправке формы.

данные: Когда форма успешно отправлена, мы можем получить информацию о пользователе или объекте из поля формы следующим образом:

(formData.get("name"))
(formData.get("address"))

метод: метод формы по умолчанию — GET, если не указано иное. Мы можем получить метод нашей формы с помощью .method. Когда мы отправляем форму, свойство строкового метода должно быть указано как POST.

action: это ссылка на функцию, которая будет передана в свойство действия в нашем элементе .

useFormStatus всегда должен вызываться из элемента или компонента, который отображается внутри .

Есть еще немало обновлений, о которых я не могу писать, так что вам не будет скучно читать так много. Вы можете перейти на веб-сайт React Docs, чтобы ознакомиться с некоторыми другими обновлениями.

Надеюсь, вы прекрасно провели время, обучаясь со мной.

Подпишитесь на меня, если вам понравились мои статьи.

Спасибо, и хорошей вам недели, друзья.