0917.TIL1

Lazy Initialization

export const useLocalStorage = (key, initialValue) => {
  const [value, setValue] = useState(() => {
    return getSavedValue(key, initialValue);
  });
  return [value, setValue];
};

이러한 예제에서 useState값 안에 익명함수가 있다.
const [value, setValue] = useState(getSavedValue(key, initialValue));
와
const [value, setValue] = useState(() => { return getSavedValue(key, initialValue); });
의 차이는 무엇일까 ?

오직 한번

• useState안에 익명함수를 넣으면 이 state가 만들어 질 때만 실행된다 . 그이후 재 렌더링시 무시한다.

만약 사용을 안하면?

그냥 useState안에 getSavedValue()만 넣으면
1. state가 렌더링될때 getSavedValue()를 실행한다.
2. 그이후로 setState로 값이 변경되면 전체 함수(컴포넌트)가 다시 실행되며 state값을 업데이트한다. -> 리렌더링을 발생
3. 리렌더링이되면 state는 다시 getSavedValue() 를 실행한다.(불필요한 계산)

그렇다면 언제사용할까 ?

• 보통 map,filter,find 배열을 조작하는것에 사용 (느림)
• localStorage 접근시 사용 ( 역시느림)
• new Date() (느림)
• 느린 함수를 사용할때 주로 사용한다.

내경우

• 내 경우엔, 내가만든 getSavedValue안에는 JSON.parse(느림)
  과 localStorage접근이 둘다 있어서, 최적화의 이유로 state에서 익명함수를 사용한다.
• 기억하고 리팩토링 / 최적화시에 적용하는 버릇을 들이자 .