useMemo를 사용한 컴포넌트 리렌더링 방지

컴포넌트의 props가 바뀌지 않았다면 리렌더링을 방지하여 성능최적화를 이뤄보자!

import React from 'react'

const MakeUser = ({name, id, handleClick}) => {

	const handleClick = () => {
    	console.log('handle click')
    }
	return (
    	<div>
        	{name}, {id}
        	<button onClick={handleClick}
        </div>
    )
}

export default React.memo(MakeUser) // 요 부분!!

작은 단위의 컴포넌트도 React.memo로 감싸주면 된다.
그런데 함수가 참조하고 있는 값이 바뀌면 함수들은 다시 만들어진다.
참조되는 값을 없애고 함수형 업데이트로 변경해준다.

함수형 업데이트?

const [value, setValue] = useState(0)

const onChange = () => {
	setValue(value + 1) // 이거말고
    setValue(v => v + 1) // 이게 함수형 업데이트
}

그럼 함수에 함수형 업데이트를 어떻게 적용?

const hanldeRemove = useCallback((id) => {
	setUser(users.filter(user => user.id !== id)) // 이렇게 값을 바로 인자로 넘겨주지 말고
},[user])

const hanldeRemove = useCallback((id) => {
    setUser(
    	(users) => users.filter(user => user.id !== id))
    ) // 이렇게 함수의 리턴값으로 전달

},[]) // 의존성 값을 뺐음

이렇게 해주면 특정항목을 수정할 때 리렌더링을 하게 됌.

onClick으로 설정해 준 함수들은 useCallback으로 재사용한다고해서 리렌더링을 막을수는 없으므로 굳이 그렇게 할 필요가 없다.
실제로 렌더링을 방지할 수 있는 컴포넌트에 사용하기