1. Automatic Batching (자동 배칭)

여러개의 상태 업데이트를 하나로 묶어서 쓸데없이 반복되는 렌더링을 막기위함.

const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);

function handleClick() {
    setCount(c => c + 1); // 아직 리렌더링 되지 않습니다.
    setFlag(f => !f); // 아직 리렌더링 되지 않습니다.
    // 리액트는 오직 마지막에만 리렌더링을 한 번 수행합니다. (배치 적용)
  }

18 전에는 set함수 실행때마다 리렌더링이 되었었지만, 18에는 하나로 묶어서 한번 리렌더링이 된다.
내부에 Promise, setTimeout 과 같은 비동기 로직이나, native Event Handler로 상태를 업데이트할 경우에도 같다.

자동 배칭을 원하지 않는다면, flushSync() 로 setter 함수를 감싸 별도의 리렌더링을 유발

import { flushSync } from 'react-dom';

function handleClick() {
  flushSync(() => {
    setCounter(c => c + 1);
  });  // 리액트는 즉시 DOM을 업데이트합니다.

  flushSync(() => {
    setFlag(f => !f);
  });  // 리액트는 즉시 DOM을 업데이트합니다.
}

2. Concurrent Features (동시성 기능)

큰 작업을 작은 여러개의 독립적인 작업으로 나누어 실행하는 프로그래밍 구조 ⇒ 싱글스레드의 단점을 보완.

상태 업데이트 분류

긴급(Urgent) : 즉각적인 업데이트의 대상. 직접적인 상호작용 반영 (타이핑, 호버, 스크롤 등)
전환(Transition) : 즉시 반영되지 않아도되는 부분. 하나의 뷰에서 다른 뷰로 UI 전환$
리액트 는 모든 방법이 긴급(Urgent)였기 때문에 전환 업데이트를 setTimeout, throttle, debounce 등의 테크닉으로 우회하는 차선책 으로 사용
React 18 부터는 이를 지원하는 Hooks가 생겨서 명시적으로 구분가능.

startTransition
1. 상태업데이트를 전환(Transition)으로 반영 상대적으로 중요도가 낮은 UI 업데이트의 우선순위를 낮출 수 있다.
2. 느린 렌더링, 느린 네트워크에 많이 사용. 데이터의 호출량이 많은 UI에 적용되고 Suspense와 연계.
useTransition
1. 전환(Transition) 업데이트를 지원 + isPending을 지원 ⇒ 로딩 상태의 추적이나 제어까지 필요한경우 사용.
useDeferredValue
1. 렌더링 우선순위가 낮은 상태값의 업데이트를 지연
2. 사용자 인터페이스를 기반으로 데이터 조회를 기다릴때 UI를 반응적으로 유지.

3. useId hooks

클라이언트와 서버간의 hydraion의 mismatch를 피하면서 유니크한 id를 생성할 수 있는 훅
고유한 id 가 필요한 API와 사용되는 컴포넌트에 유용

export default function Home() {
  const id = useId()
  return (
    <>
      <div className="field">Home: {id}</div>
      <SubChild />
      <SubChild />
      <Child />
      <Child />
      <Child />
      <Child />
      <Child />
      <Child />
      <Child />
      <Child />
      <Child />
      <Child />
      <Child />
      <Child />
      <Child />
    </>
  )
}

export default function Child() {
  const id = useId()
  return <div>child: {id}</div>
}

이렇게 동일 컴포넌트를 호출하면서 useID를 사용하면 이 useID훅이 자동으로 새로운 id를 생성한다 (1~9 , a~z)