React experimental_useFormState: Покращене керування формами в сучасних застосунках

Керування формами є ключовим аспектом створення інтерактивних та зручних для користувача вебзастосунків. React, зі своєю компонентною архітектурою, надає кілька способів обробки форм. Впровадження серверних дій (Server Actions) та подальші вдосконалення, як-от experimental_useFormState, революціонізують підхід розробників до обробки форм, особливо при взаємодії з логікою на стороні сервера. Цей експериментальний хук, що є частиною поточних досліджень React у сфері серверних компонентів та дій, пропонує оптимізований та ефективніший підхід до керування станом форми та обробки помилок.

Що таке experimental_useFormState?

experimental_useFormState — це хук React, розроблений для спрощення керування формами, особливо в сценаріях, де ви взаємодієте з серверними діями. Він надає механізм для передачі стану форми між клієнтом і сервером, що забезпечує більш плавний користувацький досвід та покращену обробку помилок. Він безпосередньо інтегрується з серверними компонентами React та серверними діями, дозволяючи ефективно отримувати та змінювати дані.

Перш ніж заглиблюватися в деталі, важливо зазначити, що цей хук наразі є експериментальним. Це означає, що API може змінитися в майбутніх випусках. Тому рекомендується використовувати його з обережністю в продакшн-середовищах і стежити за останньою документацією React.

Чому варто використовувати experimental_useFormState?

Традиційне керування формами в React часто передбачає керування станом форми локально за допомогою хуків, як-от useState, або бібліотек, таких як Formik чи React Hook Form. Хоча ці підходи є ефективними для валідації на стороні клієнта та простих взаємодій з формами, вони можуть стати громіздкими при роботі з серверними операціями, такими як надсилання даних та обробка помилок. Ось кілька переваг, які пропонує experimental_useFormState:

• Спрощена інтеграція з серверними діями: Хук значно полегшує підключення ваших форм до серверних дій. Він бере на себе складність передачі даних на сервер, керування станом завантаження та відображення помилок на стороні сервера.
• Покращений користувацький досвід: Передаючи стан форми між клієнтом і сервером, experimental_useFormState забезпечує більш чутливий та інтерактивний користувацький досвід. Наприклад, ви можете надавати негайний зворотний зв'язок користувачеві, поки форма обробляється на сервері.
• Централізована обробка помилок: Хук надає централізований механізм для обробки помилок валідації форми як на клієнті, так і на сервері. Це спрощує відображення помилок і забезпечує послідовний користувацький досвід.
• Прогресивне поліпшення: Використання серверних дій у поєднанні з experimental_useFormState підтримує прогресивне поліпшення. Форма може функціонувати навіть якщо JavaScript вимкнено, забезпечуючи базовий досвід для всіх користувачів.
• Зменшення шаблонного коду: Порівняно з традиційними методами керування формами, experimental_useFormState зменшує кількість необхідного шаблонного коду, роблячи ваші компоненти чистішими та легшими для підтримки.

Як використовувати experimental_useFormState

Щоб використовувати experimental_useFormState, спочатку потрібно переконатися, що ви використовуєте версію React, яка підтримує серверні дії (React 18 або новіша). Вам також потрібно буде увімкнути експериментальні функції у вашій конфігурації React. Зазвичай це включає налаштування вашого бандлера (наприклад, Webpack, Parcel) для увімкнення експериментальних функцій.

Ось базовий приклад використання experimental_useFormState:

Приклад: проста контактна форма

Створимо просту контактну форму з полями для імені, електронної пошти та повідомлення. Ми будемо використовувати experimental_useFormState для обробки надсилання форми та відображення будь-яких помилок, що виникають.

1. Визначте серверну дію:

Спочатку нам потрібно визначити серверну дію, яка буде обробляти надсилання форми. Ця дія отримає дані форми та виконає будь-яку необхідну валідацію та обробку на стороні сервера (наприклад, надсилання електронного листа).

// server-actions.js 'use server'; import { experimental_useFormState as useFormState } from 'react'; async function submitForm(prevState, formData) { // Симуляція валідації на стороні сервера const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); if (!name) { return { error: 'Ім\'я є обов\'язковим' }; } if (!email) { return { error: 'Електронна пошта є обов\'язковою' }; } if (!message) { return { error: 'Повідомлення є обов\'язковим' }; } // Симуляція надсилання електронного листа try { await new Promise(resolve => setTimeout(resolve, 1000)); // Симуляція затримки мережі console.log('Форму успішно надіслано!'); return { success: true, message: 'Дякуємо за ваше повідомлення!' }; } catch (error) { console.error('Помилка надсилання листа:', error); return { error: 'Не вдалося надіслати повідомлення. Будь ласка, спробуйте ще раз.' }; } } export default submitForm;

2. Створіть React-компонент:

Тепер створимо React-компонент, який буде рендерити форму та використовувати experimental_useFormState для керування станом форми.

// ContactForm.jsx 'use client'; import { experimental_useFormState as useFormState } from 'react'; import submitForm from './server-actions'; function ContactForm() { const [state, formAction] = useFormState(submitForm, null); return (

Ім'я:

Електронна пошта:

Повідомлення:

Надіслати {state?.error &&

{state.error}

} {state?.success &&

{state.message}

}

); } export default ContactForm;

Пояснення:

• 'use client';: Ця директива повідомляє React, що це клієнтський компонент. Це необхідно, оскільки experimental_useFormState можна використовувати в клієнтських компонентах для взаємодії з серверними діями.
• useFormState(submitForm, null): Цей хук приймає два аргументи: серверну дію, яку потрібно виконати (submitForm), та початковий стан (в даному випадку null). Він повертає масив, що містить поточний стан форми та функцію для запуску серверної дії. Повернений formAction потрібно передати в пропс action форми.
• form action={formAction}: Це прив'язує серверну дію до надсилання форми. Коли форма буде надіслана, дія submitForm буде виконана на сервері.
• state?.error: Це відображає будь-які повідомлення про помилки, повернуті з серверної дії.
• state?.success: Це відображає будь-які повідомлення про успіх, повернуті з серверної дії.
• state?.pending: Це автоматично встановлюється в true під час виконання серверної дії, що дозволяє вимкнути кнопку надсилання.

Детальний розбір коду

Розберемо код крок за кроком, щоб зрозуміти, як він працює.

Серверна дія (server-actions.js)

• 'use server';: Ця директива позначає файл як такий, що містить серверні дії. Це вкрай важливо для React, щоб зрозуміти, що функції в цьому файлі повинні виконуватися на сервері.
• async function submitForm(prevState, formData): Це визначає функцію серверної дії. Вона приймає два аргументи: prevState (попередній стан форми) та formData (екземпляр FormData, що містить дані форми).
• formData.get('name'), formData.get('email'), formData.get('message'): Ці рядки витягують дані форми з об'єкта FormData. Аргументом для get() є атрибут name відповідного поля введення у формі.
• Валідація на стороні сервера: Код виконує базову валідацію на стороні сервера, щоб переконатися, що всі необхідні поля заповнені. Якщо будь-які поля відсутні, він повертає об'єкт помилки клієнту.
• Симуляція надсилання листа: Код симулює надсилання електронного листа за допомогою await new Promise(resolve => setTimeout(resolve, 1000)). Це створює затримку в 1 секунду для імітації мережевої затримки. У реальному застосунку ви б замінили це на справжню логіку надсилання листів (наприклад, за допомогою Nodemailer або SendGrid).
• Обробка помилок: Код містить блок try...catch для обробки будь-яких помилок, що виникають під час процесу надсилання листа. Якщо виникає помилка, він записує її в консоль і повертає об'єкт помилки клієнту.
• Повернення стану: Серверна дія повертає об'єкт, що містить або повідомлення про помилку, або повідомлення про успіх. Цей об'єкт стає новим станом, який передається клієнтському компоненту через хук useFormState.

Клієнтський компонент (ContactForm.jsx)

• 'use client';: Ця директива вказує, що цей компонент є клієнтським і може використовувати хуки на стороні клієнта, як-от useState та useEffect. Це необхідно для використання хуків та взаємодії з DOM.
• const [state, formAction] = useFormState(submitForm, null);: Цей рядок викликає хук experimental_useFormState. Він передає серверну дію submitForm як перший аргумент і початковий стан (null) як другий. Хук повертає масив, що містить поточний стан форми (state) та функцію для запуску серверної дії (formAction).
• <form action={formAction}>: Це встановлює атрибут action форми на функцію formAction. Коли форма буде надіслана, ця функція буде викликана, що запустить серверну дію submitForm.
• <input type="text" id="name" name="name" />, <input type="email" id="email" name="email" />, <textarea id="message" name="message"></textarea>: Це поля введення для форми. Атрибути name цих полів важливі, оскільки вони визначають, як дані будуть доступні в серверній дії за допомогою formData.get('name'), formData.get('email') та formData.get('message').
• <button type="submit" disabled={state?.pending}>Надіслати</button>: Це кнопка надсилання форми. Атрибут disabled={state?.pending} вимикає кнопку, поки форма надсилається на сервер, запобігаючи багаторазовому надсиланню форми користувачем.
• {state?.error && <p style={{ color: 'red' }}>{state.error}</p>}: Це умовно рендерить повідомлення про помилку, якщо в стані форми є помилка. Повідомлення про помилку відображається червоним кольором.
• {state?.success && <p style={{ color: 'green' }}>{state.message}</p>}: Це умовно рендерить повідомлення про успіх, якщо форма була успішно надіслана. Повідомлення про успіх відображається зеленим кольором.

Розширене використання та міркування

Хоча наведений вище приклад демонструє базове використання experimental_useFormState, є кілька інших аспектів, які слід враховувати при його використанні в більш складних застосунках.

Оптимістичні оновлення

Ви можете реалізувати оптимістичні оновлення, щоб забезпечити більш чутливий користувацький досвід. Оптимістичні оновлення полягають у негайному оновленні UI після того, як користувач надсилає форму, припускаючи, що серверна дія буде успішною. Якщо серверна дія не вдається, ви можете скасувати оновлення та відобразити повідомлення про помилку.

// Приклад оптимістичних оновлень async function submitForm(prevState, formData) { // Оптимістично оновити UI // (Зазвичай це передбачає оновлення стану списку або таблиці) const id = Date.now(); // Тимчасовий ID return { optimisticUpdate: { id: id, name: formData.get('name'), email: formData.get('email'), } } } // У вашому клієнтському компоненті: const [state, formAction] = useFormState(submitForm, null); // Стан, де ви рендерите оптимістичне оновлення const [items, setItems] = useState([]); useEffect(()=>{ if (state && state.optimisticUpdate) { setItems(prev => [...prev, state.optimisticUpdate]); } }, [state])

У цьому спрощеному прикладі серверна дія повертає властивість optimisticUpdate. У клієнтському компоненті ми потім витягуємо її та використовуємо для додавання до масиву, що рендериться в нашому застосунку. Наприклад, це може представляти додавання нового коментаря до списку коментарів у блозі.

Обробка помилок

Ефективна обробка помилок є ключовою для хорошого користувацького досвіду. experimental_useFormState полегшує обробку помилок, що виникають під час надсилання форми. Ви можете відображати повідомлення про помилки користувачеві та надавати вказівки щодо їх виправлення.

Ось кілька найкращих практик для обробки помилок:

• Надавайте чіткі та конкретні повідомлення про помилки: Повідомлення про помилки повинні бути чіткими, лаконічними та конкретними щодо помилки, яка сталася. Уникайте загальних повідомлень про помилки, як-от «Сталася помилка».
• Відображайте повідомлення про помилки біля відповідних полів введення: Відображайте повідомлення про помилки біля полів введення, які спричинили помилки. Це полегшує користувачеві розуміння, які поля потрібно виправити.
• Використовуйте візуальні підказки для виділення помилок: Використовуйте візуальні підказки, такі як червоний текст або рамки, щоб виділити поля введення, які мають помилки.
• Надавайте пропозиції щодо виправлення помилок: Якщо можливо, надавайте пропозиції щодо виправлення помилок. Наприклад, якщо користувач вводить недійсну адресу електронної пошти, запропонуйте правильний формат.

Аспекти доступності

При створенні форм важливо враховувати доступність, щоб ваші форми були зручними для людей з обмеженими можливостями. Ось деякі аспекти доступності, які слід пам'ятати:

• Використовуйте семантичний HTML: Використовуйте семантичні HTML-елементи, такі як <label>, <input> та <textarea> для структурування ваших форм. Це полегшує допоміжним технологіям розуміння структури форми.
• Надавайте мітки для всіх полів введення: Використовуйте елемент <label> для надання міток для всіх полів введення. Атрибут for елемента <label> повинен відповідати атрибуту id відповідного поля введення.
• Використовуйте ARIA-атрибути: Використовуйте ARIA-атрибути для надання додаткової інформації про елементи форми допоміжним технологіям. Наприклад, ви можете використовувати атрибут aria-required, щоб вказати, що поле введення є обов'язковим.
• Забезпечте достатній контраст: Переконайтеся, що між текстом і фоновим кольором є достатній контраст. Це полегшує читання форми людям зі слабким зором.
• Тестуйте з допоміжними технологіями: Тестуйте свої форми з допоміжними технологіями, такими як екранні читачі, щоб переконатися, що вони зручні для людей з обмеженими можливостями.

Інтернаціоналізація (i18n) та локалізація (l10n)

При створенні застосунків для глобальної аудиторії інтернаціоналізація (i18n) та локалізація (l10n) є критично важливими. Це передбачає адаптацію вашого застосунку до різних мов, культур та регіонів.

Ось деякі міркування щодо i18n та l10n при використанні experimental_useFormState:

• Локалізуйте повідомлення про помилки: Локалізуйте повідомлення про помилки, які відображаються користувачеві. Це гарантує, що повідомлення про помилки відображаються бажаною мовою користувача.
• Підтримуйте різні формати дат та чисел: Підтримуйте різні формати дат та чисел залежно від локалі користувача.
• Обробляйте мови з письмом справа наліво: Якщо ваш застосунок підтримує мови з письмом справа наліво (наприклад, арабська, іврит), переконайтеся, що макет форми правильно відображається цими мовами.
• Використовуйте бібліотеку перекладу: Використовуйте бібліотеку перекладу, таку як i18next або react-intl, для керування вашими перекладами.

Наприклад, ви можете використовувати словник для зберігання повідомлень про помилки, а потім шукати їх на основі локалі користувача.

// Приклад з використанням i18next import i18next from 'i18next'; i18next.init({ resources: { en: { translation: { "name_required": "Name is required", "email_required": "Email is required", } }, uk: { translation: { "name_required": "Ім'я є обов'язковим", "email_required": "Електронна пошта є обов'язковою", } } }, lng: 'uk', fallbackLng: 'en', interpolation: { escapeValue: false // react вже захищає від xss } }); // У вашій серверній дії: if (!name) { return { error: i18next.t("name_required") }; }

Цей приклад використовує i18next для керування перекладами. Функція i18next.t() використовується для пошуку перекладеного повідомлення про помилку на основі локалі користувача.

Глобальні аспекти та найкращі практики

При розробці вебзастосунків для глобальної аудиторії необхідно враховувати кілька ключових аспектів для забезпечення безперебійного та інклюзивного користувацького досвіду. Ці міркування охоплюють різні сфери, включаючи доступність, культурну чутливість та оптимізацію продуктивності.

Часові пояси

При роботі з датами та часом вкрай важливо правильно обробляти часові пояси. Користувачі можуть перебувати в різних часових поясах, тому вам потрібно переконатися, що дати та час відображаються в локальному часовому поясі користувача.

Ось кілька найкращих практик для обробки часових поясів:

• Зберігайте дати та час у UTC: Зберігайте дати та час у UTC (Всесвітній координований час) у вашій базі даних. Це забезпечує узгодженість дат та часу в усіх часових поясах.
• Використовуйте бібліотеку для часових поясів: Використовуйте бібліотеку для часових поясів, таку як Moment.js або Luxon, для перетворення дат та часу в локальний часовий пояс користувача.
• Дозвольте користувачам вказувати свій часовий пояс: Дозвольте користувачам вказувати свій часовий пояс у налаштуваннях профілю. Це дозволяє відображати дати та час у їхньому бажаному часовому поясі.

Валюти

Якщо ваш застосунок працює з фінансовими транзакціями, вам потрібно підтримувати різні валюти. Користувачі можуть перебувати в різних країнах з різними валютами.

Ось кілька найкращих практик для обробки валют:

• Зберігайте ціни в одній валюті: Зберігайте ціни в одній валюті (наприклад, USD) у вашій базі даних.
• Використовуйте бібліотеку для конвертації валют: Використовуйте бібліотеку для конвертації валют, щоб конвертувати ціни в локальну валюту користувача.
• Відображайте ціни з правильним символом валюти: Відображайте ціни з правильним символом валюти залежно від локалі користувача.
• Надайте користувачам можливість вибирати свою валюту: Дозвольте користувачам вибирати бажану валюту.

Культурна чутливість

Важливо бути культурно чутливим при розробці вебзастосунків для глобальної аудиторії. Це означає усвідомлення різних культурних норм і цінностей та уникнення будь-якого контенту, який може бути образливим або нечутливим.

Ось кілька порад щодо культурної чутливості:

• Уникайте використання ідіом або сленгу: Уникайте використання ідіом або сленгу, які можуть бути незрозумілими для людей з інших культур.
• Будьте обережні із зображеннями та символами: Будьте обережні із зображеннями та символами, які ви використовуєте у своєму застосунку. Деякі зображення та символи можуть мати різне значення в різних культурах.
• Поважайте різні релігійні переконання: Поважайте різні релігійні переконання та уникайте будь-якого контенту, який може вважатися образливим для релігійних груп.
• Усвідомлюйте різні культурні норми: Усвідомлюйте різні культурні норми та цінності. Наприклад, в деяких культурах вважається неввічливим встановлювати прямий зоровий контакт.

Оптимізація продуктивності для глобальної аудиторії

Користувачі по всьому світу мають різну швидкість інтернет-з'єднання та можливості пристроїв. Оптимізація вашого застосунку для продуктивності є ключовою для забезпечення плавного та чутливого досвіду для всіх користувачів, незалежно від їхнього місцезнаходження чи пристрою.

• Мережі доставки контенту (CDN): Використовуйте CDN для розповсюдження активів вашого застосунку (наприклад, зображень, JavaScript, CSS) на сервери по всьому світу. Це зменшує затримку для користувачів, які знаходяться далеко від вашого вихідного сервера.
• Оптимізація зображень: Оптимізуйте зображення, стискаючи їх та використовуючи відповідні формати файлів (наприклад, WebP). Це зменшує розмір файлів зображень та покращує час завантаження сторінки.
• Розділення коду (Code Splitting): Використовуйте розділення коду, щоб розбити ваш застосунок на менші частини, які можна завантажувати за вимогою. Це зменшує початковий час завантаження застосунку.
• Кешування: Використовуйте кешування для зберігання часто використовуваних даних у браузері або на сервері. Це зменшує кількість запитів, які застосунок повинен робити до сервера.
• Мініфікація та бандлінг: Мініфікуйте та об'єднуйте ваші файли JavaScript та CSS, щоб зменшити їх розмір.

Альтернативи experimental_useFormState

Хоча experimental_useFormState пропонує переконливий підхід до керування формами з серверними діями, важливо знати про альтернативні рішення, особливо враховуючи, що він все ще знаходиться в експериментальній фазі. Ось кілька популярних альтернатив:

• React Hook Form: React Hook Form — це продуктивна та гнучка бібліотека для форм, яка використовує неконтрольовані компоненти. Вона відома своїми мінімальними перерендерами та чудовою продуктивністю. Вона добре інтегрується з бібліотеками валідації, такими як Yup та Zod.
• Formik: Formik — це популярна бібліотека для форм, яка спрощує керування станом форми, валідацію та надсилання. Вона надає API вищого рівня, ніж React Hook Form, і є хорошим вибором для складних форм.
• Redux Form: Redux Form — це бібліотека для форм, яка інтегрується з Redux. Це хороший вибір для застосунків, які вже використовують Redux для керування станом.
• Використання useState та useRef: Для простих форм ви також можете керувати станом форми безпосередньо за допомогою хука useState від React та отримувати доступ до значень форми за допомогою useRef. Цей підхід вимагає більше ручної обробки, але може бути доцільним для базових форм, де ви хочете мати детальний контроль.

Висновок

experimental_useFormState є значним кроком вперед у керуванні формами в React, особливо в поєднанні з серверними діями. Він пропонує спрощений та ефективніший спосіб обробки стану форми, взаємодії з логікою на стороні сервера та покращення користувацького досвіду. Хоча він все ще знаходиться в експериментальній фазі, його варто дослідити для нових проєктів та розглянути для існуючих у міру його розвитку. Не забувайте стежити за останньою документацією React та найкращими практиками, щоб переконатися, що ви використовуєте хук ефективно та відповідально.

Розуміючи принципи, викладені в цьому посібнику, та адаптуючи їх до ваших конкретних потреб, ви можете створювати надійні, доступні та глобально орієнтовані вебзастосунки, які надають чудовий користувацький досвід користувачам по всьому світу. Застосування цих найкращих практик не тільки покращує зручність використання ваших застосунків, але й демонструє прихильність до інклюзивності та культурної чутливості, що в кінцевому підсумку сприяє успіху та охопленню ваших проєктів у глобальному масштабі.

Оскільки React продовжує розвиватися, такі інструменти, як experimental_useFormState, відіграватимуть все більш важливу роль у створенні сучасних, рендерених на сервері React-застосунків. Розуміння та використання цих інструментів буде важливим для того, щоб залишатися на передовій та надавати винятковий користувацький досвід.