useState lazy init 기법

 

state가 초기화될 때 함수가 단 1회만 실행되어 값이 할당되는 방식을 lazy init이라고 한다.

 

- Bad

const getNumbers = () => {
	const candidates = [1,2,3,4,5,6,7,8,9];
    const array = [];
    for(let i=0; i<4; i+=1){
    	const chosen = candidates.splice(Math.random() * (9-i), 1)[0];
        array.push(chosen);
    }
    
    return array;
}

const NumberBaseball = () => {
	const [answer, setAnswer] = useState(getNumbers());
}

 

 

4개의 숫자를 랜덤으로 돌려 answer에 할당하고자 할 때 getNumber()을 넣어주게 되면, 컴포넌트가 재렌더링될 때마다 다시 getNumbers()함수가 실행된다. 이 함수가 정말 무거운 함수였다면 시스템 전체의 부담이 되었을 것이다. (비효율적, 불필요한 반복)

 

 

- good

const getNumbers = () => {
	const candidates = [1,2,3,4,5,6,7,8,9];
    const array = [];
    for(let i=0; i<4; i+=1){
    	const chosen = candidates.splice(Math.random() * (9-i), 1)[0];
        array.push(chosen);
    }
    
    return array;
}

const NumberBaseball = () => {
	const [answer, setAnswer] = useState(getNumbers); //lazy init
}

 

하지만 이렇게 함수명만 넣어준다면 lazy init(늦은 초기화)가 된다.

state가 초기화될 때 함수가 단 1회만 실행되어 값이 할당되는 방식이 되는 것이다.

 

 

setAnswer(getNumbers());

단 setter로 값을 업데이트하고자 할 땐 함수형으로 써줘야 한다.