React 18: useTransition

#react #nextjs

Can boost performance by delaying high cost actions.
Added in React 18

example)


import { useState, useTransition } from 'react';

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

  return (
    <div>
      <input
        onChange={(e) => {
          startTransition(() => {
            setValue(e.target.value);
          });
        }}
      />
      {isLoading ? "Loading..." : "Loaded"}
    </div>
  );
}