Scribd
Upload
14 views

Usememo Usecallback

about react js concepts

Uploaded by

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

Usememo Usecallback

about react js concepts

Uploaded by

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

Look Beyond

useMemo &
useCallback hooks
Uncommon Performance Hooks

Topic Covered useTransition useDeferredValue

Expert Level All Level.


Brief Introduction
When your app needs to update the screen, you can't always
avoid re-rendering. However, you can boost performance by
distinguishing between two types of updates:

Blocking Updates:

These are the ones that must happen right away, like when
you're typing in an input field. They're synchronous and need
to keep the UI responsive.

Non-blocking Updates:

These updates, such as refreshing a chart, don't have to


disrupt the user interface. They can happen in the
background without slowing down the user's experience.

By managing these two types effectively, you can keep your app
both interactive and efficient.
Introduction Contd.....
To handle those non-blocking updates gracefully, React offers
two handy tools:

useTransition Hook:

With this, you can mark an update as non-blocking, allowing other


tasks to interrupt it. Great for keeping your app responsive.

useDeferredValue Hook:

This one helps you delay updates that aren't critical, letting more
important updates happen first. It's a handy trick for optimizing
performance.

Lets look at each of them individually


useTransition Hook
The useTransition Hook is used to mark a state transition as
non-blocking, allowing other updates to interrupt it. Here's a
breakdown of how you can use it:

Marking a Transition as Non-blocking: When you


apply useTransition to a state change, React
understands that this transition should not block the UI.
For example, if you are updating a chart or performing
any other non-critical UI update, you can wrap that
code with useTransition.

Allowing Other Updates to Interrupt: While the


transition is ongoing, if there are other updates or user
interactions happening (like typing into an input field),
React will allow those updates to interrupt the
transition. This ensures that the UI remains responsive,
and the user experience is not negatively impacted.
useDeferredValue Hook
The useDeferredValue Hook is used to defer updating a
non-critical part of the UI, allowing other parts to update
first. This is helpful when you have updates that are not
time-sensitive and can be delayed to improve performance.

Deferring Updates: When you use useDeferredValue,


you are essentially telling React that the value being
updated doesn't need to be immediately reflected in
the UI. This can be beneficial for things like loading
images or rendering content that is not immediately
visible to the user.

Improving Performance: By deferring non-critical


updates, you allow React to prioritize rendering other
parts of the UI that are more important or time-
sensitive. This can lead to a smoother user experience,
especially in cases where there are multiple updates
happening simultaneously.
In a nutshell, both useTransition and
useDeferredValue are React Hooks
that work like a charm for boosting
your app's performance and user
experience.

useTransition: useDeferredValue
It's your go-to when you This one's all about
want an update to play nice delaying non-urgent
with others, allowing them to updates, so the important
stuff gets attention first.
jump in while it's doing its
It's a smart move when
thing. This keeps your app
you need your app to be
feeling snappy.
both speedy and
responsive.
Stay tuned
🙏🏼
#Followformore
Code Examples coming soon

You might also like