렌더마다 변경되는 값이라서 context Provider에 못 넣는 에러

Question

선생님 강의 5:10 쯤에 temp obj를 provider value에 넣으려고 할 때, "매번 변경되는 값이라서 들어가지 않으니 hook으로 빼주면 된다고" 하셨는데요-!
처음엔 그냥 따라쳤는데 복습하다 보니까 왜 custom hook으로 빼주면 괜찮은지 궁금해요.
에러 메시지가 제안하는 대로 useMemo를 쓰지 않는 건 함수가 async 라서 그런 건가요.

totuworld · Answer

안녕하세요 츄츄님. 우선 context provider 에 tempObj 를 넣는게 문제가 되죠. 이건 아래 예시처럼 매번 새로운 값을 넣기 때문에 문제가 되는거에요. <MyContext.Provider value={{something: 'something'}}>   왜 문제가 되냐면 매번 새로운 값을 만들어서 넣기때문에 Provider 가 렌더링 될때마다 하위에서 구독중인 컴포넌트가 모두 리렌더링됩니다. 이 문제를 방지하려면 위쪽에서 useMemo 등으로 value가 항상 새로 생성되지 않는 처리를 해도 됩니다.   강의에서 이 부분을 모두 custom hook 으로 빼준건 전달해야하는 값이 여러개이고, useState와 useEffect를 활용해서 값 변경이 일어날 때 자동으로 state를 변경하는 일이 발생하기 때문입니다. 이 코드가 provider 가 있으면 다른 일을 하는 두 코드가 같이 있게 됩니다. 이게 싫어서 분리한거에요. (한 곳에 몰아 넣어도 문제되지 않습니다)