DEV Community: Makoto Tsuga

useOptimistic in React

Makoto Tsuga — Wed, 24 Jul 2024 20:46:12 +0000

I introduce "useOptimistic" which is new hook in React19.
Note: As of July 2024, this hook is Canary version. Hence, it does not ensure it is stable so hesitate to use in production environment.

What is useOptimistic in React?

useOptimistic is a React hook that displays a different state only while some asynchronous action is in progress.

A use case for useOptimistic is when you want the UI to update before the state in the database is updated. This is often used in message App. For example, when a user sends a comment, it is processed by the database. During this processing, the UI updates to display the comment. If there is an error in the database processing, the comment is removed (reverted to the state before the processing).

Example of message App by using useOptimistic.

Let's consider the previous example.

①When a user makes a comment and clicks the send button, a form action is executed.
For those unfamiliar with form actions, please read this article first.

②The state of useOptimistic is updated by the function in useOptimistic.

③original state is updated

④Finish the Form Action and copy original state

In this way, useOptimistic can hold a temporary state and reflect it in the UI.

How to use it.



  const [optimisticState, addOptimistic] = useOptimistic(
    originalState,
    // updateFn
    (currentState, optimisticValue) => {
      // merge and return new state
      // with optimistic value
    }
  );

optimisticState: This is a state that holds temporary information and, except during server action processing, it will have the same value as the original state.
addOptimistic: This is a function called to update the optimisticState. It is called during server action processing and and allows for passing arguments at that time.
originalState: This is the original state. This value is expected to be displayed in the initial state and outside of server action execution.
updateFn(currentState, optimisticValue): This function receives the current state and the arguments passed to addOptimistic, and performs the update process for optimisticState.

Note:
Calling addOptimistic within a server action triggers UseOptimistic. At that time, arguments can be passed.

//Server Action



  const formAction = async (formData: FormData) => {
    addOptimistic(formData.get("message")); //update useOptimistic state
    formRef.current!.reset();
    //Assumed server-side processing(Data based)
    await sendMessage(formData); //update original state
  };

Example of the codes

page.tsx



"use client";
import UseOptimistic from "././components/UseOptimistic";
import { useState } from "react";

export default function Home() {
  //useState(original state)
  const [originalState, setOriginalState] = useState([
    { text: "Hello there!", sending: false, key: 1 },
  ]);

  //function update original state
  const sendMessage = async (formData: FormData) => {
    await new Promise((res) => setTimeout(res, 2000));
    const sentMessage = formData.get("message") as string;
    setOriginalState((originalState) => [
      ...originalState,
      { text: sentMessage, sending: false, key: originalState.length + 1 },
    ]);
  };

  return (
    <UseOptimistic originalState={originalState} sendMessage={sendMessage} />
  );
}

In this file, I have a original state and function to update original state. And I pass them to the component of UseOptimistic.tsx as props.

UseOptimistic.tsx



import { useOptimistic, useRef } from "react";

interface ThreadProps {
  originalState: { text: string; sending: boolean; key: number }[];
  sendMessage: (formData: FormData) => void;
}

const UseOptimistic = ({ originalState, sendMessage }: ThreadProps) => {
  const formRef = useRef<HTMLFormElement>(null);

  //Server Action
  const formAction = async (formData: FormData) => {
    addOptimistic(formData.get("message")); //update useOptimistic state
    formRef.current!.reset();
    //Assumed server-side processing(Data based)
    await sendMessage(formData); //update original state
  };
  const [optimisticState, addOptimistic] = useOptimistic(
    originalState,
    (currentState, optimisticValue) => [
      ...currentState,
      {
        text: optimisticValue as string,
        sending: true,
        key: currentState.length + 1,
      },
    ]
  );

  return (
    <>
      {optimisticState.map((message, index) => (
        <div key={index}>
          {message.text}
          {!!message.sending && <small> (Sending...)</small>}
        </div>
      ))}
      <form action={formAction} ref={formRef}>
        <input type="text" name="message" placeholder="Hello!" />
        <button type="submit">Send</button>
      </form>
    </>
  );
};

export default UseOptimistic;

In this file, I have a optimisticState and function to update this state by using useOptimistic. And I have a server action(form action). When user click the button, formAction is called and update the optimisticState. During the this operation, we can see the new text with "Sending". After execution of formAction, optimisticState has original state. Hence, we can not see "Sending". However, In form action, I call the sendMessage and update original state so I can see new text without "sending".

useFormState（useActionState）

Makoto Tsuga — Thu, 11 Jul 2024 12:19:01 +0000

I introduce "useFormState" which is new hook in React19. Now this hook is called "useActionState" as another name.
Note: The official React reference says that "useFormState" will change to "useActionState". It is expected that useFormState will no longer be available in the near future.

What is "useFormState"?

"useFormState" that allows the state to be updated based on the result of a function (form action). Please refer to this article for information about form actions.

How to use it.

  const [state, dispatch] = useFormState(putcart, null);

useFormState can be used like useState.

The first element of the array is the state variable. The second element is a function for updating the state. At this time, the variable name needs to match the one specified in the Action attribute.
The first argument of useFormState is a function for performing updates. The second argument is the initial value of the state. In this case, null is passed as the initial value.

Example

The following example shows that by using useFormState, the state is being updated with a function called putcart.

FormComp.tsx

"use client";
import React from "react";
// import { useActionState } from "react";
import { useFormState } from "react-dom";
import { putcart } from "./functions";

const FormCop = () => {
  const [state, dispatch] = useFormState(putcart, null);
  return (
    <form
      className="bg-white w-1/3 text-center m-auto mt-20 p-5"
      action={dispatch}
    >
      <h1 className="font-bold">Shopping cart</h1>
      <input type="hidden" name="itemID" value={"1"} />
      <button className="bg-teal-400 w-3/4 p-2 text-white m-5" type="submit">
        ADD TO CART
      </button>
      {state && <p className="text-green-500">{state}</p>}
    </form>
  );
};

export default FormCop;

functions.ts

"use server";
export const putcart = async (prev: string | null, formDate: FormData) => {
  await new Promise((resolve) => setTimeout(resolve, 1000));
  console.log("this comment is put debug console because in serverside");
  const itemID = formDate.get("itemID");
  if (itemID === "1") {
    return "you have added item to cart";
  }
  return prev;
};

When the button is clicked, putcart is called by useFormState. At this time, the information from the form is passed as an argument to putcart. In this case, since the input value is 1, the string "you have added item to cart" is returned, and the state is updated with this value. Then, due to the condition state &&, the text "you have added item to cart" is displayed on the screen.

(Result)

NoInfer in Typescript 5.4

Makoto Tsuga — Wed, 03 Jul 2024 02:12:35 +0000

I introduce NoInfer which is new feature in TypeScript 5.4.

What is NoInfer?
NoInfer is a feature in TypeScript that suppresses type inference. For example, we have following the code.

const func1 = <T extends string>(array: T[], searchElement: T) => {
  return array.indexOf(searchElement);
};

console.log(func1(["a","b","c"],"d"))

The second argument of func1 is assigned to d, but since d does not exist in the elements of the array in the first argument, an index search returns -1. However, TypeScript does not produce a type error in such a case. This is because both the array passed as the first argument and the string specified as the second argument are used as materials to infer the type T, resulting in the type T being inferred as 'a' | 'b' | 'c' | 'd'. So, how can you produce a type error if a string other than a, b, or c is entered as the second argument? This is where NoInfer can be used.

const func2 = <T extends string>(array: T[], searchElement: NoInfer<T>) => {
  return array.indexOf(searchElement);
};
console.log(func2(["a","b","c"],"b"))// no error
console.log(func2(["a","b","c"],"d"))// error happened. Argument of type '"d"' is not assignable to parameter of type '"a" | "b" | "c"'

Using NoInfer allows you to stop the type inference expansion at that part. Hence, In this case, the type T is constrained to 'a' | 'b' | 'c', so you can explicitly raise an error when passing 'd' as an argument.

Generics 【TypeScript】

Makoto Tsuga — Mon, 01 Jul 2024 22:44:29 +0000

The idea of Generics makes us confused, especially beginners. I am also one of such persons. Hence, I researched how to use generics in TypeScript.

What is Generics?

TypeScript generics are a feature that allows types to be treated as parameters, enhancing reusability and type safety. By using generics, you can write code that does not depend on specific types. But I guess some people still don't get it. So I will share the some examples with you.

How to use it

interface Interface1 {
  value1: string;
  value2: string;
}

interface Interface2 {
  value1: number;
  value2: number;
}

const test1: Interface1 = {
  value1: "John",
  value2: "ABC",
};

const test2: Interface2 = {
  value1: 123,
  value2: 456,
};

We have two objects, Test1 and Test2. The key names for Test1 and Test2 are the same, but the types are different, with one being string and the other being number. In this case, we need to create interfaces for each respective type. However, this requires creating a separate interface for each type, which Generics solves for us."

interface Interface3<T> {
  value1: T;
  value2: T;
}

const test3: Interface3<number> = {
  value1: 123,
  value2: 456,
};
const test4: Interface3<string> = {
  value1: "John",
  value2: "ABC",
};

When defining types, using <T> allows us to reuse a single interface by specifying the type as an argument when declaring variables. This makes it easier to create reusable interfaces, even when new types of objects are added. By the way, <T> can be replaced with '<A>, <B> or any other preferred name. <T> is commonly used in general

extends

Generics allow you to impose constraints on types. When you want to specify that must be specific types, you use extends for this purpose.

interface Interface4<T extends string | number> {
  value1: T;
  value2: T;
}

const test1: Interface4<string> = {
    value1: "John",
    value2: "ABC",
  };

  const test2: Interface4<number> = {
    value1: 123,
    value2: 456,
  };

const test3: Interface4<boolean> = {
  value1: true,
  value2: false,
};//error happened

In this case, by using extends with string and number, we specify that T cannot accept any other types. Therefore, test3 caused an error because it was assigned a type of boolean.

Generics in function.

Generics can be used in function. Even when you don't want to specify the types of arguments or return values to a specific type when declaring a function, you can use <T>. You write <T> between the function name and the arguments to denote the use of generics. The declaration would look like the following:

function func1<T>(value: T): T {
  return value;
}
//same function
const func2 = <T>(value: T): T => {
  return value;
};

func1<string>("John");
func2<number>(100);
func2<boolean>(true);

By passing a type as an argument when calling a function, you can determine the type for that function.Of course, using extends allows you to impose type constraints as well.

function func1<T extends string | boolean>(value: T): T {
  return value;
}
func1<string>("John");
func1<number>(100); //error happened
func1<boolean>(true);

How to use fetch in JavaScript

Makoto Tsuga — Tue, 04 Jun 2024 18:40:06 +0000

Hello, everyone. In this article, I would explain fetch in JavaScript. It is recommended to read the following article and understand the concept of asynchronous, synchronous processing and Promise before reading this article. This is because these concepts are connected with fetch.

➡async/sync in Javascript　
➡How to use Async/Await in Promise.
➡How to use chaining in Promise.

What is fetch?

Fetch is the function can get the local or outside data. This function
asynchronously is executed. By using the function, you can get the many type of data such as text, json, image so on. Please look at following image, in this case, this code can get the information from the json file named "sample.json".

sample.json

{
    "name": "makoto",
    "gender": "male"
}

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>

</html>

<script>
    const test = async ()=>{
        const response = await fetch('sample.json')
        const data = await response.json()
        console.log(data)
    }
    test();
</script>

console

Thus, fetch can be used to retrieve data from other files and other websites.

How to use it.

This is basic format for fetch. fetch('sample.json') requests data from the file 'sample.json' and returns a Promise object representing the result of the request. And await response.json() retrieves the JSON object (the content we want to obtain) from the response (a Promise object) obtained from the fetch() request.

<script>
    const test = async ()=>{
        const response = await fetch('sample.json')//get the promise object
        const data = await response.json()//get the json object
        console.log(data)
    }
    test();
</script>

Specify the path or URL of the file from which you want to fetch data as an argument to fetch.
Since fetch is an asynchronous operation, you should use await on the fetch function.
Since fetch is an asynchronous operation, add async to the calling function.
The fetch() method returns a Promise object.

fetch can retrieve data in a variety of formats

fetch can get the data not only json but also other types of data such as text, binary data, Blob(image) and FormData.

    const data = await response.json();//json data
    const text = await response.text();//text data
    const arrayBuffer = await response.arrayBuffer();//array buffer data
    const blob = await response.blob();//blob data
    const formData = await response.formData();//form data

We have to use different methods depending on the type of data we want to retrieve. In this article, we assume that we are retrieving JSON data, so we will only use response.json().

Example of usage when url is specified for fetch

By specifying an external site's URL in fetch, you can retrieve information from the site. Here, I will use the weather Web API, Open-Meteo, as an example to explain.

Open-Meteois weather API, which provide weather info. By including latitude, longitude, and other parameters in the URL, you can retrieve weather information for that location, such as precipitation probability and temperature.

Since you need to customize the URL based on the information you want, it's important to read the site's documentation and deepen your understanding of the API. The rules for writing URLs differ between Web APIs, so first, visit the site and learn how to use the Web API.

In this case, to obtain the maximum temperature for the 7days, I created the following URL. The location is specified as Toronto, Canada (latitude: 43.67, longitude: -79.4):

https://api.open-meteo.com/v1/forecast?latitude=43.67&longitude=-79.4&daily=temperature_2m_max&timezone=America/Toronto

For obtaining the maximum temperature, temperature_2m_max was specified in the URL.
43.67 was designated for the latitude parameter.
-79.4 was assigned to the longitude parameter.
America/Toronto was set for the time zone parameter.

This is JavaScript

<script>
    const test = async ()=>{

        // parameters for the url
        const lat = 43.67;
        const long = -79.4;
        const tzone = 'America/Toronto';


        const response = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${long}&daily=temperature_2m_max&timezone=${tzone}`); 
        const data = await response.json()// get the json object
        console.log(data.daily.temperature_2m_max)
    }
     test();
</script>

Using fetch with the previously mentioned URL, I was able to output the maximum temperature to the console. By utilizing external website's web API and fetch in this manner, it becomes feasible to retrieve external data. When specifying a URL, it's important to understand the specifications of each respective web API and include parameters accordingly in the URL.

How to use Async/Await in Promise.

Makoto Tsuga — Thu, 23 May 2024 20:59:13 +0000

Hello, everyone. In this article, I would explain promise async/await in javascript. It is recommended to read the following article and understand the concept of asynchronous and synchronous processing before reading this article. This is because these concepts is connected with Promise. Moreover, please read the following article for information on how to use Promise chaining, a different implementation of Promise.
➡async/sync in Javascript　
➡How to use Promise chaining in Javascript.

What is promise?

Promise is an object that represents the completion or failure of synchronous processing. By using this object, you can wait for asynchronous processing to complete and then execute the next process sequentially.

In the following case, it is not possible to output in the order of ABC. Instead, it outputs in the order of ACB. This is because the asynchronous function setTimeout delays the execution by 4000ms, causing console.log("C") to be executed before console.log("B").

  <script>
    //=== function declaration ==========
    const func = () => {
      console.log("B");
    };

    //  === program start ==========
    console.log("A");
    setTimeout(func, 4000); //async function
    console.log("C");
  </script>

However, if you use Promise Async/Await, you can output in the order of ABC.

  <script>
    //===promise declaration ==========
    const pro = new Promise((resolve) => {
      setTimeout(() => {
        func(); //processing 2
        resolve();
      }, 4000);
    });

    //=== function declaration ==========
    const func = () => {
      console.log("B");
    };
    async function process() {
      message = await pro;
      console.log("C"); // Subsequent processing 3
    }

    // === program start ==========
    console.log("A"); //processing 1
    process();
  </script>

How to use promise.

This is basic format for a promise.

    const num = 10;
    const pro = new Promise((resolve, reject) => {
      if (num > 0) {
        resolve("success!!!!!");
      } else {
        reject("failure");
      }
    });
    console.log(pro); //output success

returned object

Promise can take the functions resolve and reject as arguments. And return promise object.

resolve: Function called when the operation succeeds
reject: Function called when the process fails.

In this case, num is greater than 0 so it returns Promise object in successful state thanks to resolve.

Async/Await

When the Promise object is in a successful state due to resolve, subsequent processing can be executed using Async/Await.

  <script>
    const num = 10;

    const pro = new Promise((resolve, reject) => {
      if (num > 0) {
        console.log("process1");
        resolve("success!!!!!");
      } else {
        console.log("process failure");
        reject("failure");
      }
    });

    async function process() {
      const message = await pro; // wait until the promise is resolved or rejected
      console.log(message); // Subsequent processing1

      console.log("process2"); // Subsequent processing2

      console.log("process3"); // Subsequent processing3
    }
    process();
  </script>

Await executes asynchronous processes, waits for them to complete, and then proceeds with subsequent tasks. These sequences of actions can be defined within an async function.

The following is the convention to use Async/Await.

When using a Promise object (assuming an asynchronous operation), you prefix the object with 'await'.
When using await, the function where it's used must be marked with async.
After executing a process with await, you can perform subsequent tasks.Note:This must be implemented within an async function.

Try/Catch and reject

When the Promise object is in a Failure state due to reject, error can be handled using by try and catch.

  <script>
    const num = -5;

    const pro = new Promise((resolve, reject) => {
      if (num > 0) {
        console.log("process1");
        resolve("success!!!!!");
      } else {
        console.log("failure1");
        reject("failure2");
      }
    });

    async function process() {
      try {
        const message = await pro; // wait until the promise is resolved or rejected
        console.log(message); // Subsequent processing1
        console.log("process2"); // Subsequent processing2
        console.log("process3"); // Subsequent processing3
      } catch (error) {
        console.log(error);
        console.log("failure3");
      }
    }
    process();
  </script>

In this case, num is lesser than 0 so it returns Promise object in failure state thanks to reject.Hence, the processings inside of catch are executed. This is assuming error handling. The processings inside of try are not executed.Moreover, you can use the argument passed to the reject function by specifying an argument in the catch block.

The following is the convention to use Try/Catch.

Subsequent processing after process success is enclosed in try
Subsequent processing after process failure is enclosed in catch.

Asynchronous Function and Promise Async/Await

If you use promise Async/Await, Asynchronous processing can be executed synchronously.

  <script>
    //===promise declaration ==========
    const pro = new Promise((resolve) => {
      setTimeout(() => {
        func(); //processing 2
        resolve();
      }, 4000);
    });

    //=== function declaration ==========
    const func = () => {
      console.log("B");
    };
    async function process() {
      message = await pro;
      console.log("C"); // Subsequent processing 3
    }

    // === program start ==========
    console.log("A"); //processing 1
    process();
  </script>

How to use Promise chaining in Javascript.

Makoto Tsuga — Thu, 23 May 2024 20:58:04 +0000

Hello, everyone. In this article, I would explain promise chaining in javascript. It is recommended to read the following article and understand the concept of asynchronous and synchronous processing before reading this article. This is because these concepts is connected with Promise. Moreover, please read the following article for information on how to use Async/Await, a different implementation of PROMISE.
➡async/sync in Javascript　
➡How to use Async/Await in Promise.

What is promise?



  <script>
    //=== function declaration ==========
    const func = () => {
      console.log("B");
    };

    //  === program start ==========
    console.log("A");
    setTimeout(func, 4000); //async function
    console.log("C");
  </script>

However, if you use Promise chaining , you can output in the order of ABC.



<script>
  const func = () => {
    console.log("B");
  };

  console.log("A");

  new Promise((resolve) => {
    setTimeout(() => {
      func();//call the func
      resolve(); 
    }, 4000);
  }).then(() => {
    console.log("C");
  });
</script>

How to use it.

This is basic format for a promise.



    const num = 10;
    const pro = new Promise((resolve, reject) => {
      if (num > 0) {
        resolve("success!!!!!");
      } else {
        reject("failure");
      }
    });
    console.log(pro); //output success

returned object

Promise can take the functions resolve and reject as arguments. And return promise object.

resolve: Function called when the operation succeeds
reject: Function called when the process fails.

In this case, num is greater than 0 so it returns Promise object in successful state thanks to resolve.

chaining:"resolve" and "then"

When the Promise object is in a successful state due to resolve, subsequent processing can be executed using the following .then() method.
we can call this idea as promise chaining.



    const num = 10;
    const pro = new Promise((resolve, reject) => {
      if (num > 0) {
        resolve("success!!!!!");
      } else {
        reject("failure");
      }
    });
    pro
      .then((message) => {
        console.log(message);//Subsequent processing1
      })
      .then(() => {
        console.log("process2");//Subsequent processing2
      })
      .then(() => {
        console.log("process3");//Subsequent processing3
      });

By specifying an argument in the then method, the value passed when the resolve method is called is provided. In this case, since "success!!!!!" is passed to resolve, by passing an argument to then, you can output "success!!!!!" with console.log.

Using this then method allows you to execute subsequent processes sequentially (synchronously) after the asynchronous operation has completed.
This can be accomplished by placing asynchronous processing before resolve() and subsequent processing within then()

"reject" and "catch"

When the Promise object in a failed state due to reject, you can handle the error using the .catch() method.



    const num = -1;
    const pro = new Promise((resolve, reject) => {
      if (num > 0) {
        resolve("success!!!!!");
      } else {
        reject("failure");
      }
    });
    pro.then((message) => {
        console.log(message);
      })
      .then(() => {
        console.log("process2");
      })
      .then(() => {
        console.log("process3");
      })
      .catch((message) => {
        console.log(message); //error handle
      });

In this case, num is lesser than 0 so promise object is in failure. Hence, the code is executed inside of catch.

Asynchronous Function and Promise chaining

As I mentioned that if you use promise chaining, Asynchronous processing can be executed synchronously.
This is the code introduced at the beginning of the article.



  const func = () => {
    console.log("B");
  };

  console.log("A");

  new Promise((resolve) => {
    setTimeout(() => {
      func(); //call the func
      resolve();
    }, 4000);
  }).then(() => {
    console.log("C");//Subsequent processing
  });

Although setTimeout is an asynchronous function and func should be executed last, using the then method of the promise allows the processing to be completed before console.log("C").

Promise chaining is commonly used to execute asynchronous operations synchronously like this.

async/sync in Javascript

Makoto Tsuga — Thu, 23 May 2024 20:56:31 +0000

Hello everyone. In this article, I would like to talk about async/sync in Javascript. Many beginner sometimes get confused about thoses ideas. I was one of them. Hence, I feel them and I try to explain I would like to explain it clearly.

What are Synchronous and Asynchronous?

Synchronous

Synchronous processing means that a series of tasks are executed sequentially, and the next task doesn't begin until the previous one is complete. Each task waits for the previous one to finish before it starts.

Asynchronous

Asynchronous processing means tasks can be executed simultaneously, without waiting for each other to finish.

Synchronous

This is example of Synchronous process

  <script>
    //=== function declaration ==========
    const func = () => {
      console.log("B");
    };

    //  === program start ==========
    console.log("A");
    func(); // function call
    console.log("C");
  </script>

Result

This program executes its tasks sequentially, starting from the top, and the output appears in the console in the order of ABC. This is synchronous processing.

Asynchronous

This is example of Asynchronous process.

  <script>
    //=== function declaration ==========
    const func = () => {
      console.log("B");
    };

    //  === program start ==========
    console.log("A");
    setTimeout(func, 1000); //async function
    console.log("C");
  </script>

Result

In this program, the order of output is different from Synchronous one.The output is appearing in the sequence ACB. This is because that I use the setTimeout, which is asynchronous function.

setTimeout is a JavaScript method used to execute a specified function after a specified amount of time has elapsed. It takes the function to execute and the specified time as arguments.

Hence, As func was not called immediately because of setTimeout, console.log("C"); was executed next, resulting in the output "ACB" in the console. This is asynchronous processing.

Converting Asynchronous Processing to Synchronous Processing

How can we make an asynchronous function run synchronously?

In the earlier example, this means that after outputting "A," we wait for a short time before outputting "B," and finally, "C" is outputted. In other words, we want to wait for the execution of the asynchronous function setTimeout before outputting "C."

something like that

The keywords you've probably heard of for this answer is:

Promise

Promise is used to execute asynchronous functions as synchronous processes.

These keyword is commonly used in API call processes because, in some cases, the program needs to wait for the result of an API call before proceeding with the next operation.
There are roughly two ways to use promises.
➡How to use Async/Await in Promise.
➡How to use chaining in Promise.

Please refer to the articles for an explanation of how to use those

Summary

Synchronous processing is a process where one task finishes before the next one begins.
Asynchronous processing is a process where the next task can proceed without waiting for a time-consuming task to complete, allowing multiple tasks to be executed simultaneously.
To handle asynchronous functions synchronously, you need to understand Promise.

useFormStatus in React 19

Makoto Tsuga — Tue, 14 May 2024 19:30:38 +0000

Hello everyone. I would like to write about useFormStatus updated in React 19, which is one of new hooks. This hook is relevant to Form Actions. Hence, If you do not understand Form Actions, please read the previous post before reading this article.

What is useFormStatus?

"useFormStatus" is new hook obtain the status during form submission. Using this hook, you can display the status of the form on the screen, or restrict form input during submission.

Instructions

①Create a form using Form Actions
/app/page.tsx



export default function Home() {
  const formAction = async (formData: FormData) => {
    "use server";
    await new Promise((resolve) => {
      setTimeout(resolve, 1000);
    }); //intentionally delay time
    console.log(formData.get("firstName"));
  };

  return (
    <form action={formAction}>
      <div>
        <label>Name:</label>
        <input type="text" name="firstName" />
      </div>
      <button className="border border-black">Resister</button>
    </form>
  );
}

The feature of this form is following description.

When you click the registration button on the form, the entered name will be output to the debug console log as server-side processing.
Because I want to check the status of the form, I intentionally delay the process by using PROMISE and SET TIMEOUT.

②Convert the button into a component
/app/Register.tsx



const Register = () => {
  return <button className="border border-black">Resister</button>;
};

export default Register;

/app/page.tsx



import Register from "./Register";

export default function Home() {
  const formAction = async (formData: FormData) => {
    "use server";
    await new Promise((resolve) => {
      setTimeout(resolve, 1000);
    }); //intentionally delay time
    console.log(formData.get("firstName"));
  };

  return (
    <form action={formAction}>
      <div>
        <label>Name:</label>
        <input type="text" name="firstName" />
      </div>
      <Register />
    </form>
  );
}

The element(submission button) under the form that use server action, which is converted into child component. In this case, I converted button element into Register.tsx.

③Use the useFormStatus
/app/Register.tsx



"use client";
import { useFormStatus } from "react-dom";

const Register = () => {
  const { pending } = useFormStatus();

  return (
    <button className="border border-black">
      {pending ? "Loading" : "Register"}
    </button>
  );
};

export default Register;

I added following in the Register.tsx.

"const { pending } = useFormStatus();" is to get the status of form submission. The text of the button is changed by changing the content of the variable “pending”.
I added "use client";"

④Result

I can see the Loading during submission of the form.

Thanks for reading this article.
Next time, I will explain a new hook, which is useFormState.

Form Actions in React 19

Makoto Tsuga — Mon, 13 May 2024 21:28:52 +0000

Hello everyone. I would like to write about form actions updated in React 19, which is one of new features.

What is Form Action?

Form Actions is feature to implement easily the process of the server side when submitting in the form.

Synchronous and asynchronous functions can be easily implemented by using action which is props in form.
It is possible to pass form information to the function as an argument.
The status of the form (pending, etc.) can be obtained by using useFormStatus which is new hook in react 19.

Here, I implement the following the system to explain form actions.

When you click the register button on a form, I would like to output the name entered in input to the debug console log as a server-side process.

Older use of the form

In the previous way.....

The useState and onChange were used to get the contents of the input.
To execute server-side processing, you need to specify an endpoint like /api/submit and use the fetch function to POST data.
It was necessary to prepare a separate file, such as /app/api/submit/route.ts, to handle the processing on the server-side.

client(/app/page.tsx)




"use client";
import React, { useState } from "react";

export default function Home() {
  const [name, setName] = useState("");
  const submit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    fetch("/api/submit", {
      method: "POST",
      body: JSON.stringify({ message: name }),
    });
  };
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setName(e.target.value);
  };

  return (
    <form className="" onSubmit={submit}>
      <div>
        <label>Name:</label>
        <input type="text" value={name} onChange={handleInputChange} />
      </div>
      <button className="border border-black">Resister</button>
    </form>
  );
}

server(/app/api/submit/route.ts)



import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
  const { message } = (await req.json()) as { message?: string };
  console.log(message);
  return NextResponse.json("ok", { status: 200 });
}

Result

when click the button, I can see the input text I entered in the debug console.

New use of the form

You can specify a function in a Form action and execute it.
It is necessary to write "use server" inside function.
You can pass an argument called formData that holds form information to the specified function.
The contents of input can be obtained by using the "formData.get method". At that time, pass the name of the input you want to obtain as an argument.

client(/app/page.tsx)



export default function Home() {
  const formAction = async (formData: FormData) => {
    "use server";
    console.log(formData.get("firstName"));
  };

  return (
    <form action={formAction}>
      <div>
        <label>Name:</label>
        <input type="text" name="firstName" />
      </div>
      <button className="border border-black">Resister</button>
    </form>
  );
}

Result

when click the button, I can see the input text I entered in the debug console.

By using the form action, we do not need to create the endpoints and use the useState.

I explained a new hook, useFormStatus, that allows you to obtain the status (pending, etc.) in Form actions. If you want to know how to use it, please read the another article.

"Is it better not to put the map index into the 'key' prop?"

Makoto Tsuga — Thu, 09 May 2024 13:12:57 +0000

Hello everyone. On DEV, I'd like to write down the feedback received from a senior developer during a code review of React.

One day, I put the index of map into key prop ...

In my portfolio, When creating the some elements by using map, I put map index into key prop. It is something like that.

const todoItems = todos.map((todo, index) => (
  <li key={index}>{todo.text}</li>
));

We should avoid to use index of map.

My mentor asked me to avoid use the index of map. And I put the keys of todos instead of it.

const todoItems = todos.map((todo) => 
<li key={todo.id}>{todo.text}</li>);

Why index of map is not recommended to use?

Using the index as the key is not recommended for the following reason:

As the list elements increase, each re-render generates a new index, making it uncertain to ensure a unique id for each item.　As a result, it might have a negative impact on performance and cause issues with the state of components.

Hence, when you create some elements by using map, create id and use the keys in the array as much as possible.

const todo= [
  {
    id: 1,
    text: "A",
  },
  {
    id: 2,
    text: "B",
  },
  {
    id: 3,
    text: "C",
  },
  {
    id: 4,
    text: "D",
  },
];

Should constant be defined outside component?

Makoto Tsuga — Tue, 07 May 2024 20:00:01 +0000

①Inside to define

import React from "react";

const Sample = () => {
  const TEXT = "hello world";
  return <div>{TEXT}</div>;
};
export default Sample;

const TEXT is defined inside Sample component.

②Outside to define

import React from "react";

const TEXT = "hello world";
const Sample = () => {
  return <div>{TEXT}</div>;
};

export default Sample;

const TEXT is defined outside Sample component.

Main Differences

Scope
In method①,TEXT is used only inside Sample component. In method②, it is defined with a wide scope. It's also accessible from other locations within the file. It means it can be used in other components within the file.

Memory usage
In method①,It consumes memory when the component is rendered and is released from memory when the component is unmounted.
In method②,file remains in memory as long as the file is loaded.

Summarize

Since memory is consumed with each re-render, it's better to define constants outside the component. Also, when you want to reuse them multiple times, define them outside the component.