Form element is the Future of React

Please think about a question: if there is a HTML tag, and React has two hook around it, then this tag must be very important for the future development of React . Is that all right?

The tag is-- form .

React around form , there are two new hook :

• useOptimistic

• useFormStatus

this article will talk about the layout and development of React around form .

the development of Next.js

speaking of the future development of React , we must start with Next.js . After all, React team members either join the Next team or are on their way.

web the parts of development that involve front-end interaction mainly include:

1. render the front-end page based on the back-end data

2. Save data to the backend according to the input of the front-end user

The development of

Next.js mainly focuses on the above two points.

render the front-end page based on the back-end data

in the earlier stage, the main features of Next.js are SSR , SSG . That is, the process of rendering the front-end page based on the back-end data is moved from the front-end to the back-end.

the Next.js route for this period is called Pages Router .

time comes to Next.js v13 . App Router with RSC (React Server Component) as the core replaces Pages Router as the default configuration.

many friends are not familiar with RSC and regard it as an experimental feature. In fact, RSC has landed via Next.js .

one sentence understanding RSC -client components ( React components rendered in the browser) can be divided into two parts according to dependencies:

• components that depend on data sources (such as databases, file systems) can be used as RSC (server components)
• components that depend on states (such as state , props , context ) can be used as client components

from the perspective of rendering front-end pages based on backend data:

• SSR , SSG is page-level (server rendering renders the entire page)

• RSC is component level (server component requests data source)

Save data to the backend according to the input of the front-end user

after talking about rendering the front-end page based on the backend data, what optimizations can be made for Next.js to save the data to the backend according to the input of the frontend user around ?

this refers to the experimental feature of Next.js -- Server Action .

Server Action

A common scenario in which data is saved to the backend based on front-end user input is form submission. Usually we do follow-up processing in the obSubmit event of form :

function Form() {
  function submit() {
    //... Logic for dealing with formData
    //... The logic of sending the request
  }
  return (
    <form onSubmit={submit}>
      <input type="text"/>
      <input type="text"/>
    </form>
  )
}

what can be improved in the above code?

from the point of view of user experience, if JS is disabled at the front end, then React cannot be run, and the above interaction is invalid. It would be nice if you could submit a form with JS disabled.

from the perspective of development experience, the submit method initiates a request, and the backend operates the database according to the formData carried by the request, which is cumbersome. It would be nice if you could manipulate the database directly within the submit method.

The

Server Action feature is designed to achieve the above two goals.

Let's first look at the first goal.

goal 1

The

HTML native form element has a action attribute and can receive a url . When the form is submitted (such as clicking the button where type is submit ), formData will be submitted to the url .

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

because the behavior of submitting a form is natively supported by HTML , it can also be performed when JS is disabled.

this is the rationale on which forms can be submitted by disabling JS .

goal 2

React extends the action attribute of form to support not only url , but also callback functions, such as

.

function App() {
  function submit(data) {
    // ...
  }
  return (
    <form action={submit}>
      <!-omit-->
    </form>
  );

if this callback function contains the logic executed by the front end, it is called client action , such as the following:

  async function submit(data) {
    await const res = saveData(data);
    // ...
  }

if there is logic executed by the backend in this function, it is called server action , such as the following:

  "use server"
  
  async function submit(data) {
    const userID = cookies().get("userID")?.value;
    await db.users.update(userID, data);
    // ...
  }

The

"use server" tag indicates that this is a server action .

if it is server action , the type of request initiated is multipart/form-data (that is, form submission):

response type is RSC protocol :

that is, with server action , developers can write backend logic directly in the action attribute of form (or several other attributes such as formAction attribute of button ), and can also execute this logic if the browser disables JS .

2 new hook

in order to better serve server action , React team released two new hook to improve user experience in form scenarios:

• useOptimistic

• useFormStatus

currently, these two hook introductions can only be seen in the Next.js document (not the React document).

useOptimistic is mainly used to optimize the user experience of submitting data.

for example, when likes, the usual logic is:

1. Click the like button

2. initiate a like request

3. likes successfully. The front end shows the like effect

but for a smooth user experience, the front end usually uses logic as:

1. Click the like button

2. the front end shows the like effect (simultaneously initiates a like request)

3. according to the result of the request, no processing will be done if the like is successful, and if the like fails, the button will be reset

The essence of

useOptimistic is to achieve the above effect at the state level.

useFormStatus is used to display pending status:

during form submission.

function ButtonDisabledWhilePending({action, children}) {
  const {pending} = useFormStatus();
  return (
    <button disabled={pending} formAction={action}>
      {children}
    </button>
  );
}

some students may wonder: useFormStatus does not pass parameters, how does he know which form corresponds to?

in fact, in order to implement useFormStatus , React customizes a context within the source code for all HostComponent (that is, components corresponding to native HTML elements, such as & lt;div/> ).

when a form triggers a form submission, the value of context is updated to the data of this form . useFormStatus itself is only useContext (above context) .

Summary

you can find that we developers rarely use code > useFormStatus , useOptimistic or hook (such as useId , useMutableSource ).

because these hook are provided for the upper-level framework (mainly Next.js ).

React has already completed his mission as a front-end framework. In the second half of his life, he will exist as the operating system of the upper framework.

server action is the future of Next.js , and Next.js is the future of React . Therefore, the future of React will continue to be laid out around form elements.