Forem: ShreenidhiBatavi

React useTransition Hook : The Tool for Non-Blocking Updates

ShreenidhiBatavi — Sun, 23 Feb 2025 05:58:50 +0000

React offers various hooks to efficiently manage state and side effects. One such hook, introduced in React 18, is useTransition, which enhances UI responsiveness. It allows developers to handle state updates in a non-blocking manner, ensuring smoother performance and a better user experience.

What is the useTransition Hook ?

The useTransition hook is a built-in React hook that helps defer state updates by marking them as low-priority. This means that high-priority updates, like user interactions, remain smooth, while other updates can wait for a more optimal time to execute.

Syntax
const [isPending, startTransition] = useTransition();

isPending: A boolean that indicates whether the transition is still pending.
startTransition: A function that wraps the state update to mark it as a transition.

Example: Using useTransition for List Filtering

We have a App component that renders the ItemsList component. To effectively demonstrate useTransition, we generate a large list of items with the help pf generateLargeList function and pass it as a prop to ItemsList.

The ItemsList component receives the items prop and displays them inside a <ul> element.It also includes an input field for filtering the list dynamically.Within ItemList,we maintain two state variables:

One for storing the input field’s value.Another for managing the filtered list of items.After setting up and running the application, you’ll notice a lag in the input field updates.The typed values don’t appear instantly because the UI is blocked while rendering the filtered list of items

Let’s address this issue with the help of useTransitionhook

As you can see, we’ve now imported the useTransition hook. Using startTransition, we mark filteredItems as a low-priority update, ensuring smoother UI interactions. Additionally, isPending returns a boolean value, indicating whether a transition is in progress. This can be used to display a loading indicator while the filtering process is happening.

Now, the input field updates instantly without any lag,asstartTransition ensures that filtering happens in the background.Once the filtering process is complete, the UI updates smoothly without blocking user interactions.

When to Use useTransition?

You should consider using useTransition in the following cases:

Filtering Large Data: Ensuring smooth typing experience while filtering data in the background.
Rendering Heavy Components: Deferring complex re-renders while keeping the UI responsive.
Optimizing UI Performance: Preventing lag in interactive components.

Conclusion
The useTransition hook is a powerful tool for improving UI responsiveness by deferring non-urgent updates. By marking updates as transitions, React can prioritize user interactions, making applications feel smoother and more performant. If you're dealing with slow UI updates due to expensive renders, useTransition can be a great solution.

That’s it for now! Thanks for reading. See you in the next post!

structuredClone - A modern way to deep clone objects in javascript

ShreenidhiBatavi — Mon, 30 Sep 2024 10:39:31 +0000

In JavaScript, when working with objects or arrays, especially within React components, we often need to take a copy of the current state or variable

Many of us use the spread operator (...) for this purpose. While this is great for creating shallow copies, it falls short when it comes to deep copies, which can lead to unintended behavior. Let's understand this with an example.

Problem: The spread operator only creates a new reference for top-level properties. Since arr is a nested, so it is referenced in both obj and obj_copy changes made in obj_copy affect the original obj object as well.

To solve this problem, we need a deep copy. There are a few ways to achieve this:
Libraries like Lodash: You can use libraries such as Lodash (_.cloneDeep) to handle deep copies.
JSON Methods: A common approach is using JSON.stringify() and JSON.parse() to create a deep copy:

Using third-party libraries for deep cloning adds extra weight to your bundle, Instead of relying on libraries or using the JSON methods, structuredClone is a native, efficient way to deep clone JavaScript objects, introduced in recent versions of modern browser

While the spread operator is handy for creating shallow copies, it falls short for deep cloning nested objects or arrays. Modern JavaScript provides a built-in, efficient solution in the form of structuredClone(), which ensures that objects are properly copied without unexpected reference sharing. This makes structuredClone() a perfect fit for use cases where immutability is crucial, such as state management in React applications.

That's it for now! Thanks for reading. See you in the next post!

Introduction to useActionState -New hook in React

ShreenidhiBatavi — Thu, 26 Sep 2024 03:34:21 +0000

The useActionState hook is a new feature introduced in React 19, designed to simplify state management based on form actions. It offers a powerful way to handle asynchronous form submissions and automatically manage the state and loading states associated with these actions. In this post, we'll dive into the useActionState hook and explore how it works with a practical example.

Practical example on usage of useActionState

Before getting started, please ensure that React 19 is installed.

To illustrate how the useActionStatehook works, let's implement a basic counter application for simplicity. The same principles, however, can be easily applied to more complex forms and interactions

First, import the useActionState hook from React as follows:

Now that we’ve imported the hook, let’s look at how to use it in our component.

Let’s try to understand the syntax of useActionState , this hook accepts two primary arguments, one is from submit handler and then second argument is initial state (this also takes third arguments which is an optional, but for simplicity, we’ll focus on the two required arguments in this post)

This hook returns an array with three elements

counterValue— The first value returned, representing the current state. In this case, it’s the counter value.

formAction- This is the function to be called when the form is submitted

isPending— A boolean indicating whether the form action is still processing (useful for showing loading indicators).

Now that we’ve covered the basic import and syntax of useActionState, let's see how it works in the example

Here’s the complete example using useActionState to increment a counter:

Let’s try to understand the code written in above snippet.As mentioned earlier we have imported useActionState from react and using it in the App component

1 . This hook is taking two arguments

increment: This is an asynchronous function executed when the form is submitted. It takes the previous counter state and returns a new state after a 1-second delay.

Initial State (0): The initial value of the counter is set to 0

Increment Function: let’s understand the functionality of increment function. This function takes two parameters

previousState: The last known state of the counter.

formData: Data from the form submission (not used in this case, but from this formData we can access from field values).

This function returns a Promise that simulates an asynchronous operation (like a server call) using setTimeout. After one second, it resolves with the new state, which is previousState + 1. This effectively increments the counter by one.

In jsx we are rendering form within that we are rendering our counter and a button to increment the counter. The action prop of the <form>is set to formAction, which will handle the submission upon clicking Increment button.

inside the form we are conditionally rendering either "updating..." if isPending is true (indicating the form is processing), or displays the current counterValue.

The “Increment” button is disabled while isPending is true to prevent additional submissions during the ongoing update.

Finally we have implemented a simple counter using the useActionState hook in React, where the counter is incremented asynchronously by one second each time the form is submitted. It also displays a loading message ("Updating...") while the increment action is in progress.

Now we’ve understood the useActionState , let’s see some of the benefits of it.

Benefits of useActionState

Simplified State Management: The useActionState hook automatically updates the component's state based on the result of the action function, reducing the need for manually managing state changes.

Loading State Handling: The isPending value provided by the hook makes it easy to display loading indicators or disable form elements during asynchronous actions.

Automatic Form Reset: After a successful submission, the form is automatically reset to its initial state, making the development process more efficient.

Cleaner, More Maintainable Code: By encapsulating form state and actions,

useActionState promotes a more concise and maintainable codebase.
The useActionState hook is a valuable addition to React for handling form actions and asynchronous state updates. It simplifies common tasks like managing loading states and resetting forms after submission. By using this hook, you can write cleaner, more efficient, and maintainable code.

That’s it for now! Thanks for reading. See you in the next post!

Lesser know JavaScript array methods part -1

ShreenidhiBatavi — Wed, 10 Apr 2024 15:38:29 +0000

Arrays are fundamental building blocks in programming.We are familiar with accessing any element and changing its value with tradition method i.e using index and square bracket notation

while that is a common way, JavaScript offers new & alternative method i.e array.with(). This method is used to replace the value of an element at a specific index in an array with a new value, while returning a new array with the updated elements. The method takes two arguments: the index of the element to be replaced, and the new value to be assigned to that index

arr.with(index,value)

Advantages of this method over bracket notation is, by giving negative index, it is possible to traverse in reverse order of array eliminating the need for calculations like array.length - number

If there are empty slots in original array , then this method replaces it with undefined and return a new array

const arr = [1, 2, , 4,];
console.log(arr.with(1, 8)); // [1, 8, undefined ,4]

A Quick Introduction to CSS container queries

ShreenidhiBatavi — Mon, 06 Nov 2023 18:20:37 +0000

CSS container queries are a new feature that is added into CSS and that can be a game changer in developing responsive layouts, especially in the era of component based ui development.

we all have been using media queries from long time and this container queries will be an alternative to media queries and on top of that it provides more flexibility.

responsive layouts are developed with help of media queries, but we all know that media queries works based on screen resolution

but the container queries gives us more flexibility by styling the element based on the size of the container rather than resolution of screen. Which means that we can apply styling to all the elements inside a container based on the size of container

Let’s try to understand this with simple and basic example.

Here we have a div with class name as card which contains an image and some dummy text inside p tag.This card is wrapped inside another div with class as main and this main div will be our container.

with some basic styling i.e by displaying it as flex and some background colour the image and text are displayed adjacent to each other in a row.

The adjacent placement of the image and card looks good on larger screens, but on smaller screens, they need to be stacked in a column.

Until now, we have used media queries to achieve this.Now let’s try with help of container queries.In order to do that the main div needs to be defined as container.

To make this main div as container we have to define container type property as shown below

To make it as container we have to set container-type property to as inline-size,basically container-type property can have two of types of values one is inline-size and another one is size. lets focus on inline-size as most probably we will be using this value itself.

Next, we need to write the responsive styling using container queries. Container queries are similar to media queries, but instead of the media keyword, we use the @container keyword. We then define the size of the container. Remember that the size we define is for the container, not for the screen. In the above code, for card class we are defining the flex direction as column. This will be applied as soon as the container size goes less than 600px, and the image and paragraph will be stacked one below the other as shown below.

yes that is it! This is how you can write container queries.

Before ending this article, lets try to understand few points about container queries

Nested container queries: If an element is nested within multiple containers, the styles within the inner most containers are influenced by its close or immediate parent container.
Named container queries: We can also use named container queries to target specific container elements. To define a named container, we use the container-name property and give it any value we want.

Here we are defining named container with container-name as property and card as value

This container query will only apply the styles to the .card element if the container named card has an inline size of 600px or less.

That’s it for now! Thanks for reading. See you in the next post!