Your Guide to Use React 18 Hooks useTransition and useDeferredValue

Ahmed Arafa — Wed, 03 May 2023 07:22:47 +0000

In this post, we will demonstrate what are react 18 hooks useTransition and useDeferredValue and how can we use them to improve our app performance.

The version 18 of React was released a few months ago, which means that we are not breaking new ground, reading and exploring what's new in the updated version is good but what's much better to involve it in a practical application.

So let's begin our journey.

Assume you have a list of employees in your database and you make API requests to filter those employees by name.
If the number of employees is huge and the data is not returned paginated from the server-side or the server capability is limited or any other reason, You may run into trouble. This can result in the app appearing sluggish when filtering employees.

let's mockup this process.

Here, we have implemented an input that takes the name of an employee to display it inside the input box and to filter through the employees' array at the same time.
The result of this filtering process is unsatisfactory. It takes a long time to display the characters in the search box, as well as to display the results. This delay becomes even more obvious when typing many characters simultaneously, The process can take multiple seconds, which is a significant amount of time.

⚠️if the GIF not loaded view it from HERE

useTransition()

This is where useTransition() comes into play.
useTransition() can be used to tell React that certain state updates have a lower priority (i.e., all other state updates or UI rendering triggers have a higher priority).
These state updates will be executed in parallel with other state updates, but the rendering of the component will not wait for these less important state updates.

When calling useTransition(), you get back an array with exactly two elements: An isPending boolean value, telling you whether the low-priority state update is still pending (we can use it to show a spinner while data is processing), and a startTransition() function that can be wrapped around a state update to tell React, that it is a low-priority update.

To make the app more responsive, we need to set a lower priority for listing the employees so that it doesn't delay the display of characters in the search box.
So We will wrap the setState of the employees array "setEmployeesList" in startTransition() callback function as follows:

Here, we are telling React that "setEmployeesList" is a low-priority state. This is to ensure that it does not cause any delay to other states, including the UI rendering triggers.

⚠️if the GIF not loaded view it from HERE

useDeferredValue()

We can achieve the same result using useDeferredValue.
The useDeferredValue hook allows us to fix this slow render problem by implementing a delay before some information is calculated.
So that our deferred value will only be calculated after the important state updates have finished running.
However, the difference is that useDeferredValue() is used to wrap values (states), not setter functions (setStates). If you have a component that takes a prop from a parent component or accesses global state (where you don't have control of the state and only access the value), then useDeferredValue() can be used in this scenario.

for example:

Conclusion:

Both of useTransition and useDeferredValue are using to low-prioritize some updates.
The difference is that useTransition() wraps the state updating code, whilst useDeferredValue() wraps a value that's affected by the state update. You don't need to (and shouldn't) use both together, since they achieve the same goal in the end.

Instead, it makes sense to prefer useTransition(), if you have some state update that should be treated with a lower priority and you have access to the state updating code. If you don't have that access or you're accessing third-party library for example, use useDeferredValue().

Feel free to write your thoughts in the comments section👇🏼
Have a Good day.

Real-World Uses for :has() CSS Selector

Ahmed Arafa — Thu, 27 Apr 2023 08:08:30 +0000

In this post, we'll take a look at :has() CSS selector real-world uses and how it can make your code better by reducing the amount of code you need to write.

First Case:

Have you ever created an interactive component that requires the ability to modify styles elsewhere on the page?
Suppose that we have a navbar with navigation items. Upon clicking a navigation item, a dropdown menu is displayed containing the relevant information.

Let's create it.

It is a common practice to modify the style of the navbar (e.g., change its height, color, opacity, etc...) and change the dropdown chevron related to the navigation item from "⌄" to "⌃" when displaying a dropdown.

I feel like I need to do this kind of stuff all the time.

As we know, It is not possible to directly modify the style of a parent selector from a child selector. Therefore, the old approach was to make this effect using JavaScript, as follows 👇

Within the function that toggles the dropdown "toggleDropDownMenu" we get the navbar element and change its color based on the dropdown's current state.

Whenever I implement something like this, I often find myself wondering if is it worth this hassle to just change color or height or whatever kind of style?

So, let's do some magic✨

We will modify the navbar styles-set to be as follows:

We utilized the :has() selector to verify whether the "nav" contains an element with both the class names "dropdown" and "show" within its descendants. If such an element exists, it indicates that the dropdown is currently displayed. Consequently, the color of the navbar will be changed.

Here is the codepen for this case:

Second Case:

Assume we have a table of companies with their contacts and locations as follows:

Adding a colored hover effect to your table rows can be a nice UX improvement. Additionally, it helps your eyes keep track of which row you're on as you scan the table.

But what if the table only has one row? This effect sounds useless, right?🤔
any solutions?

YES, exactly. we will use the :has() selector to decide whether we will add this hover effect to the table rows or not, depending on the number of rows.

This code snippet checks if the table has at least two rows (excluding the header), and applies the hover effect accordingly. If the table contains only one row, the effect is not applied.