Don't make these mistakes with Server Actions ❌

Hey friend,

I'm planning to release more free crash courses on different topics.

So, I want to hear from you.

What topic should I create a crash course on?

Don't worry, It will be completely free on my YouTube channel 🎥 so just hit reply and let me know!

I've been really enjoying building with Next.js Server actions lately.

I love it because my backend code now lives right alongside my frontend code, and my overall development time has drastically reduced.

However, if you're not careful, you can easily waste a lot of time debugging issues 😅.

Today, I'll cover some mistakes I've made alongside things you can avoid with server actions so you can learn from them.

↳ Now, if you prefer watching a video on the same topic then check that out here.

Alrighty, Let's dive in!

🍿 Weekly Snack: Demo App: Stockorama

To illustrate some concepts in this post, I built a small app called
📈 Stockorama, the name is Inspired by Dollarama 😁.

It allows you to:

View inventory in a warehouse
Add/remove items and keep count
"Like" popular products

Here's what it looks like:

I have a form where you can add a new product to the warehouse inventory.

This data gets saved to a local inventory.json file that serves as our makeshift database.

Grab the CodeSandbox Link 🔗

If you want all the code, then grab the Codesandbox link here.

Mistake #1: Not Making the Button a Child of the Form

I ran into an issue when trying to show a "Pending" state for the Add button after submitting the form.

I was using the useFormStatus ↗️ hook but couldn't get it to work right.

Turns out, the button needs to be wrapped in its component and called from within the form itself. 🙈

Bit annoying but that's how it has to be set up!

Mistake #2: Calling `redirect()` in `try/catch`

When adding a new product, I tried to redirect after saving to the DB and once the user submitted the form.

Didn't work! 👎

Turns out redirect() needs to be called outside try/catch.

Easy mistake to make! 😅

Gotcha with Optimistic State

Let's say we add a new page with the ability to like the items in the warehouse. The page looks like this.

Now, we want to update the Like Count once the user presses the Like Button shown below.

Here is the thing...

We want the user to see the UI increment change right away as the database operation is in progress.

You can call these optimistic updates!!! ✨

For that, we can use a hook called useOptimistic ↗️.

What is useOptimistic? 🤔 The useOptimistic hook in React is designed to optimistically update the user interface before an asynchronous action, such as a network request, completes.

It takes an initial state and an update function as parameters.

The update function is invoked with the current state and an optimistic value, allowing the UI to immediately reflect the expected outcome of the action while it is still pending.

This "optimistic" approach enhances user experience by providing the appearance of speed and responsiveness, particularly useful in scenarios like form submissions where the UI is updated before the server's response is received.

The mistake I made when using useOptimisticState:

You need to wrap state updates in useTransition so UI doesn't freeze up.

Check it out here 👇

I kept running into errors until I wrapped it properly.

😵‍💫 Easy to miss!

Weekly Youtube Videos 💖

How to get a job using LinkedIn | Get hired 🔥

5 Ways to Level Up as a Developer 🚀

Check it out and subscribe to my channel for more content related to Frontend, Leadership and Career Development. 💪

The Frontend Developers Toolbox 🧰

tldraw: Their make it real tool has wowed everyone. They are using AI to draw really neat diagrams.
Check it out for yourself ↗️
Script Kit ↗️ is an amazing open-source kit to optimize your developer workflow. Create a shortcut for everything..
Want to get better at understanding accessibility? well, look no further as this website ↗️ teaches you how to use colour, typography and media to create accessible interfaces.