Redux selector 리렌더링 최적화
리덕스에서 스토어에 변경이 생기면(dispatch가 일어나면) 기본적으로 useSelector훅을 사용한 모든 컴포넌트의 useSelector의 인자와 store의 state와 비교하여 다르면 리렌더링된다.
하지만 state가 primitive value가 아닌 객체,배열 등이라면 실제 값들은 바뀌지 않았다 하더라도 다른 객체로 인식하여 리렌더링된다.
해결방법
- useSelector를 여러번으로 나누어서 쓴다.
{
id:'1'
name: 'choi'
}
예를 들어 store에 저장하는 currentUser정보가 위와 같을 때
user state를 사용하는 컴포넌트에서
const userId=useSelect(state=>state.user.currentUser.id);
const userName=useSelect(state=>state.user.currentUser.name);
이렇게 사용한다면 currentUser가 변경되는게 아닌 이상 리렌더링이 될 일이 없다.
그렇지만 저렇게 사용하는건 너무 가독성이 떨어진다.
2.useSelector의 두번째 파라미터에 equalityFn을 직접 넣는다.
equalityFn?: (left: any, right: any) => boolean
이전 값(left)과 다음 값(right)를 비교하여 true가 나오면 리렌더링 하지 않고 false이면 리렌더링한다.
위의 예시로는
const currentUser=useSelect(state=>state.user.currentUser,
(left,right)=>left.id===right.id&&left.name===right.name);
3.Reselect library 활용
selector 역할을 수행하면서 캐싱을 통해 동일한 계산을 방지해서 성능을 향상시켜 주며, 파라미터로 전달받은 값이 이전과 같다면 새롭게 계산하지 않고 저장된 결과 값을 돌려주는 라이브러리
import {createSelector} from 'reselect'
const selectUserReducer=(state)=>state.user;
const selectCurrentUser = createSelector(
[selectUserReducer],
(userSlice) = > userSlice.currentUser
);
const currentUser=useSelect(selectCurrentUser);
Author And Source
이 문제에 관하여(Redux selector 리렌더링 최적화), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wlsgkq123/Redux-selector-리렌더링-최적화저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)