useState 초기값

보통 Class 형에서 함수형으로 전환되면서 혼동하는 내용 중 하나가 useState의 초기값이다.

 

const [state, setState] = useState(초기값);

보통 우리는 위와 같이 초기값을 useState 안에 넣는다.

 

하지만 이러한 경우에 초기값에 복잡한 연산을 거친 값을 넣게 되면 문제가 생긴다.

 

const [state, setState] = useState(complicatedFunction());

위와 같이 선언될 경우, complicatedFunction이라는 함수는 매 rendering 마다 계속 호출되어서 성능적으로 문제가 생길 수 있다. 이를 보완하기 위해서 우리는 아래와 같이 작성할 수 있다.

 

const [state, setState] = useState(() => complicatedFunction());

이와 같이 선언할 경우, 가장 첫 rendering 할때만 호출이 될 수 있다.