useMemo

라이프 사이클에서 값을 메모제이션 하는 방법

• deps

  • Primitive Value : 값만 동일하면 됨
  • Reference Value : 값 + 참조 주소가 동일해야함

  const a = (x,y) => x+y;
  const b = (x,y) => x+y;
  
  console.log(a === b ) // false
  

const memoizedValue = useMemo(computeCallbackValue, deps);

참조값도 같아야 하고, 값도 같아야하거든

https://codesandbox.io/s/modest-stonebraker-si2gv?file=/src/App.js:0-856

import React, { memo } from 'react';

const renderComment = comment => {
	return <div>title:{comment.title}</div>;
};

const FetchList = ({ data }) => {
	console.log(data);
	return <div>{data.map(comment => renderComment(comment))}</div>;
};

// export default FetchList;
export default memo(FetchList);

without memozation

with memozation

useCallback

useCallback : 라이프 사이클에서 함수를 메모제이션 하는 방법

const memoizedCallback= useCallback(fn, deps);

// 공식 문서
const memoizedCallback = useMemo(() => fn, deps)

https://codesandbox.io/s/cool-mountain-8372b?file=/src/App.js:0-322

주의 사항

• 참조 동일성 (Referential equality)이 만족될 떄만 사용해라.
  • props가 원시형 타입이면 상관없다.
  • 그런데, 참조형 타입이면 레퍼런스가 변경된다. 즉, 메모제이션 하는 의미가 없다.

추가로 볼만한 것, useMemo도 고려할 수 있지 않나요??

export default function App() {
  const initialCandies = 
		useMemo(["snickers", "skittles", "twix", "milky way"], 
		[]
	);
	const [candies, setCandies] = useState(initialCandies);
	// ..