DEV Community: Majd Hemud

useActionState hook in react 19

Majd Hemud — Sat, 27 Jul 2024 19:27:27 +0000

React 19 is finally here! Bringing new features and APIs to the frontend world and for all React lovers. To create smoother, faster, and more efficient React apps.

In this Article we will talk about useActionState hook in React 19 😁

Note: The useActionState hook is currently only available in React’s Canary and experimental channels. Learn more about release channels here. In addition, you need to use a framework that supports React Server Components to get the full benefit of useActionState.

The useActionState hook

This is a new React hook that helps us update state based on the result of a form action.

In addition, the useActionState hook offers benefits such as:

Simplified state management: Automatically updates state based on action results, and reducing boilerplate code.
Enhanced user experience: Provides loading indicators and error handling for smoother interactions.
Improved performance: Optimizes state updates and works seamlessly with React Server Components.

Example

import { useActionState } from 'react';

async function updateName(name) {
    await new Promise((resolve) => setTimeout(resolve, 4000));
    return name;
}

export default function UpdateNameForm() {
    const [name, updateNameAction, isPending] = useActionState(
        async (previousName, formData) => {
            const newName = await updateName(formData.get('name'));
            return result;
        },
        '',
    );
    return (
        <form action={updateNameAction}>
            Current Name is {name}
            <input name='name' />
            <button type='submit' disabled={isPending}>
                {isPending ? 'Updating...' : 'Update'}
            </button>
        </form>
    );
}

In the example above:

First we imported the useActionState hook from the React library.
We defined an asynchronous function called updateName to update the name. It takes a name parameter. Inside the function we added a promise to simulate a delay of 4 seconds before resolving the promise. After that it returns the new name.
As well we defined a functional component named UpdateNameForm. Inside the component we used the useActionState hook to manage the component's state.

The useActionState hook returns an array with three values:

name: The current name.
updateNameAction: A function to trigger the form action and the subsequent state update.
isPending: Is a boolean flag indicating whether the action is in progress.

The useActionState hook takes three arguments:

fn: An asynchronous function that handles the form submission logic.
initialState: The value you want the state to be initially. It can be any serializable value. This argument is ignored after the action is first invoked.
optional permalink: Is a string representing a unique URL associated with the form. It's primarily used in progressive enhancement scenarios.

For example with Server-Side Rendering (SSR). If the JavaScript bundle hasn't loaded yet when a user submits the form, React will redirect the user to the specified permalink URL instead of the current page.

So for the first parameter in the useActionState hook. We added an asynchronous function and it takes two parameters:

previousName: It's the previous state for the name.
formData: Which includes the submitted data from the form.

And after we added the asynchronous function as a first parameter in the useActionState hook. Within this function we get the new name from the formData and update the name through the updateName function.
For the second parameter we added an empty string to be the initialState for the name.
And finally it returns the new name to update the state for the name.

📝 Things to Keep in Mind

Experimental Feature: useActionState is currently an experimental feature and its behavior might change in future React versions. Use it with caution and be prepared for potential API changes.
React Server Components (RSC): To fully leverage the benefits of useActionState, it's recommended to use it with React Server Components. This combination can significantly improve performance.
Error Handling: While useActionState simplifies state management, you'll still need to handle errors gracefully within your action function. Consider using try-catch blocks or returning error objects.
Optimistic Updates: You might want to implement optimistic updates to provide a better user experience. This involves updating the UI immediately after a form submission and then correcting it if necessary.

Conclusion

I hope you enjoyed reading the article. If you have any questions, thoughts, or just want to say hello, I'd be thrilled to hear from you. Here's how you can reach out:

Drop me an Email: majd.hemud@gmail.com

Follow me 🥰

Explore My Portfolio

If you want to see more of my work, don't forget to check out my portfolio website! There, you'll find a curated collection of my projects, creative endeavors, and a deeper dive into my skills and passions 🔥.

Whether you're looking for design inspiration, curious about my past projects, or just want to connect, my portfolio is the place to be.

Until next time peace ✌️🥰.

useTransition hook in React 19

Majd Hemud — Thu, 25 Jul 2024 10:48:57 +0000

React 19 is finally here! Bringing new features and APIs to the frontend world and for all React lovers. To create smoother, faster, and more efficient React apps.

In this Article we will talk about useTransition hook in React 19 😁

The useTransition hook

This hook is your secret weapon to handle slow state updates without freezing the UI. Which is really cool when dealing with data fetching or expensive computations.

In React 19 you can now directly pass an asynchronous function (like async/await) to startTransition function. This allows you to perform an asynchronous operation(e.g., API call) within the transition itself, simplifying your code and making it easier to manage the transition state.

Example:

import { useState, useTransition } from 'react';

async function fetchCarsData() {
  try {
    // Simulate delay
    await new Promise((resolve) => setTimeout(resolve, 4000));

    // Replace this with your actual static data
    return [
      { id: 1, name: "BMW" },
      { id: 2, name: "Nissan" },
      { id: 3, name: "Honda" },
    ];
  } catch (error) {
    throw error;
  }
}

function CarList() {
  const [error, setError] = useState(null);
  const [cars, setCars] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleClick = async () => {
    startTransition(async () => {
      fetchCarsData().then((data) => setCars(data))
      .catch((error) => setError(error.message)); 
    });
  };

  return (
    <div>
      <button disabled={isPending} onClick={handleClick}>
        {isPending ? "Loading..." : "Load Cars"}
      </button>
      {error ? (
        <p style={{ color: "red" }}>Error: {error}</p>
      ) : isPending ? (
        <p>Loading...</p>
      ) : cars.length > 0 ? (
        <ul>
          {cars.map((car) => (
            <li key={car.id}>{car.name}</li>
          ))}
        </ul>
      ) : (
        <p>No cars loaded yet.</p>
      )}
    </div>
  );
}

export default CarList;

In the example above, the fetchCarsData function is wrapped in startTransition function. This ensures that the UI remains responsive even during the API call. Plus we used the isPending flag to know if there is a pending transition.

Things to avoid when using useTransition hook

Avoid using useTransition hook for state changes that control input elements (text fields, etc.). These need immediate updates for a good user experience.
Use useTransition hook strategically for non-critical tasks that might cause lags, not for everything.
Be aware that currently multiple transitions might run together, which could affect their timing.
Profile your app to identify bottlenecks before applying useTransition hook.
User interactions always take priority over transitions.

Conclusion

While the useTransition hook offers performance benefits, it requires careful consideration. It functions like a queue for non-critical updates, prioritizing responsiveness during user interactions.

Excessive use can overload this queue, leading to delayed updates for both queued tasks and the overall application. It's best to use it strategically for tasks that can genuinely benefit from a slight delay without impacting the user experience.

I hope you enjoyed reading the article. If you have any questions, thoughts, or just want to say hello, I'd be thrilled to hear from you. Here's how you can reach out:

Drop me an Email: majd.hemud@gmail.com

Follow me 🥰

Explore My Portfolio

Whether you're looking for design inspiration, curious about my past projects, or just want to connect, my portfolio is the place to be.

Until next time peace ✌️🥰.

How to add Passage Authentication in Nextjs

Majd Hemud — Mon, 26 Jun 2023 07:24:59 +0000

First, I want to thank 1Password and Hashnode for hosting this amazing hackathon. It's my first time entering hackathons and it's awesome to join the Hashnode community that has innovation and lovely vibes 🥰.

So What is Passage?

Passage is a secure and Complete User Authentication solution. That helps you integrate secure login and registration with biometrics or magic links instead of passwords into your applications plus providing the smoothest login experience possible.

How did I use it in my Nextjs App?

So I used Passage to implement user Authentication in my Nextjs app, which was a bit challenging because I used Nextjs 13 with experimental features like using the app directory and adding custom styling to the passage-auth element but the result was great 😁.

Let's start adding Passage in your Nextjs app

First, you'll need to install the passage-elements package from npm:

npm i --save @passageidentity/passage-elements

Passage Console

To use Passage, you have to signup here first, go to My Apps , then create a new app

You can give any name for your app, for the domain in Nextjs it will be localhost:3000, and the redirect URL is the URL that will be used to redirect the user after a successful login or registration, like /dashboard or /home.

After creating your app, you will be redirected to the app dashboard. A new App ID will be generated to use it in your app.

To find it, head to the settings section then general

Plus you need the API Key to do API requests like checking if the passage auth token is still valid or not. To generate one, head to the settings section then API Keys

You can give it any name and click the Create Key

After creating the API Key, you need to copy it somewhere safe because it will be displayed once

Implementing Passage Authentication😁

After creating your app and getting the App ID and the API Key , you will need to create a .env file and insert these Environment variables:

PASSAGE_APP_ID= Your_app_id
PASSAGE_API_KEY= Your_api_key

Typescript Support

If you are using TypeScript with your Next.js app, youll need to add the following type declaration to your typings.d.ts file:

declare namespace JSX {
  import {
    PassageElement,
    PassageProfileElement,
  } from "@passageidentity/passage-elements";
  interface IntrinsicElements {
    "passage-auth": PassageElement;
    "passage-profile": PassageProfileElement;
  }
}

Creating the sign-in page

By using the App directory you will create a new page called signIn under the auth folder

And then inside the sign-in page, you will need to render the passage-auth element as follows:

"use client";

import { useEffect, useState } from "react";

type PassageAuthEnvValuesType = {
  appID?: string;
  apiKey?: string;
};

export default function SignIn() {
  const [passageAuthEnvValues, setPassageAuthEnvValues] =
    useState<PassageAuthEnvValuesType>({});

/* isMounted state is added to insure that the 
   passage-auth element is getting the appID */
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
    require("@passageidentity/passage-elements/passage-auth");

    const fetechEnvValues = async () => {
      const response = await fetch("/api/auth/passageAuth/envValues");
      const data = await response.json();
      setPassageAuthEnvValues(data);
    };
    fetechEnvValues();
  }, []);

  return isMounted && passageAuthEnvValues.appID ? (
    <passage-auth app-id={passageAuthEnvValues.appID}></passage-auth>
  ) : null;
}

API endpoint for Passage Authentication

For the API endpoint, you will need to create an endpoint called envValues to get the Environment variables for Passage Authentication

Inside the envValues route add the following endpoint:

export const GET = async () => {
  return new Response(
    JSON.stringify({
      appID: process.env.PASSAGE_APP_ID!,
      apiKey: process.env.PASSAGE_API_KEY!,
    }),
    { status: 200 }
  );
};

After adding the sign-in page and the endpoint for getting the Environment variables. The passage-auth element will be rendered as expected in the sign-in page

This was the basic implementation of Passage Authentication. But I made a cool implementation with this Authentication in my Nextjs app and it's called Promptopia.

Promptopia

Promptopia is an open-source AI prompting tool for the modern world to discover, create and share creative prompts.

Packages that I used in my project

In this Nextjs app, I used a lot of cool packages:

1- Framer Motion

Framer Motion is a powerful and easy-to-use animation library for React that helps you create smooth, responsive animations and interactions in your web applications.

2- Zustand

Zustand is a simple and lightweight state management library for React applications that allows you to easily manage and share state across components.

3- Tailwind CSS

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces in web applications. It provides a set of pre-built CSS classes that you can use to style your HTML elements, making it easier and faster to design responsive and visually appealing web pages.

4- Mongoose

Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js. It provides a simple and straightforward way to model your application data, manage database connections, and perform database operations like validation, querying, and schema management.

Final result

You can check out the final result of the Nextjs app here, plus I deployed it to Vercel. The deployment process was incredibly smooth and blazingly fast 😁.

Project code

I have shared the project code on GitHub, so if you run into any issues while cloning, just let me know in the comments below 👍.

Conclusion

And once again, I am truly grateful to 1Password and Hashnode for organizing such an inspiring event that led to the discovery of a groundbreaking approach to user authentication for any app or website. This innovative method holds the potential to revolutionize our digital experiences and create a brighter, more secure future 🙌.

I hope you enjoyed reading the article. If you have any questions, thoughts, or just want to say hello, I'd be thrilled to hear from you. Here's how you can reach out:

Drop me an Email: majd.sami1996@gmail.com

Follow me 🥰

LinkedIn
Twitter
GitHub

Explore My Portfolio

Whether you're looking for design inspiration, curious about my past projects, or just want to connect, my portfolio is the place to be.

Until next time peace ✌️🥰.

#1Password #BuildWith1Password