React 19 представляє безліч нових функцій та покращень, спрямованих на покращення досвіду розробника та підвищення продуктивності додатків. У цьому блозі ми розглянемо основні оновлення та надамо практичні приклади, щоб допомогти вам зрозуміти та застосувати ці вдосконалення у ваших проектах, з особливим акцентом на додатки в спортивній індустрії.
1. Дії (Actions)
Дії спрощують мутації даних та оновлення станів, дозволяючи асинхронні функції в межах транзакцій. Ця функція автоматично керує очікуваними станами, помилками, формами та оптимістичними оновленнями.
Уявіть собі додаток для управління спортивною командою, де користувачі оновлюють статистику гравців.
Дії (Actions) можуть безшовно керувати станом процесу оновлення.
import { useState, useTransition } from 'react';
function UpdatePlayerStats() {
const [stats, setStats] = useState('');
const [error, setError] = useState(null);
const [isPending, startTransition] = useTransition();
const handleSubmit = () =\> {
startTransition(async () =\> {
const error = await updateStats(stats);
if (error) {
setError(error);
return;
}
// Обробка успішного оновлення, наприклад, повідомлення користувача
});
};
return (
\
\ setStats(e.target.value)} /\>
\
Оновити статистику
\
{error && \{error}\}
\
);
}
У цьому прикладі startTransition керує очікуваним станом під час асинхронної операції, підтримуючи реактивність інтерфейсу.
2.
Нові хукси (Hooks)
React 19 вводить кілька хуків для покращення управління станом і досвіду користувача:
useOptimistic
Управляє оптимістичними оновленнями, дозволяючи інтерфейсу користувача відображати зміни негайно до отримання підтвердження від сервера.
Це дозволяє спортивним додаткам показувати миттєві оновлення, такі як зміни складу команди або рахунки, чекаючи на підтвердження з боку серверу.
У додатку для фентезі-ліги користувачі можуть оптимістично оновлювати склад своєї команди, чекаючи на підтвердження від сервера.
import { useOptimistic } from 'react';
function UpdateLineup({ currentLineup, onLineupChange }) {
const [optimisticLineup, setOptimisticLineup] = useOptimistic(currentLineup);
const submitAction = async (formData) =\> {
const newLineup = formData.get('lineup');
setOptimisticLineup(newLineup);
const updatedLineup =Current Lineup: {optimisticLineup}\
\
\Save Changes\
\
);
}
useActionState
Спрощує управління асинхронними оновленнями, відстежуючи стан дій і обробляючи помилки.
Цей хук спрощує процес надсилання форм або даних, таких як статистика гравців або результати матчів, у додатках для управління спортом.
Оновлення статистики гравця:
import { useActionState } from 'react';
function UpdatePlayerPerformance({ stats, onStatsUpdate }) {
const [error, submitAction, isPending] = useActionState(
async (prevState, formData) =\> {
const newStats = formData.get('stats');
const updatedStats = await updateStats(newStats);
onStatsUpdate(updatedStats);
return null;
},
null
);
return (
\
\
\Update\
{error && \{error}\}
\
);
}
useFormStatus
Відстежує статус подання форми, включаючи очікувані стани та помилки, і надає зворотний зв'язок для дій.
Ідеально підходить для обробки станів подання форм, таких як реєстрація гравців або подання результатів.
Відображення прогресу подання форми:
import { useFormStatus } from 'react-dom';
function SubmitButton() {
const { pending } = useFormStatus();
return \Submit\;
}
Кожен із цих хуків пропонує унікальні можливості, спрощуючи складні робочі процеси управління станом і формами.
Ефективне використання цих інструментів може значно покращити взаємодію користувача у спортивних додатках, роблячи їх більш швидкими та чутливими.
3. Новий API: use
API use дозволяє зчитувати ресурси під час рендерингу, що дозволяє компонентам призупиняти виконання до того, як обіцянка (promise) буде вирішена.
Отримання актуальних результатів матчів і відображення їх у реальному часі:
import { use } from 'react';
function LiveScores({ scoresPromise }) {
const scores = use(scoresPromise);
return (
\
{scores.map((score, idx) =\> (
\
{score.match}: {score.score}\ ))} \ ); } function Page({ scoresPromise }) { return ( \Loading live scores...\}\> \ \ ); } ``` **4.
Реактивний компілятор (React Compiler)**
Новий компілятор React оптимізує код, перетворюючи компоненти React у високоефективний JavaScript, що зменшує потребу в ручних оптимізаціях, таких як `useCallback` та `useMemo`.
Оптимізація відображення статистики гравця:
function PlayerStats({ stats }) {
return (
\
\Player Statistics\
\Points: {stats.points}\
\Assists: {stats.assists}\
\Rebounds: {stats.rebounds}\
\
);
}
```
З компілятором React немає потреби в ручній мемоізації; компілятор автоматично обробляє оптимізації.
5.
Компоненти на сервері (Server Components)
Компоненти на сервері дозволяють рендерити компоненти на сервері, покращуючи продуктивність і SEO, зменшуючи кількість JavaScript, що відправляється на клієнт.
Відображення списку майбутніх матчів:
// Серверний компонент
export default async function UpcomingMatches() {
const res = await fetch('https://api.sportsdata.com/upcoming-matches');
const matches = await res.json();
return (
\
\Upcoming Matches\
\
{matches.map((match) =\> ( ); }
6.
Директиви (Directives)
React 19 вводить директиви, такі як 'use client' і 'use server', щоб визначити, де компоненти та функції повинні виконуватись, допомагаючи розрізняти код, який працює на клієнті, та код на сервері.
Відображення лідерборду на клієнтській стороні:
'use client';
function Leaderboard({ data }) {
return (
\
\Leaderboard\
\
{data.map((player) =\> (
\
{player.name}: {player.points} points\ ))} \ \ );
}
Додавання 'use client' на початку файлу вказує, що цей компонент має виконуватись на клієнтській стороні.
7. Покращений Suspense
React 19 покращує Suspense за допомогою таких можливостей, як попереднє завантаження для призупинених дерев, що покращує взаємодію з користувачем під час отримання даних та розділення коду.
Попереднє завантаження даних для спортивної панелі:
\Loading dashboard...\}\> \
8.
Статичні API React DOM (React DOM Static APIs)
Нові статичні API в React DOM надають більше контролю над рендерингом на сервері та гідратацією, дозволяючи ефективніше застосовувати стратегії рендерингу.
Трансляція живих даних для додатку спортивних коментарів:
import { renderToPipeableStream } from 'react-dom/server';
function handleLiveRequest(request, response) {
const { pipe } = renderToPipeableStream(\, {
onShellReady() {
response.statusCode = 200;
pipe(response);
},
onError(err) {
console.error(err);
response.statusCode = 500;
response.end('Internal Server Error');
},
});
}
9. Покращена інтеграція з Web Components
React 19 покращує сумісність з Web Components, дозволяючи розробникам більш безшовно інтегрувати власні елементи в React додатки.
Інтеграція стороннього віджетів для відображення результатів матчів:
function App() {
return (
\
\
\
);
}
10.
Завантаження активів і метадані документа (Asset Loading and Document Metadata)
React 19 вводить нові функції для покращеного завантаження активів та спрощеного керування метаданими документа. Це допомагає покращити продуктивність і SEO.
Додавання метаданих для сторінки спортивної події:
import { Meta } from 'react';
function EventPage() {
return (
\<\>
\
\Championship Game Live\
\
);
}
Підсумки
React 19 є справжньою революцією для розробників, надаючи інструменти, які спрощують керування станом, покращують продуктивність і вдосконалюють загальний досвід розробки. Завдяки впровадженню цих функцій ви зможете створювати швидші та ефективніші додатки.
Незалежно від того, чи ви створюєте спортивні додатки, чи інші рішення, ці оновлення надають корисні можливості для всіх.
Отримайте мої 3 безкоштовні електронні книги, підписавшись на мою розсилку, і також перегляньте більше блогів на моєму сайті або подивіться відео на Imran Codes Youtube Channel!
Перекладено з: What’s New in React 19: A Comprehensive Breakdown