React 19 : useOptimistic Hook

import { HeartFilledIcon, HeartIcon } from "@radix-ui/react-icons";

import { Box, Strong, Text } from "@radix-ui/themes";

import { useOptimistic, useState, useTransition } from "react";



const UseOptimisticExample = () => {

  const [likes, setLikes] = useState(100);

  const [isPostLiked, setIsPostLiked] = useState(false);

  const [optimisticData, setOptimisticData] = useOptimistic(

    { likes, isPostLiked },

    (currentState, newLikes) => {

      return { likes: currentState.likes + newLikes, isPostLiked: true };

    }

  );

  const [, startTransition] = useTransition();



  const onLikeClick = () => {

    startTransition(async () => {

      setOptimisticData(1);

      //   Simulating API call

      await new Promise((resolve, reject) => {

        console.log("Request sent to server");

        setTimeout(() => {

          resolve(likes + 1); // To simulate API call success

          //   reject("API call failed"); // To simulate API call failure

        }, 8000);

      })

        .then((newLikes) => {

          console.log("API call success");

          setLikes(newLikes);

          setIsPostLiked(true);

        })

        .catch((error) => {

          console.error(error);

        });

    });

  };



  return (

    <Box py="1" px="2">

      {optimisticData.isPostLiked ? (

        <HeartFilledIcon

          color="red"

          style={{ height: "50px", width: "50px", cursor: "pointer" }}

          onClick={onLikeClick}

        />

      ) : (

        <HeartIcon

          style={{ height: "50px", width: "50px", cursor: "pointer" }}

          onClick={onLikeClick}

        />

      )}

      <br></br>

      <Text>

        <Strong>{optimisticData.likes} Likes</Strong>

      </Text>

    </Box>

  );

};



export default UseOptimisticExample;