useTransition hook is a new addition to React as of version 18. It is a hook that allows you to control the rendering of a fallback UI during a state update, which can improve the perceived performance and user experience of your application.

When a state update is triggered, React will immediately schedule a re-render of the component. However, if the state update involves heavy computation or a long-running task, the user might experience a delay or a frozen UI. With the useTransition hook, you can tell React to render a fallback UI (such as a spinner or a progress bar) during the time it takes to complete the state update.

The useTransition hook takes an optional configuration object as an argument, which can be used to customize the duration and timing of the transition. By default, the transition lasts for 500ms and uses a linear timing function.

import {useTransition} from 'react'

function Component(){
  const [pendingState,transitionFn]=useTransition()
}

This transitionFn is the same startTransition function provided by React.

The useTransition hook returns an array with two elements:

• The first element is a boolean value that represents whether a transition is currently pending or not.

• The second element is a function that can be called to start a transition. It takes a callback function as an argument, which will execute the code that triggers the transition.

Let's see an example where the transition happens and callback priority is set to low.

export default function App() {
  const [pending, startTransitionFn] = useTransition();
  const [inputValue, setInputValue] = useState("");
  const [list, setList] = useState<Array<JSX.Element>>([]);
  function handleChange(e: ChangeEvent<HTMLInputElement>) {
    setInputValue(e.target.value);
    startTransitionFn(() => {
      const tempList = [];
      for (let i = 0; i < 10000; i++) {
        tempList.push(<div>{e.target.value}</div>);
      }
      setList(tempList);
    });
  }
  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      {pending ? "Loading ..." : list}
    </div>
  );
}

In the example code you provided, the useTransition hook is used to wrap the execution of the code that sets the list state. The startTransitionFn function is called with a callback function that creates an array of 10000 <div> elements based on the current value of the input field. This callback function is then wrapped in a transition, which means that React will render a fallback UI (in this case, the "Loading ..." message) while the callback function is executing.

This allows the user to see immediate feedback when typing in the input field, while the heavy computation of creating the 10000 <div> elements happens in the background. Once the callback function completes and the list state is updated, React will render the new list of elements and remove the fallback UI.