·
⚛️1️⃣9️⃣ React 19 NEW hooks coming soon
1️⃣ use(Promise)
* suspend on it until it resolves.
* used for data fetching, and it will make it easier to build Single-page apps based on REST or GraphQL APIs.
const News = ({ newsPromise }) => { const news = use<string[]>(newsPromise); return ( <ul> {news.map((title, index) => ( <li key={index}>{title}</li> ))} </ul> ); };
2️⃣ use(Context)
* like useContext, except it can be called within loops and conditional statements
function HorizontalRule({ show }) { if (show) { const theme = use(ThemeContext); return <hr className={theme} />; } return false; }
3️⃣ Form Actions
* enables you to pass a function to the action prop of a 〈form〉
〈form action={handleSubmit} /〉
4️⃣ useFormState
* allow to access the return value of an action from the last time a form was submitted
function MyComponent() { const [state, formAction] = useFormState(action, null); // ... return 〈form action={formAction}〉{/* ... */}〈/form〉; }
5️⃣ useFormStatus
* lets you know if a parent 〈form〉 is currently submitting or has submitted
const { pending } = useFormStatus(); return ( 〈button disabled={pending} type="submit"〉 Add to Cart 〈/button〉 );
6️⃣ useOptimistic
* lets you optimistically update the user interface while an action is being submitted.
const [optimisticCart, optimisticAddToCart] = useOptimistic〈Item[], Item〉( cart, (state, item) =〉 [...state, item] ); return ( 〈〉 〈Cart cart={optimisticCart} /〉 〈AddToCartForm...
#react #programming #react19 #new #hooks