Scribd
Upload
27 views

React

Uploaded by

d44289959
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
27 views

React

Uploaded by

d44289959
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

1/7

New hook:
‘use0ptimistic’
1,36,982 likes
for day)
me eact (some
ollow ew r
f n
her
tures
ot fea

REACT 19
coming soon

Muhammad Mohsin
2/7

Purpose
The useOptimistic hook enhances user
experience by enabling immediate UI
updates based on anticipated results, even
before the server confirms the action.

This creates the illusion of a faster and


more responsive application.

Muhammad Mohsin
3/7

How it works
1. User Initiates Action: A user interaction triggers
an action, such as submitting a form or clicking a
button.
2. Optimistic State Creation: The useOptimistic hook
takes the current state as input and returns an
object containing two key parts:
optimisticValue: This represents the anticipated
state after the action is successful.
updateOptimistic: This function allows you to
update the optimisticValue based on user input or
other factors.
3. UI Update with Optimistic State: The UI
component utilizes the optimisticValue to reflect
the expected change on the screen.

Muhammad Mohsin
4/7

4. Background Operation Runs: In the background,


the actual operation (e.g., sending data to the
server) is carried out.
5. Outcome Handling:
Success: Upon successful completion, the
optimistic state becomes the permanent state,
and the UI remains consistent.
Failure: If the operation fails, the UI is reverted
to its original state, potentially displaying an
error message.

r code
ipe fo
sw

Muhammad Mohsin
5/7

Muhammad Mohsin
6/7

Real life Applications


E-commerce Shopping Carts: Update cart totals
immediately after adding or removing items,
providing a smooth shopping experience.

Messaging Applications: Display messages as


"sent" right away, even before server
confirmation, enhancing the feeling of real-time
chat interaction.

Social Media Likes: Show a like animation and


update the like count instantly upon clicking the
"Like" button, creating a more engaging user
experience.
(some 1,36,982 likes
day)

Muhammad Mohsin
7/7

Follow me for more content.

Muhammad Mohsin Senior Fronted Engineer | React js | Next js | Node js

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy