리랜더링
https://velog.io/@rlaebqebq/220520
useContext 최적화
https://velog.io/@rlaebqebq/sfawef
useMemo
const memoizedValue = useMemo(() =>
functionHey(a, b),
[a, b])(원래대로라면) 값이 변경되지 않았다는 조건에서 연산多이 값을 사용한다면 값이 계속 재할당됨 👉 이걸 해결하기 위한것
1. 메모이제이션된 값을 반환
2. dependency array가 바뀔때만 메모이제이션된 값 다시 계산
“생성(create)” 함수와 그것의 의존성 값의 배열을 전달하세요.
useMemo는 의존성이 변경되었을 때에만 메모이제이션된 값만 다시 계산 할 것입니다.
이 최적화는 모든 렌더링 시의 고비용 계산을 방지하게 해 줍니다.
3. useMemo로 전달된 함수는 렌더링 중에 실행됨
useMemo로 전달된 함수는 렌더링 중에 실행된다는 것을 기억하세요.
통상적으로 렌더링 중에는 하지 않는 것을 이 함수 내에서 하지 마세요.
예를 들어, 사이드 이펙트(side effects)는 useEffect에서 하는 일이지 useMemo에서 하는 일이 아닙니다.
4. 배열이 없는 경우 매 렌더링 때마다 새 값을 계산하게 될 것입니다.
useMemo는 성능 최적화를 위해 사용할 수는 있지만 의미상으로 보장이 있다고 생각하지는 마세요.
가까운 미래에 React에서는, 이전 메모이제이션된 값들의 일부를 “잊어버리고” 다음 렌더링 시에 그것들을 재계산하는 방향을 택할지도 모르겠습니다.
예를 들면, 오프스크린 컴포넌트의 메모리를 해제하는 등이 있을 수 있습니다.
useMemo를 사용하지 않고도 동작할 수 있도록 코드를 작성하고 그것을 추가하여 성능을 최적화하세요.
useCallback
const memoizedCallback = useCallback(() => {
doSomething(a, b)
},[a, b],)