Fetch with status code

const response = await fetch("/api/newsletter/subscribe", {
  method: "POST",
  body: JSON.stringify({
    email: data.email,
    // This token is used as a search param in the email preferences page to identify the subscriber.
    token: crypto.randomUUID(),
    subject: "Welcome to Skateshop13",
  }),
})
 
if (response.status === 409) {
  toast.error("You are already subscribed to our newsletter.")
}
 
if (response.status === 422) {
  toast.error("Inavlid input.")
}
 
if (response.status === 429) {
  toast.error("The daily email limit has been reached.")
}
 
if (response.status === 500) {
  toast.error("Something went wrong. Please try again later.")
}
 
if (response.ok) {
  toast.success("You have successfully joined our newsletter.")
  form.reset()
  router.refresh()
}

LinkIconReact 19 and startTransition

React’s startTransition function allows you to mark certain updates in your app as non-urgent, so they are paused while more urgent updates are prioritized. This makes your app feel faster and responsive.

startTransition(() => {
  setState(newState);
});

React 19 stable version for production was released in December 2024, included new features to the Transitions API.

In React 18, the actions callback function you passed to the startTransition function had to be synchronous.

Now in React 19, the startTransition function callback can be asynchronous, helpful for e.g form submission in a transition callback.

const [pending, startTransition] = useTransition()
 
startTransition(async() => {
  const response = await fetch("/api/newsletter/subscribe", {
    method: "POST",
    body: JSON.stringify({
      email: data.email,
      // This token is used as a search param in the email preferences page to identify the subscriber.
      token: crypto.randomUUID(),
      subject: "Welcome to Skateshop13",
    }),
  })
 
  if (response.status === 409) {
    toast.error("You are already subscribed to our newsletter.")
  }
 
  if (response.status === 422) {
    toast.error("Inavlid input.")
  }
 
  if (response.status === 429) {
    toast.error("The daily email limit has been reached.")
  }
 
  if (response.status === 500) {
    toast.error("Something went wrong. Please try again later.")
  }
 
  if (response.ok) {
    toast.success("You have successfully joined our newsletter.")
    form.reset()
    router.refresh()
  }
})
See all notes