React 19 New Features with TypeScript

1) use Hooks

import React, { Suspense, useState } from "react"
import ProductData from "./Component/ProductData"

const Application: React.FC<React.PropsWithChildren<any>> = () => {
  const handleResponse = () => {
    return new Promise((resolve, reject)=> {
      fetch('https://dummyjson.com/products')
      .then((e)=>e.json())
      .then((e)=>{
        if(e?.products) {
          resolve(e.products)
        } else {
          reject('DATA NOT FOUND')
        }
      })
      .catch((err)=>{
        reject(err)
      })
    })
  }

  const [response] = useState(handleResponse())

  return (
    <div className="wrapper">
        <h1>React 19</h1>     
        <Suspense fallback={<h1>Loading....</h1>}>
            <ProductData response={response} />
        </Suspense>
    </div>
  )
}

export default Application

import React, { use } from "react"

interface ValidateProductData {
    response?: any
}

interface DataResponse {
    title?: string
}

const ProductData: React.FC<React.PropsWithChildren<ValidateProductData>> = ({
    response
}) => {
    const data: DataResponse[] = use(response)
    console.log(data)
    return (
        <ul>
            {data && data.map((e: DataResponse) => <li>{e?.title}</li>)}
        </ul>
    )
}

export default ProductData

2) useFormStatus Hooks

import React, { useState } from "react"
import UserRegistration from "./Component/UserRegistration"

const Application: React.FC<React.PropsWithChildren<any>> = () => {

  const [data, setData] = useState({})

  const onSubmitting = async () => { 
    await fetch('https://dummyjson.com/products/add', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        ...data
      })
    })
      .then(res => res.json())
      .then(console.log);
  }

  return (
    <div className="wrapper">
      <h1>React 19</h1>
      <form action={onSubmitting}>
        <UserRegistration setData={setData} />
      </form>
    </div>
  )
}

export default Application

import React, { useEffect } from "react"
import { useFormStatus } from "react-dom"

const UserRegistration: React.FC<React.PropsWithChildren<any>> = ({
    setData
}) => {
    const { data, pending } = useFormStatus()
    useEffect(() => {
        if (data) {
            setData(data)
        }
    }, [data])
    return (
        <>
            <input name="email" type="text" placeholder="Enter Email Address" />
            <input name="password" type="password" placeholder="Enter Password" />
            <input name="cpassword" type="password" placeholder="Enter Confirm Password" />
            <button disabled={pending}>Submit</button>
        </>
    )
}

export default UserRegistration

3) useActionState Hooks

import React, { Fragment, useActionState } from "react"

interface ValidateErrors {
    name?: string;
    email?: string;
    password?: string;
}

const ActionStateHook: React.FC<React.PropsWithChildren<any>> = () => {

    const handlerFunction = async (previousState: unknown, formData: FormData) => {
        const email = formData.get('email') as string
        const name = formData.get('name') as string
        const password = formData.get('password') as string
        const errors: ValidateErrors = {}
        if (!email) {
            errors.email = 'Please enter the email address'
        }
        if (!name) {
            errors.name = 'Please enter the name'
        }
        if (!password) {
            errors.password = 'Please enter the password'
        }
        if (errors && Object.keys(errors).length) {
            return {
                errors: errors,
                feildData: {
                    name,
                    email,
                    password
                }
            }
        }
    }

    const [data, action, isPending] = useActionState(handlerFunction, undefined)

    return (
        <Fragment>
            <form action={action}>
                <input name="name" type="text" placeholder="Enter Full name" defaultValue={data?.feildData?.name} />
                <span className="error">{data?.errors?.name}</span>
                <input name="email" type="text" placeholder="Enter Email Address" defaultValue={data?.feildData?.email} />
                <span className="error">{data?.errors?.email}</span>
                <input name="password" type="text" placeholder="Enter Passowrd" defaultValue={data?.feildData?.password} />
                <span className="error">{data?.errors?.password}</span>
                <button>Submit</button>
            </form>
        </Fragment>
    )
}

export default ActionStateHook

4) useOptimistic Hooks

"use client"

import { useActionState, useState, useOptimistic, useEffect } from "react"
import UseOptimisticHookForm from "./UseForm"

interface ValidateList { 
    title: string
}

const UseOptimisticHook = () => {

    const [categories, setCategories] = useState<ValidateList[] | null>(null)
    const [optimistic, setOptimistic] = useOptimistic<ValidateList[] | null>(categories)

    const getCategories = async () => {
        await fetch('https://www.aciledu.com/example/index.php?type=category')
            .then((e) => e.json())
            .then((response) => {
                if (response?.data) {
                   setTimeout(()=>{
                     setCategories(response.data)
                   },1000)
                }
            })
    }

    useEffect(()=>{
        getCategories()
    },[])

    const saveCategories = async (previousState: unknown, formData: FormData) => {
        const subject = formData.get('subject') as string
        const error: any = {}
        if (!subject) {
            error.message = 'Pleae enter the subject'
        }

        const optimisticCategory = { title: subject }

        setOptimistic((prev)=>[...prev, optimisticCategory])

        await fetch(`https://www.aciledu.com/example/index.php?type=saveCategory&title=${subject}`)
        getCategories()
    }

    const [data, action] = useActionState(saveCategories, undefined)

    return (
        <>
            <h1>List</h1>
            <form action={action}>
                <input name="subject" type="text" placeholder="Enter Subject" />
                <button>Submit</button>
            </form>
            <UseOptimisticHookForm categories={optimistic} />
        </>
    )
}

export default UseOptimisticHook

const UseOptimisticHookForm = ({
    categories
}:any) => {
    
    return (
        <ul>
            {categories?.map((e:any)=><li>{e.title}</li>)}
        </ul>
    )
}

export default UseOptimisticHookForm