UseTransition hook is used to mark state changes in React as a transition and transition can be interupted in between based on various conditions which means the UI will be on a loading stage until all the interuptions (or state changes are) complete and so the rendering of the UI based on first state change will not be shown to user and the rendering will be restarted for a second state change and it will continue till all the interuptions are over. 

If interuptions are possible in between so React will give us a Non-Blocking UI and show less loading states.

All the interuptinos, state changes will fall under one loading true state. as we know that useTranstition returns two values - **isPending** and **start transition function ** and this is the reason why React calls useTransition _as a hook that lets you render a part of the UI in the background_

So, we can say that this hook is used for speed optimization and make the app feel more responsive to users. 

React documentation have a good example where we have three tabs and tab 2 is slow to load data, and with the use of useTransition we can move from one tab to other without waiting for the data of tab 2 and blocking the UI till the data of that tab loads.

We will understand this here with a different example . 

### To understand our code -

We will have a select box and based on selected value we will replicate a functionality to get data from our server. In the mean time we will change the selected value and see the difference of the UI in both cases of with or without useTransition hook. 

### The output - 

without using useTransition we will get the UI with the first selected value and then with the second selected value and then the third and it goes on., and we have have multiple loading indicators all the time in between two UI. 

with using useTransition we will just have a UI with the final selected value from the dropdown. because all our state changes will be in transition and react will show only the final transition value and with only one loading ui. The end user will not feel the screen flikering. 

### Code : Without useTransition -
```
export default function UnderstandingUseTransition() {
  const [uiData, setUiData] = useState<{ id: string; name: string }[]>([]);
  const [loading, setLoading] = useState(false);

  const dropdownData = [
    {
      id: "1",
      name: "one",
    },
    {
      id: "12",
      name: "two",
    },
    {
      id: "123",
      name: "Three",
    },
  ];

  const apiShowData = [
    {
      id: "1",
      name: "one one",
      foreignId: "1",
    },
    {
      id: "2",
      name: "two two",
      foreignId: "12",
    },
    {
      id: "3",
      name: "Three Three",
      foreignId: "123",
    },
  ];

  const getShowData = async (value: string) => {
    await new Promise((resolve) => setTimeout(resolve, 5000));
    return apiShowData.filter((d) => d.foreignId === value);
  };

  const onChageSelect = async (e: any) => {
    setLoading(true);
    const data = await getShowData(e.target.value);
    setUiData(data);
    setLoading(false);
    };

  const selectOptions = dropdownData?.map((d) => (
    <option key={d.id} value={d.id}>
      {d.name}
    </option>
  ));

  return (
    <div className="flex flex-col h-[100vh] items-center justify-center">
      <select
        id="userCategory"
        name="userCategory"
        className="bordered border-2 border-[#000] mt-10"
        onChange={onChageSelect}
      >
        {selectOptions}
      </select>
      {loading ? (
        <p>Loading ...</p>
      ) : (
        uiData.map((d) => <p key={d.id}>{d.name}</p>)
      )}
    </div>
  );
}

```

Now if we change dropdown values two times, first we select the value **two** and then select the value **three**, this is what our UI output will look like - 

#### **The UI will show us: loading -> two two -> loading -> Three Three**

### Code : With useTransition -

```
import { useEffect, useState, useTransition } from "react";

export default function UnderstandingUseTransition() {
  const [isPending, startTransition] = useTransition();
  const [uiData, setUiData] = useState<{ id: string; name: string }[]>([]);

  const dropdownData = [
    {
      id: "1",
      name: "one",
    },
    {
      id: "12",
      name: "two",
    },
    {
      id: "123",
      name: "Three",
    },
  ];

  const apiShowData = [
    {
      id: "1",
      name: "one one",
      foreignId: "1",
    },
    {
      id: "2",
      name: "two two",
      foreignId: "12",
    },
    {
      id: "3",
      name: "Three Three",
      foreignId: "123",
    },
  ];

  const getShowData = async (value: string) => {
    await new Promise((resolve) => setTimeout(resolve, 5000));
    return apiShowData.filter((d) => d.foreignId === value);
  };

  const onChageSelect = async (e: any) => {
    startTransition(async () => {
      const data = await getShowData(e.target.value);
      startTransition(() => {
        setUiData(data);
      });
    });
  };

  useEffect(() => {
    console.log("uiData", uiData);
  }, [uiData]);

  const selectOptions = dropdownData?.map((d) => (
    <option key={d.id} value={d.id}>
      {d.name}
    </option>
  ));

  return (
    <div className="flex flex-col h-[100vh] items-center justify-center">
      <select
        id="userCategory"
        name="userCategory"
        className="bordered border-2 border-[#000] my-10 w-[200px]"
        onChange={onChageSelect}
      >
        {selectOptions}
      </select>
      {isPending ? (
        <p>Loading ...</p>
      ) : (
        uiData.map((d) => <p key={d.id}>{d.name}</p>)
      )}
    </div>
  );
}

```


####  **Now here we can change the value of select dropdown as much time as we want, we will only get one final UI and only one loading screen.**

**Here we are interupting the state change, so the render will restart for the new state, and previous renders will not be shown on the screen but the final render will be shown to the UI. This is aN important feature to know about useTransition hook.**

Do note that in the **onChageSelect** function I have used startTransition function for the setUiData state update because any state update after the await keyword in the startTransition function should be wrapped again with startTransition function.   

To verify this we can do a test - 


```
 // create a new state 
 const [dummyText, setDummyText] = useState("");

 // change our onChangeSelect funtion, setDummyText is after await but not in its own useTransition
 const onChageSelect = async (e: any) => {
   startTransition(async () => {
     const data = await getShowData(e.target.value);
     startTransition(() => {
       setUiData(data);
     });
   setDummyText("ABC");
  });
 };

 // and add this anywhere in our return statement
<p>{dummyText}</p>

```
We will notice that since setDummyText is not in our transition it will show on the UI after 5 seconds, 5 seconds because it will wait for the first await to finish. I have manually slowed the getData function for 5 seconds to get the UI rendering feedback.

### Few things more - 

We know that react does batch update for the states and if we have many state change in a function and one of state change is heavy calculation or slow in natrure due to any reason, we can wrap that state in its own  useTransition, to mark it as transition and it will update on its own condition leaving other state change happen quickly.

For e.g. -

```
  const anyFunction = async () => {
    setStateA("any");
    startTransition(async () => {
      // slow state change due to any reason
      setStateB("any");
    });
  };

```

We showld wrap our code everywhere we need non blocking state change, for eg in navigation, we should not wait for a page to load, we should be able to change the route quickly.


I hope after reading all the above points, it must be clear for everyone to understand the working of useTransition.

Find other [Blogs](https://www.ranuvijay.me/blogs/topics/working-with-react-js) to understand working with React.js.

Find other blogs on [React.Js](https://www.ranuvijay.me/blogs/categories/react-js) here.

Find blogs on other [Categories](https://www.ranuvijay.me/blogs#categories) here.

Find blogs on other [Topics](https://www.ranuvijay.me/blogs#topics) here.

**Thank You !!**





We will understand what is useTransition hook in react js and see how does it works.

Understanding useTransition react.js

Contact Me

I want to hear from you