DEV Community: Davide Cannerozzi

Understanding React's useTransition Hook: Keep Your UI Smooth

Davide Cannerozzi — Wed, 03 Dec 2025 19:58:59 +0000

The Problem

Imagine you're building a search feature for a list of 2,000 products. Every time a user types a letter, your app filters the entire list and re-renders it. What happens? The input lags. The user's typing feels sluggish and frustrating.

This is a common problem when dealing with heavy updates in React. What if we could tell React: "Hey, updating this list is important, but keeping the input smooth is MORE important"?

That's exactly what useTransition does.

What is useTransition?

useTransition is a React hook (introduced in React 18) that lets you mark certain updates as non-urgent. This means React can prioritize user interactions (like typing) over heavy rendering tasks (like filtering a huge list).

Basic Syntax

const [isPending, startTransition] = useTransition();

startTransition: A function that wraps non-urgent updates
isPending: A boolean that tells you if the transition is still in progress (useful for showing loading states)

How It Works

React categorizes updates into two types:

Urgent updates: User interactions like typing, clicking, hovering
Non-urgent updates: Heavy operations like filtering, sorting, complex calculations

When you wrap an update in startTransition, you're telling React: "This can wait. Keep the UI responsive first."

Real Example: Filtering a Large List

Let's build a practical example. We have 2,000 products and want to filter them as the user types.

The Data

// hugeList.ts
export interface Product {
  id: number;
  name: string;
}

export const hugeList: readonly Product[] = Array.from(
  { length: 2000 },
  (_, i) => ({
    id: i,
    name: `Product ${i}`,
  })
);

Without useTransition (Laggy)

function App() {
  const [value, setValue] = useState("");
  const [filteredProducts, setFilteredProducts] = useState(hugeList);

  const handleChange = (newValue) => {
    setValue(newValue);
    // This blocks the input!
    setFilteredProducts(
      hugeList.filter((item) =>
        item.name.toLowerCase().includes(newValue.toLowerCase())
      )
    );
  };

  return (
    <>
      <input value={value} onChange={(e) => handleChange(e.target.value)} />
      <ProductList items={filteredProducts} />
    </>
  );
}

Problem: Every keystroke triggers a heavy filter operation that blocks the input.

With useTransition (Smooth)

function App() {
  const [value, setValue] = useState("");
  const [filteredProducts, setFilteredProducts] = useState([...hugeList]);
  const [isPending, startTransition] = useTransition();

  useEffect(() => {
    startTransition(() => {
      setFilteredProducts(
        hugeList.filter((item) =>
          item.name.toLowerCase().includes(value.toLowerCase())
        )
      );
    });
  }, [value]);

  return (
    <>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      {isPending && <p>Filtering...</p>}
      <ProductList items={filteredProducts} />
    </>
  );
}

Result: The input stays smooth! React keeps it responsive while filtering happens in the background.

When to Use useTransition

Perfect for:

Filtering or sorting large lists (1,000+ items)
Heavy calculations that slow down the UI
Complex rendering (charts, graphs, data tables)
Tab navigation with heavy content

When NOT to Use useTransition

Skip it for:

Small, fast updates (simple toggles, counters)
Updates that must happen immediately
API calls (better handled with loading states and async patterns)
Animations (use CSS or animation libraries)

Important Limits

useTransition is not magic. It doesn't solve everything:

50,000+ DOM elements will still be slow. You need virtualization (like react-window)
It's not a replacement for React.memo, lazy loading, or code splitting
It only helps with React updates, not external operations

Best Practices

Use only for genuinely heavy updates - Don't wrap everything in startTransition
Combine with other optimizations - Use memo, useMemo, and proper component structure
Show feedback with isPending - Let users know something is happening
Test with realistic data - 10 items won't show the difference, 2,000 will

Conclusion

useTransition is a powerful tool for building smooth, responsive UIs in React. It's not about making things faster—it's about making the right things fast (user interactions) and letting the heavy things wait (complex rendering).

💻 Complete Code

Check out the full working project on my GitHub:

github.com/DavideCannerozzi/react-use-transition-search

Handling HTTP Requests in React with AbortController

Davide Cannerozzi — Thu, 09 Oct 2025 12:29:32 +0000

Introduction

When building React applications, we often need to fetch data from APIs. But what happens if a component is removed from the page before the request finishes?
Updating the state of an unmounted component can cause warnings or even memory leaks.
To handle this safely, we use AbortController.

What does “unmounting a component” mean?

Unmounting a component means React removes it from the DOM. This can happen when:

The user navigates to another page or component.
Conditional rendering becomes false
The parent component is removed or updated.

After unmounting, you should not update the component’s state. If a fetch request is still running and tries to update state, React shows this warning:

Warning: Can't perform a React state update on an unmounted component.

This warning indicates a potential memory leak. The fetch continues running even though the component is gone, wasting memory and CPU.

What is AbortController and why use it?

AbortController is a browser API that allows you to cancel an ongoing fetch request.

Benefits:

Prevents warnings when a component unmounts before the request finishes.
Avoids memory leaks.
Saves network and system resources.

When to use it:

When fetching data in a component that can disappear quickly.
When a user can cancel an action or navigate away.
For long-running or multiple concurrent fetch requests.

Practical Example: Custom useFetch Hook with AbortController

Below is a complete example of a custom hook that uses AbortController to safely fetch data:

import { useEffect, useState } from "react";

export interface AlbumDataProps {
  userId: number;
  id: number;
  title: string;
}

export const useFetch = () => {
  const [data, setData] = useState<AlbumDataProps[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const controller = new AbortController(); // 1. Create controller

    const fetchData = async () => {
      try {
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/albums",
          { signal: controller.signal } // 2. Connect fetch to controller
        );
        const albums = await response.json();
        setData(albums);
      } catch (err) {
        if (err instanceof Error) {
          // 3. Ignore AbortError if request is canceled
          if (err.name === "AbortError") return;
          setError(err.message);
        } else {
          setError("Unknown error");
        }
      } finally {
        setLoading(false); // 4. End loading regardless of outcome
      }
    };

    fetchData();

    // 5. Cleanup: cancel fetch if the component unmounts
    return () => controller.abort();
  }, []);

  return { data, loading, error };
};

How it works

State management: data, loading, and error track the request status.
useEffect: Runs the fetch when the component mounts.
AbortController: Creates a controller to cancel fetch if needed.
Signal connection: The signal property links the controller to the fetch. Calling controller.abort() stops the fetch.
Error handling: Regular errors are caught and saved in error. Abort errors are ignored intentionally.
Cleanup function: The return function cancels the fetch when the component unmounts.

Using the Hook in a React Application

Here’s how the hook works in a real app:

import { useState } from "react";
import Button from "./components/Button/Button";
import CardsList from "./components/CardsList/CardsList";
import { useFetch } from "./hooks/useFetch";

function App() {
  const { data, loading, error } = useFetch();
  const [show, setShow] = useState(false);

  return (
    <>
      <Button setShow={setShow} show={show} />
      {show && (
        <div>
          {loading && <p>Loading...</p>}
          {error && <p style={{ color: "red" }}>{error}</p>}
          {!loading && !error && <CardsList albums={data} />}
        </div>
      )}
    </>
  );
}

export default App;

Explanation:

Clicking the button toggles the list visibility.
When the list is shown, useFetch runs and fetches data.
If the user hides the list before fetch completes, AbortController safely cancels the request.
No warnings are shown, and the app remains stable.

Conclusion

Using AbortController in React ensures that components can safely unmount without causing memory leaks or warnings.
It’s essential for components that fetch data but can appear and disappear quickly, such as toggled lists, modals, or tabs.

You can view the complete project on GitHub (including App.tsx, Button, CardsList, and Card components) to explore the full implementation.

🚀 React useState Lazy Initialization: A Complete Guide

Davide Cannerozzi — Tue, 30 Sep 2025 11:47:28 +0000

Introduction

When building React applications, one of the most fundamental tools we use, is component state management through the useState hook. In most cases, we directly assign an initial value to our state, but this approach isn't always the most efficient solution. Sometimes, computing that initial value can be an expensive operation or simply unnecessary to repeat on every render.
For these specific scenarios, React provides lazy initialization with useState: a simple yet powerful technique that can significantly improve your application's performance.

Understanding Lazy Initialization

The Problem
In typical usage, you might write:

const [count, setCount] = useState(expensiveCalculation());

Here's the issue: expensiveCalculation() executes on every render, even though we only need its result once. React ignores the value after initialization, but the function still runs, wasting resources.

The Solution
With lazy initialization, pass a function instead:

const [count, setCount] = useState(() => expensiveCalculation());

Now React executes expensiveCalculation() only once during the initial render and never again.

When to Use It

Use lazy initialization when:

Reading from external sources: localStorage, sessionStorage, cookies, or the DOM
Expensive computations: Parsing large JSON, complex calculations, or processing big datasets
Complex data structures: Building intricate initial configurations or nested objects

Don't use it for simple values like useState(0), useState(""), or useState([]). The overhead isn't worth it.

Real-World Example: Theme Persistence

import { useEffect, useState } from "react";

function App() {
  const [theme, setTheme] = useState<string>(
    () => localStorage.getItem("theme") || "light"
  );

  useEffect(() => {
    localStorage.setItem("theme", theme);
  }, [theme]);

  return (
    <div
      style={{
        backgroundColor: theme === "dark" ? "#222" : "#fff",
        minHeight: "100vh",
      }}
    >
      <button onClick={() => setTheme("light")}>Light Theme</button>
      <button onClick={() => setTheme("dark")}>Dark Theme</button>
    </div>
  );
}

export default App;

Why Use Lazy Initialization?

Without it:

// ❌ localStorage.getItem runs on EVERY render
const [theme, setTheme] = useState(localStorage.getItem("theme") || "light");

With it:

// ✅ localStorage.getItem runs ONLY ONCE
const [theme, setTheme] = useState(() => localStorage.getItem("theme") || "light");

Benefits

Performance: Eliminates redundant localStorage reads on every re-render
Efficiency: Avoids synchronous I/O operations that slow down rendering
Clarity: Explicitly shows initialization-only logic

Without Lazy Initialization

Every time the component re-renders (button clicks, parent updates), you're:

Performing unnecessary localStorage reads
Wasting CPU cycles on discarded results
Degrading performance in frequently re-rendering components

Conclusion

Lazy initialization with useState is a targeted optimization for expensive or external initialization operations. Use it when reading from localStorage, performing heavy calculations, or building complex data structures.

Remember: Apply it only where it matters. Don't over-optimize simple values, but don't ignore it when dealing with costly operations.

HTML5 | Build a Widget with
and
tag!

Davide Cannerozzi — Fri, 11 Feb 2022 11:08:59 +0000

The beauty of being a programmer is that we always have new things to learn and test.
Surfing the internet, I came across two HTML tags that I didn't know.
I immediately wanted to test them, and now I would like to write an article.

I am talking about:

<details>
<summary>

These two tags were recently introduced with HTML 5.1, and they are helpful if we want to create a widget that you can open and close whenever you want.

The summary tag is used along with the details tag.

Open your code editor and type

<body>
   <details>
   </details>
</body>

A cute triangle and the word Details will appear on our web page.
If we click on the triangle or the text, you will see that the small triangle will change position indicating the bottom, ready to show us some content that we have not yet entered.

Let's say that we don't like the word details, and we want a different text for our project.

How do we change it?
Easy, using the tag summary.

Between the details tag put the summary tag and the text you want to output.
In my case, I will write Show More.

<body>
   <details>
      <summary>Show More</summary>
   </details>
</body>

Now it's time to show something inside the widget.

Below the summary tag, we put the content we want to show when the user clicks on the arrow.

You can put any HTML tag you want, h1, h2, a list of elements, and so on.

<body>
   <details>
      <summary>Show More</summary>
      <p>Hi Developer!</p>
   </details>
</body>

The details tag can have a default value ( closed ) and an open value.
The open value will show the content without clicking on the arrow

<body>
   <details open>
      <summary>Show More</summary>
      <p>Hi Developer!</p>
   </details>
</body>

Now that we know more about these two tags,let's build a simple FAQ widget.

Html:

<body>
   <h1>FAQ</h1>
   <details>
      <summary>What is HTML?</summary>
      <p>The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser.!</p>
   </details>
   <details>
      <summary>What is CSS?</summary>
      <p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.</p>
   </details>
   <details>
      <summary>What is Javascript?</summary>
      <p>JavaScript, often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS</p>
   </details>
</body>

Css:

body{
   width:80%;
   margin:2rem auto;
   font-family:'Courier New', Courier, monospace;
}
h1{
   text-align: center;
   font-size: 3rem;
}
summary{
   padding:1.2rem;
   background-color: rgb(250, 179, 49);
   margin-top:1.5rem;
   font-weight: 600;
}

p{ padding:1rem }

Output:

All this without Javascript!!

The useState Hook!

Davide Cannerozzi — Tue, 08 Feb 2022 12:54:30 +0000

Before React implemented the Hooks, changing state was only possible inside class components.
From React 16.8, we can change the state inside a functional component.

React offers many built-in Hooks:

useState,
useReducer,
useEffect

and much more!

This article will show you how to use the useState Hook inside a functional component.

Before continuing, make sure that you know at least some basics of React and Javascript ES6.

The useState() Hook is just a simple Javascript function that returns two values.

We can store any value type( array, numbers, strings, objects, booleans ).

To make the concept easier to understand, I will build a simple App where the data changes when the user clicks on a button.

1. CREATE A FUNCTIONAL COMPONENT COUNTER.JSX

In React you can define a functional component using the arrow function syntax

const Counter =  () => {
   return(
     <div></div>
   )
}

or like this

function Counter(){
    return(
      <div></div>
    )
}

In this article, I will use the arrow function syntax.

IMPORT THE useState HOOK FROM THE REACT LIBRARY

import React, { useState } from ‘react‘

Inside the Counter component, let’s create a button and a paragraph.

The button will increment the counter inside the paragraph tag.

  return(
    <div className=‘App‘>
      <p>Counter:</p>
      <button>Increment Counter</button>
    </div>
  )

3. SET THE STATE

Now that we have our component, we can write the useState() Hook, using the array destructuring ES6 syntax.

The first value( counter ) is the current state, the second value ( setCounter) is the function that we will invoke to update the state.

The argument inside the useState is set to 1, which means that the counter now is equal to 1.

  return(
     const [counter,setCounter] = useState(1)
    <div>
      <p>Counter:{ counter }</p>
      <button>Increment Counter</button>
    </div>
  )

4. OUTPUT AND INCREMENT THE STATE

If you are familiar with javascript, this might be easy for you.

First of all, we pass the onClick events to the button.
The onClick event take a function where we use the setCounter to update the initial counter.

Remember: in React we use curly braces to evaluate a Javascript expression, a variable, a sum of two numbers, a function, and so on.

const Counter = () => {

const[counter,setCounter] = useState(1)

return(
    <div>
      <h1>useState Hook – React</h1>
      <p>Counter: { counter }</p>
      <button onClick={() => setCounter( counter + 1 )}>Increment 
      </button>  
    </div>
  )
}

In our case counter was equal to 1, and we just added + 1 to increment it by one.

Click on the button and you will see!

Good to Know:

You can't use Hooks inside a class components

You can set as much useState as you need inside your component

How to Center A Div With Flexbox

Davide Cannerozzi — Mon, 07 Feb 2022 11:08:10 +0000

Before Flexbox, centering elements in CSS was a little bit frustrating.

WHAT IS FLEXBOX?

Flexbox is a CSS3 layout model that allows developers to build one dimension layout.

First of all, you need to have:

a flex container (.wrapper)
flex items (.flex-item)

<body>
    <div class=”wrapper”>
        <div class=”flex-item”></div>
        <div class=”flex-item”></div>
        <div class=”flex-item”></div>
    </div>
</body>

I will give some style to the flex items, to show them on the web page.

.flex-item{
  border:1px solid red;
  height:30px;
  width:30px;
}

Without giving any css property to the wrapper container, the flex items will display one below the other.

But if we give the property display:flex to the container see what happen.

.wrapper{
 display:flex
}

The Flex Items are now displayed horizontally but not centered.

How To Center Horizontally

Now that we have our flex-container, we can learn how to center the flex-items horizontally.
The only thing to do is set the justify-content:center props to the flex-container.
The justify-content property allows us to position the flex-item along the main-axis of the flex-container.
As you can see, the divs are now centered horizontally inside the container.

.wrapper{
    display:flex;
    justify-content:center
}

How To Center Vertically

Instead of the justify-content property, you have to use the align-items:center property.
This property allow us to position the flex-items along the cross-axis.

You are probably notice that the flex item didn’t move from the initial position.

Why?
To center an element vertically, we should give a height to the flex container.
Let’s make the container 100vh which means 100% of the viewport height.
Now the divs are centered vertically.

Well Done!

.wrapper{
    display:flex; 
    height:100vh;
    align-items:center
}

How To Center Vertically And Horizontally .

Since we already know how to center vertically and horizontally, you can easily guess how to do it.
We need to use both align-content and justify-content property.

Remember: set a height to the container; otherwise, it will not work.

.wrapper{
    display:flex;
    height:100vh;
    justify-content:center;
    align-items:center
}

Flexbox is a powerful tool that every front-end developer should master.

As you can see from caniuse.com, it is very well supported by all modern browsers.

Array Destructuring

Davide Cannerozzi — Wed, 02 Feb 2022 12:53:13 +0000

Every Front end developer, sooner or later, will have to deal with arrays and objects.

Extrapolating data from an array may require several lines of code, but with the new es6 destructuring features, we can achieve the same goal with fewer lines of code.

In this article, I am going to teach you about Array Destructuring.

DESTRUCTURING IS A TOPIC YOU MUST KNOW IF YOU WANT TO BECOME A REACT DEVELOPER

To extract values from an array and push them into a variable, you would proceed like this.

const dogs = [‘Oliver’,’Winston’,’Carl’]

const first = dogs[0]
const second = dogs[1]
const third = dogs[2]

console.log( first, second, third ) 
Output: Oliver, Winston, Carl

Everything works fine, but It can require many lines of code.

Now, Let’s see the process with the destructuring features.

const dogs = ['oliver', 'winnie', 'carl'];
const [first,second,third ] = dogs;

console.log(first,second,third)
Output: Oliver Winnie Carl

Inside the square brackets, we declare the variables followed by an equal sign and the name of the array we want to destruct.

Each variable should match with the index of the element inside the array.

HOW TO SKIP ITEMS

What if you would like to output only the fourth array element?
You only have to use the comma, one comma skips one item in the array.

const numbers = [1,2,3,4]

const [, , ,num] = numbers

console.log(num)

Output : 4

DESTRUCTURING AND THE SPREAD OPERATOR

If we want to get the rest of the elements from the initial array, we can use the … rest operator, another powerful ES6 feature.

const numbers = [1,2,3,4,5,6,7,8,9,10]

const [first,second,…rest] = numbers

console.log(first) Output: 1
console.log(second) Output: 2
console.log(rest)    Output: [3,4,5,6,7,8,9,10]

DEFAULT VALUES

With Destructuring, we can use default values.
If a variable has no value or is undefined, we can use the equal sign to provide a fallback value.

const dogs = ['dave','carl',undefined,'winston']

const [first,second,third='oliver',fourth] = dogs

console.log(first)
console.log(second) 
console.log(third)  
console.log(fourth) 

Output: dave, carl,oliver,winston

const numbers = [1,2,3]

const [a,b,c,d = 4] = numbers

console.log(a,b,c,d)

Output: 1 , 2 , 3 , 4

You will use this feature often if your goal is to become a react developer.

Learn create-react-app

Davide Cannerozzi — Tue, 01 Feb 2022 10:46:04 +0000

Let's get straight to the point.
If you want to become a React Developer, you should know create-react-app

but...

WHAT IS CREATE-REACT-APP

Create-react-app is a tool built by Facebook to help set up all the tools you need for your React applications.

Before we dive into this fantastic tool, be sure to know Javascript ES6 and to have node.js installed on your computer.

CSS and HTML are also required to build a react app.

Now it's time to open your terminal and type the command npx create-react-app followed by a space and your application's name.

npx create-react-app myapp

Once the installation is completed, you will get the success message in the terminal.

Navigate in your project folder and run the command npm start
to start the development server on localhost:3000.

Open the project folder in your text editor and look at the folder structure created by create-react-app.

If it is your first time using a Javascript library, you can be intimidated by the number of files inside your project folder.

Let’s take a look at the most important files.

THE PACKAGE.JSON FILE

It Contains the dependencies needed to build your project, and it also describes your application, such as the name and the version.
You can easily change the name of your App inside this file.

THE SRC FOLDER

We will put all the JS and CSS files necessary to build the UI and your application's functionality inside this folder.
All the components we want to create must be inside the src folder.

The App.js file is the wrapper component of the App.
It's the container for all other React components.
The index.js file tells React where to render the App component.

THE PUBLIC FOLDER

In the public folder, we will focus on the index.html file.
This file contains plain HTML.
React will inject the code inside the div with the id 'root' via the render function inside the index.js file.

Try to edit the App.js file, and let's see what happens!
Delete the code inside the wrapper div and also remove the logo.svg file from our project and don't forget to remove the import statement in the App.js.

Going back to the browser, you will see a completely blank page

Inside the App.js file, try to write an H1 HTML tag between the div with the class App.

function App() {
  return (
    <div className="App">
     <h1>Learning React</h1>
    </div>
  );
}

React will automatically update the page.

Back to the browser, and you will notice a nice **LEARNING REACT **header displayed on your page

The setup is finished, you are ready to code your App.