React 18

Concurrent mode becomes concurrent feature in react 18.

useTransition

Seperate high priority and low priority tasks.

import { startTransition } from 'react'

setInput(text) // high priority

startTransition(()=> {
  setQuery(text) // low priority
})

useDeferredValue

similiar to useTransition

Automatic Batching

  function handleClick() {
    setCount(c => c + 1);
    setFlag(f => !f);
    // only render once
  }

Suspense