Automatic Batching

React : 18버전 이후 기능들 (automatic batching, useTransition, isPending, useDeferredValue)

18버전 이후로 리액트에서 성능을 향상시킬 수 있는 기능들이 생겼다. automatic batching batching 기능은 state변경함수들이 여러개 연달아 있는 경우 마지막에서만 한번 재렌더링이 일어나는 기능이다. 17버전까지 ajax나 setTimeout 등 늦게 동작하는 코드들 내부에서는 batching이 일어나지 않아 매번 재렌더링되었다. 18버전 이후 위의 경우에도 모두 batching이 일어난다. useTransition 아래 코드처럼 데이터가 10000개 들어있는 array자료가 있고.. 그 개수만큼 div가 있고.. input에 타이핑 할 때마다 div들에 데이터가 업데이트된다면 지연시간이 왕창 발생할 것이다. 전 import {useState} from 'react' let a = ..

React 정리 (1) : useEffect, clean up (조건 별 실행순서), automatic batching

useEffect와 cleanup함수의 조건 별 실행순서 의존성 배열 값이 있을 때 useEffect(()=>{ //함수 A return ()=>{ //함수 B } }, [변수나state]) Mount(초기 마운트) 시나리오: 컴포넌트가 처음으로 마운트되면 함수 A가 실행 Update(업데이트) 시나리오: 컴포넌트가 업데이트되고 의존성 배열에 포함된 변수나 state가 변경되면, 먼저 함수 B가 실행 후 함수 A가 실행 Unmount(마운트 해제) 시나리오: 컴포넌트가 마운트 해제되면 함수 B가 실행 의존성 배열 값이 비었을 때 useEffect(()=>{ //함수 A return ()=>{ //함수 B } }, []) Mount(초기 마운트) 시나리오: 컴포넌트가 처음으로 마운트되면 함수 A가 실행 U..