Останній раз React випустив нову версію 14 червня 2022 року, і її номер був 18.2.0. У сфері фронтенд-розробки такий повільний темп оновлень для популярної технології є справді рідкісним явищем. Це викликало невдоволення серед деяких впливових діячів спільноти, про що я згадував у своєму попередньому матеріалі.
Ті, хто зацікавлений, можуть натиснути, щоб переглянути: Розбіжності в спільноті React.
На тлі зростаючого невдоволення у спільноті нарешті надійшли новини про нову версію React.
Команда React також відповіла на критику щодо тривалої відсутності офіційних оновлень: функції, які раніше були випущені у версії Canary, через їхню взаємозалежність вимагали значних зусиль від команди React для забезпечення їхньої сумісності перед поступовим випуском у Stable-версії.
Справді, хоча офіційна версія не виходила майже два роки, у версії Canary з’явилися деякі важливі оновлення, такі як хуки use, useOptimistic, а також директиви use client і use server.
Ці оновлення об’єктивно збагатили екосистему React, особливо сприяючи швидкому розвитку фреймворків повного стека, таких як Next.js і Remix.
Команда React підтвердила, що наступна версія буде основним випуском з номером версії 19.0.0.
[
Знайомтесь з Differ: Безкоштовна платформа для блогів на основі ШІ
DifferAI — ваш асистент з написання текстів, безшовно інтегрований у текстовий редактор Differ.
Це все працює на основі LLM, спеціально створеного для письменників і блогерів.
differ.blog
](https://differ.blog/differ-ai?source=post_page-----79e2d4b948e4--------------------------------)
Прогнозування нових функцій у версії 19
Тепер давайте подивимося на нові функції, які можуть бути офіційно випущені в версії 19, на основі останніх новин від команди React.
Автоматичне мемоізування
Чи пам’ятаєте React Forget, представлений Хуаном Сюанем на React Conf 2021?
Тепер це реальність.
Це компілятор, який вже був застосований в продуктивному середовищі Instagram. Команда React планує використовувати його на більше платформ у межах Meta та зробити його відкритим кодом у майбутньому.
До використання нового компілятора ми використовували useMemo, useCallback та memo для ручного кешування станів, щоб зменшити непотрібні повторні рендери. Хоча це рішення працює, команда React вважає, що це не ідеальний спосіб, яким вони бачать майбутнє.
Вони шукали рішення, яке дозволить React автоматично та тільки перерендити необхідні частини, коли змінюється стан. Після років зусиль новий компілятор нарешті успішно з'явився.
Новий компілятор React стане функцією «з коробки», що представляє ще один поворотний момент для розробників. Це найбільш очікувана функція версії 19.
Цікаво, що команда React не згадала «React Forget» при представленні нового компілятора, що призвело до гумористичного коментаря від спільноти: Вони забули про React Forget і забули згадати Forget у розділі Forget.🤣
Дії
React Actions були розроблені як частина досліджень команди React для пошуку рішень для передачі даних від клієнта до сервера. Ця функція дозволяє розробникам передавати функцію до елементів DOM (наприклад, \):
\
\
\Пошук\
\
Функція дії може бути синхронною або асинхронною.
При використанні дій (Actions) React керує життєвим циклом подачі даних для розробника. Ми можемо отримати поточний статус і відповідь операцій з формами за допомогою хуків useFormStatus і useFormState.
Дії можна використовувати в сценаріях взаємодії між клієнтом і сервером, таких як зміни в базі даних (додавання, видалення, оновлення даних) та реалізація форм (наприклад, форми входу, реєстраційні форми).
Окрім поєднання з useFormStatus та useFormState, дії також можна використовувати разом з useOptimistic та use server.
Розширення цієї теми в деталях потребувало б тривалої дискусії, але ви можете підписатися на мене, щоб прочитати наступну статтю, де я детально розповім про використання дій.
Директиви: use client і use server
Директиви use client і use server вже деякий час доступні у версії Canary, і нарешті потрапляють у Stable-версію в v19.
Раніше у спільноті було багато нарікань на використання цих двох директив у Next.js в продуктивному середовищі. Їх звинувачували в тому, що вони завдають шкоди екосистемі React, і критикували команду React за те, що вона дозволила Next.js використовувати нестабільні функції заздалегідь. Однак це занепокоєння, в основному, є непотрібним, оскільки ці дві директиви призначені для фреймворків повного стека, таких як Next.js і Remix.
Звичайним розробникам, які використовують React для розробки застосунків, ці директиви навряд чи знадобляться в короткостроковій перспективі.
Якщо ви використовуєте React, а не фреймворк повного стека, вам достатньо розуміти мету цих двох директив: use client і use server позначають «точки поділу» між фронтенд-середовищем і серверною частиною. use client інструктує інструмент пакування генерувати тег <script>, а use server вказує інструменту пакування створити POST-ендпоінт. Ці директиви дозволяють розробникам писати як клієнтський, так і серверний код в одному файлі.
💡 Якщо вам цікаві ці директиви, ви можете прочитати мою іншу статтю: “🌍NextJS v13 Компоненти серверної та клієнтської сторін: найкращі практики"
useOptimistic для оптимістичних оновлень
💡 Оптимістичні оновлення: Стратегія, яка широко використовується в розробці фронтенду для обробки зворотного зв’язку від асинхронних операцій.
Це базується на «оптимістичному» припущенні: що будь-який запит, який ми відправляємо на сервер, буде успішним, і тому ми рендеримо ці зміни на інтерфейсі користувача ще до отримання відповіді від сервера.
Сценарії використання: Лайки, коментарі, додавання/редагування задач тощо.
useOptimistic — це новий хук, який, ймовірно, буде позначений як стабільний у версії v19. useOptimistic дозволяє оптимістично оновлювати інтерфейс під час асинхронних операцій (таких як мережеві запити). Він приймає поточний стан і функцію оновлення як параметри, повертаючи копію стану, яка може відрізнятися під час асинхронної операції.
Вам потрібно надати функцію, яка приймає поточний стан і введення операції та повертає оптимістичний стан, який буде використовуватися під час очікування на операцію.
Ось як це визначено:
const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);
// або
const [optimisticState, addOptimistic] = useOptimistic(
state,
// updateFn
(currentState, optimisticValue) => {
// об'єднати і повернути новий стан з оптимістичним значенням
}
);
Параметри
state: Початкове значення стану та значення, яке повертається, коли операції не виконуються.
updateFn(currentState, optimisticValue): Функція, яка приймає поточний стан і оптимістичне значення, передане до addOptimistic, і повертає результат оптимістичного стану. updateFn отримує два параметри: currentState та optimisticValue.
Повернуте значення буде об'єднаним значенням currentState та optimisticValue.
Повернуті значення
optimisticState: Згенерований оптимістичний стан. Коли операція виконується, він дорівнює значенню, повернутому функцією updateFn; коли операція не виконується, він дорівнює state.
addOptimistic: Це функція диспетчера, яка викликається під час оптимістичного оновлення.
Він приймає один параметр, optimisticValue (будь-якого типу), і викликає updateFn з state та optimisticValue.
Більш детальний приклад:
import { useOptimistic } from 'react';
function AppContainer() {
const [state, setState] = useState(initialState); // Припустимо, є початковий стан
const [optimisticState, addOptimistic] = useOptimistic(
state,
// updateFn
(currentState, optimisticValue) => {
// Об'єднуємо і повертаємо: новий стан, оптимістичне значення
return { …currentState, …optimisticValue };
}
);
// Припустимо, є асинхронна операція, наприклад, відправка форми
function handleSubmit(data) {
// Використовуємо оптимістичне оновлення до фактичної подачі даних
addOptimistic({ data: 'оптимістичні дані' });
// Потім виконуємо асинхронну операцію
fetch('/api/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then(response => response.json())
.then(realData => {
// Оновлюємо стан з фактичними даними
setState(prevState => ({ …prevState, data: realData }));
});
}
return (
// Відображаємо інтерфейс, використовуючи optimisticState
{optimisticState.data}
);
}
useOptimistic відображає очікуваний результат під час асинхронної операції, і як тільки операція завершується, а стан оновлюється, він відображає реальний результат (незалежно від того, успішний він чи ні).
Інші оновлення
Окрім цього, учасник команди React Ендрю Кларк також розкрив, що в 2024 році будуть наступні зміни:
🟡 forwardRef → ref є пропсом: Спрощення способу посилань на внутрішні елементи або компоненти в дочірньому компоненті, трактуючи ref як звичайний пропс.
🟡 React.lazy → RSC, promise-as-child: Покращені можливості для розділення коду та ледачого завантаження.
🟡 useContext → use(Context): Новий спосіб доступу до Context.
🟡 throw promise → use(promise): Покращення обробки асинхронного завантаження даних.
🟡 \ → : Спрощення використання провайдерів контексту.
Однак офіційний сайт React ще не надав детальної інформації про ці потенційні оновлення.
👉 Якщо ви веб-розробник, навчання тому, як справлятися з великим трафіком на вашому веб-додатку, є критично важливим. Дізнайтеся, як масштабувати вашу базу даних до мільйонів запитів на секунду за допомогою цього посібника.
Висновок
React має великі плани. Вони прагнуть стерти межу між фронтендом і бекендом, зберігаючи свою перевагу в можливостях клієнтської сторони та надаючи інфраструктуру для повноцінних стекових фреймворків спільноти.
Я дуже ціную їхній підхід, оскільки подолання бар'єрів між фронтендом і бекендом може допомогти фронтенд-інженерам прориватися через кар'єрні стелі.
React 19 стане ще однією знаковою версією після введення хуків. Ендрю Кларк сказав, що нову версію буде випущено в березні або квітні.
Давайте почекаємо та побачимо!
Про мене
Я фронтенд-інженер, практик повного стека та прихильник інтеграції ШІ.
Я працюю над проєктами на Next.js і Node.js, ділюсь знаннями в цих сферах.
Twitter: https://twitter.com/weijunext
Github: https://github.com/weijunext
Блог: https://weijunext.com/
👉 Дізнайтесь більше про те, як React 19 стає справжнім проривом у веб-розробці:
[
React 19: Прорив для сучасної веб-розробки
React, популярна JavaScript бібліотека для створення інтерфейсів користувача, збирається зробити великий крок уперед зі своїм…
differ.blog
](https://differ.blog/p/react-19-a-game-changer-for-modern-web-development-9f365f?source=post_page-----79e2d4b948e4--------------------------------)
Stackademic 🎓
Дякую за те, що прочитали до кінця.
Перед тим як йти:
- Будь ласка, розгляньте можливість аплодувати та підписатися на автора! 👏
- Слідкуйте за нами X | LinkedIn | YouTube | Discord
- Відвідайте наші інші платформи: In Plain English | CoFeed | Differ
- Більше контенту на Stackademic.com
Перекладено з: React 19 is Coming, What’s New?