React18 | useTransition hook | Very effective

The most interesting implementation which React18 has done is concurrency where we can prioritize certain states over other so that we can keep overall user experience of the web site responsive.

For this purpose, React18 introduced concept of startTransition which can also be utilize using useTransition hook.

By using useTransition, we can tell to React that certain states have low priority so that high priority states can be done first which would then eventually improve user experience because user can then see mostly improve updates on the UI so quickly.

useTransition hook returns array of 2 elements. First is isPending element which tells that low priority state is still pending to process and second is startTransition which tells to React that certain states are low priority.

Another example of using useTransition hook — Some UI updates should be performed as quickly as possible (typing into an input field, select a value from dropdown), while others can have lower priority (filtering a list).

Lets see it by example- We will try to populate numbers list and also have search box on top. As soon as any number is typed in the search box, the list will show the matching no.

Example 1 — above example without using useTransition hook

let copyList = null;

const MyComp = (props) => {
  let [list2, setList2] = React.useState([]);
  
  React.useEffect(() => {
   for(let i = 0; i < 15000; i++) {
     setList2((val) => {
       return [...val, i];
      });
    }
  }, []);
  
  const handleChange = (event) => {
    if (copyList === null) {
     copyList = JSON.parse(JSON.stringify(list2)); 
    }
    list2 = JSON.parse(JSON.stringify(copyList));
    
    // filtering the list based on the value typed in textbox
    if(event.target.value) {
       list2 = list2.filter((v) => (v == event.target.value));
    }
  }
  
  return(
   <div>
    <input onChange={handleChange} />
    {
     list2.map((val, key) => {
       return (<div key={key}>{val}</div>)
      })
    }</div>
  );
}

const rootElement = document.getElementById("app");
const root = ReactDOM.createRoot(rootElement);
root.render(<MyComp />);

Try to execute the above code then you will notice that as soon as you try to remove the no from search box after typing then UI gets hand for sometime which is bed user experience and allowing user to type value to search box is critical task than filtering the list.

Example 2- Lets improve it by using useTransition hook

let copyList = null;

const MyComp = (props) => {
  let [list2, setList2] = React.useState([]);

// using useTransition hook
  let [isPending, startTransition] = React.useTransition();
  
  React.useEffect(() => {
   for(let i = 0; i < 15000; i++) {
     setList2((val) => {
       return [...val, i];
      });
    }
  }, []);
  
  const handleChange = (event) => {
    if (copyList === null) {
     copyList = JSON.parse(JSON.stringify(list2)); 
    }
    list2 = JSON.parse(JSON.stringify(copyList));
    
    // filtering the list based on the value typed in textbox by using useTransition hook
    startTransition(() => {
      if(event.target.value) {
       list2 = list2.filter((v) => (v == event.target.value));
      }
      setList2(list2);
    });
  }
  
  return(
   <div>
    {isPending ? 'Wait searching...' : ''}
    <input onChange={handleChange} />
    {
     list2.map((val, key) => {
       return (<div key={key}>{val}</div>)
      })
    }</div>
  );
}

const rootElement = document.getElementById("app");
const root = ReactDOM.createRoot(rootElement);
root.render(<MyComp />);

Try to run above code then you will notice that the issue which we were facing in the previous code where when user tries to remove value from search box then the UI was getting hanged will be gone and user experience of typing value to search box will be smooth and list will be filtered once user stop typing value to search box.

I hope this article will help you to utilize useTransition hook in your project effectively.

Stay tuned and subscribe to my Medium Channel!!!

Thanks!!!