Context API와 React.memo

contextAPI 내부의 React.memo

 

Context API의 컨텍스트 안에 있는 요소는 Provider의 children인 컴포넌트는 React.memo를 사용한다 해도 렌더링된다.

명시적으로 props에 value만 없는 형태이지, 실제로는 props drilling이 일어나는 것처럼 사용된다.

children 컴포넌트 내부에 memo를 적용하면, 해당 memo는 잘 적용된다.

 

 dispatch / setState Context를 분리하면?

위의 예제코드와 같이 dispatch/setState Context를 따로 분리해줘도 마찬가지이다.

https://react.vlpt.us/mashup-todolist/02-manage-state.html 를 보면 dispatch를 쓰는 곳에서서 불필요한 리렌더링을 막는다 하는데,

위나 아래나 똑같은 걸 볼 수 있다. 왜냐면 어차피 state가 바뀌면 밑에도 다시 그려야 하기 때문이다.

state는 action을 dispatch하기 전엔 안바뀌고 dispatch는 불변이다.

상단의 부모 컨텍스트가 리렌더링되면 자식은 반드시 리렌더링 되기에 dispatch / setState만 사용해도 리렌더링을 막을 방도는 없다.

즉, context를 하나로 두고 state/reducer에 useMemo(fn,[state])를 적용하는 방식이나 성능 면에서는 차이가 없다.

 

 

결론 : contextAPI를 사용할 경우, Provider children 요소는 반드시 리렌더링 된다. (memo와 상관없이)

children의 children에는 메모가 적용된다.

 

참고 : 

context API 최적화 방법 (kentcdodds.com)