Сярод версій гульняў онлайн call of duty можна знайсці мноства займальных і дасціпных сюжэтаў, а апошняй навінкай, выпушчанай у канцы восені гэтага года, стала гульня Call of Duty: Ghost. За апошнія 6 гадоў ў распрацоўцы фронтэнду — ад будаўніцтва складаных формавых сістэм да інтэграцыі інструментаў AI ў SDG — я напісаў, дэбагваў і перапрацаваў больш формы кода, чым я хацеў бы прызнаць. Калі вы хочаце падзяліцца сваёй думкай з майстрам, рабіце гэта максімальна ветліва. У гэтай артыкуле, я буду гуляць вас праз звычайныя барацьбы распрацоўшчыкаў, калі гаварыць з формамі - і як У нас функцыяну­юць таварыствы “Разумнікі і разумніцы”, “Даследчык”, а таксама адзіная ў Магілёўскай вобласці астранамічная пляцоўка. React 19 Звычайныя выклікі ў форме кіравання Давайце пачнём з больных пунктаў, якія кожны распрацоўшчык React сутыкнуўся хочацца раз. 1 Кодэкс працэсу кожнага Як звычайна, пачынаецца праверка такога статусу: const [name, setName] = useState('');
const [surname, setSurname] = useState('');
const [error, setError] = useState(null);

function handleSubmit(event) {
  event.preventDefault();
}
 Гэта проста — і выдатна для маленькіх форм. Але, як толькі вы скаліруеце, вы скончыце задыхацца ў паўтараючых дзяржаўных хаках, ручных рэсэсах і бесконечных Звонкі Папярэдні Тэкст ( Папярэдні Тэкст ( Размова сапраўды вельмі важная — мы ж усе цудоўна разумеем, што любы, самы лепшы дэкрэт можна звесці на нішто практыкай прымянення. 2 Вынікі ў Props Калі ваша форма не толькі адзін кампанент, але іерархія ўнішчаных кампанентаў, вы ўвесь час праходзяць пропісы праз кожны ўзровень: <Form>
  <Field error={error} value={name} onChange={setName}>
    <Input />
  </Field>
</Form>
 Статус, няправільнасць, загрузіць знамяні — усё буралася па некалькіх пластах. Гэта не толькі наблытае код, але робіць падтрымку і рэфактарызацыю больнымі. Оптымістычныя абнаўлення важныя Чаму вы ніколі не спрабавалі рэалізаваць мануальныя абнаўлення? Гэта, калі вы паказваеце «успех» змены ў UI адразу пасля выкарыстання акцыі карыстальніка — перш чым сервер фактычна пацвердзіць яго. Гэта выглядае проста, але кіраванне роллбак-лагікай, калі запыт не спрацуе, можа быць сапраўдным головным болем. Дзе вы захоўваеце часовы эфектыўны стан? Як вы злучаецеся і затым руляць яго назад? React 19 ўводзіць нешта значна больш чыстае для гэтага. UseActionState: новы спосаб кіравання пастаўкамі формы Адзін з самых цікавых дастаў у React 19 з'яўляецца ==*useActionState *==hook. У нас функцыяну­юць таварыствы “Разумнікі і разумніцы”, “Даследчык”, а таксама адзіная ў Магілёўскай вобласці астранамічная пляцоўка. const [state, actionFunction, isPending] = useActionState(fn, initialState);
 Вось што адбываецца: 
 
 
 
 
 
  — your async function that handles the form submission fn 
 
  — the initial value of your form state initialState 
 
  — a built-in flag showing whether a submission is in progress isPending ООН Першапачатковы Іспанія Як гэта працуе Функцыя Async перайшла на Абодвух аргументаў адразу два: Выкарыстанне Выкарыстанне const action = async (previousState, formData) => {
  const message = formData.get('message');

  try {
    await sendMessage(message);
    return { success: true, error: null };
  } catch (error) {
    return { success: false, error };
  }
};
 You then hook it into your form like this: const [state, actionFunction, isPending] = useActionState(action, {
  success: false,
  error: null,
});

return <form action={actionFunction}> ... </form>;
 Зараз, калі форма пастаўлена, React аўтаматычна: 
 
 
 
 Загрузіць Async Action Актуализации ***state ***з вяртаючым выніку Сцягнуць працэс пастаўкі праз isPending Акцыя Акцыя Іспанія Іспанія Ніякіх рукапісаў або рэстаўрацыя логікі — React займаецца ўсё гэта. ️ Забяспечыць, прымаць удзел у бяспецы, Забяспечыць, прымаць удзел у бяспецы, Забяспечыць, прымаць удзел у бяспецы, A note about startTransition If you decide to trigger the form action manually (e.g., outside of the form’s action prop), wrap it with  : startTransition стартаў const handleSubmit = async (formData) => {
  await doSomething();

  startTransition(() => {
    actionFunction(formData);
  });
};
 І калі твая першая кніга добра прадавалася, не факт, што так жа будзе прадавацца другая. Не будзе правільна апублікавана. Іспанія Чаму вы будзеце любіць выкарыстоўвацьActionState 
 
 
 
 
 ✅ Няма патрэбы для многіх ==*UseState *==Hooks ✅ Аўтаматычны стан чакання (isPending) ✅ Няма event.preventDefault() патрабуецца ✅ Auto form reset пасля паспяховай пастаўкі Іспанія Іспанія Вынікі пошуку - PreventDefault Форма логікі адчуваецца дэкларацыйным зноў — проста апісвайце дзеянне, а не кадраванне. useFormStatus: no more props drilling Вынікі пошуку - no more props Другая моцная новая гульня — — вырашае праблему спрыжкі бурэння ў форме дрэва. Выкарыстанне import { useFormStatus } from 'react-dom';

const { pending, data, method, action } = useFormStatus();
 Можна назваць гэта гукам І зноў з’явіліся на стадыёне бацькі. inside any child component of a form Example function SubmitButton() {
  const { pending, data } = useFormStatus();
  const message = data ? data.get('message') : '';

  return (
    <button type="submit" disabled={pending}>
      {pending ? `Sending ${message}...` : 'Send'}
    </button>
  );
}

function MessageForm() {
  return (
    <form action={submitMessage}>
      <SubmitButton />
    </form>
  );
}
 
 
 Памятаеце, што SubmitButton можа дасягнуць дадзеных формы і няправільнага статусу — без ніякіх пропісаў. Памятаеце, што SubmitButton можа дасягнуць дадзеных формы і няправільнага статусу — без ніякіх пропісаў. Загрузіць Button Gotchas to remember Памятаеце, што памятае 
 
 
 
 І неяк падумалі: а чаму б не стварыць клуб для другой лігі, каб у нейкай ступені яго адрадзіць. Гэта не будзе рэагаваць на формы, якія выкарыстоўваюць назаўсёды адпраўкі — гэта павінна быць форма з ***action ***prop. ⚠️ На дадзены момант, FormMethod надрукі ўнутры кнопкаў або ўпаў (напрыклад, formMethod=”get”) не працуюць, як чакаецца — форма ўсё яшчэ выкарыстоўвае асноўны метад. Я адкрыў__эфект на GitHub__, каб выконваць гэты бг. Узнагароды Форма Вынікі пошуку - get Чаму нешта важнае Выключае проп бурэння ў форме дрэва Гэта могуць быць курсы, факультатывы. 💡 Затрымае кампаненты адключаны і чысціні Вынікі пошуку - declarative optimistic UI І нарэшце, давайце размаўляем аб адным з маіх улюбёных дастаў — . выкарыстанне выкарыстанне Гэта дае ўбудаваную падтрымку для аптымістычных абнаўленняў UI, што робіць інтэр'ю карыстальніка адчуваць мгновенна і плаўна. Праблема Калі вы хочаце падзяліцца сваёй думкай з майстрам, рабіце гэта максімальна ветліва. Традыцыйна, вы б гуляць паміж локальным станам, ролбэк логікі, і асінк запрашэнняў. Рашэнне з , гэта становіцца дэкларацыйным і мінімальным: выкарыстанне выкарыстанне выкарыстанне const [optimisticMessages, addOptimisticMessage] = useOptimistic(
  messages,
  (state, newMessage) => [newMessage, ...state]
);

const formAction = async (formData) => {
  addOptimisticMessage(formData.get('message'));
  try {
    await sendMessage(formData);
  } catch {
    console.error('Failed to send message');
  }
};
 Калі запрашэнне сервера не спрацуе, React аўтаматычна вяртаецца назад у папярэдні стан. Калі гэта будзе зроблена, то лепшыя змены застануцца. Важнае правіла: не мутаваць Функцыя абнаўлення, якую вы перакладваеце на useOptimistic, павінна быць : pure Гэта няправільна: (prev, newTodo) => {
  prev.push(newTodo);
  return prev;
}
 Гэта правільна: (prev, newTodo) => [...prev, newTodo];
 
 
 Увесь час набывайце новы аб’ект або матрац. Увесь час набывайце новы аб’ект або матрац. Загрузіць StartTransition — Калі вы шукаеце герояў з жыцця для вашых мадэлей, вы шукаеце ў іх вобразы? Загрузіць іх у : Акцыя стартаў Акцыя стартаў startTransition(() => {
  addOptimisticMessage(formData.get('message'));
  sendMessage(formData);
});
 Гэта азначае таксама, што час выключэньня з базы скончыўся і трэба прадставіць новыя дакумэнты. Вынікі пошуку - optimistic 
 
 
 
 
 Часцей за ўсё Feedback Аўтаматычны Rollback на няправільнасці Чыстыя компоненты логікі Менш загружаных дзяржаў патрэбны Гэта рэпрэсіўны механізм, які працуе на дыктатуру, але мы не можам гарантаваць, што ваш працэс неаднаразова назіраць. Высновы React 19 значна папростуе кіраванне формамі — і, упершыню, гэта не пра новую сінтаксу, але пра рэальныя паляпшэння развіцця. Вось хуткае агляд таго, што выкарыстоўваць і калі: 
 
 
 
 
 
 
 
 
 
 Goal 
 React 19 Tool 
 
 
 
 Access form submission result 
 useActionState 
 
 
 
 Track pending submission 
  from   or   from  isPending useActionState pending useFormStatus 
 
 
 
 Access form state deep in children 
 useFormStatus 
 
 
 
 Handle optimistic UI updates 
 useOptimistic Access form submission result useActionState Выкарыстанне Track pending submission  from   or   from  isPending useActionState pending useFormStatus Іспанія Выкарыстанне Сцягнуць Выкарыстанне Access form state deep in children useFormStatus Выкарыстанне Handle optimistic UI updates useOptimistic выкарыстанне Гэта рэпрэсіўны механізм, які працуе на дыктатуру і дыктатуру. Калі вы хочаце падзяліцца сваёй думкай з майстрам, рабіце гэта максімальна ветліва. Далучайцеся да каманды, якая формуе будучыню вэб-прадуктаў з React 19! на Мы працуем з ільдом трэці год, і толькі зараз, здаецца, пачынаем разумець важныя моманты. Група Social Discovery 
 
 Напісанне Sergey Levkovich, Senior Frontend Developer у Social Discovery Group. Напісанне Sergey Levkovich, Senior Frontend Developer у Social Discovery Group. Напісанне Старшыня прэзыдэнта на . Сяргей Леўкавіч Група Social Discovery Сяргей Леўкавіч Сяргей Леўкавіч Група Social Discovery Група Social Discovery

This story contains new, firsthand information uncovered by the writer.

See how we create Social Life 3.0 👉

Social Discovery Group Earns the Great Place To Work® Certification in the USA!

Swipe Away Loneliness: 2024 Dating Trends Forecast

Гэта аўдыя зроблена на мове арыгіналу гісторыі!

React 19: Новыя інструменты для працы з формамі

About Author

КАМЕНТАРЫІ

ВЕСІЦЬ БІРКІ

ГЭТЫ АРТЫКУЛ БЫЎ ПРАДСТАЎЛЕНЫ Ў

Related Stories

HackerNoon Releases “The Editing Protocol” - Technical Documentation for Digital Publishing at Scale

Flaunt Your Job Title on Your Profile Page

The World is Finally Ready for a New Internet

Zero-Knowledge, Zero Limits: The Vision Behind Aleo's New Blockchain Paradigm

HackerNoon Releases “The Editing Protocol” - Technical Documentation for Digital Publishing at Scale

Flaunt Your Job Title on Your Profile Page

The World is Finally Ready for a New Internet

Zero-Knowledge, Zero Limits: The Vision Behind Aleo's New Blockchain Paradigm

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps