Context 불필요한 리렌더링

ThemeContext 값이 변경되면 theme를 사용하지 않는 컴포넌트도 리렌더링됩니다. 버그를 찾으세요:

JSX

const AppContext = createContext();

function AppProvider({ children }) {
  const [theme, setTheme] = useState('light');
  const [user, setUser] = useState(null);

  return (
    <AppContext.Provider value={{ theme, setTheme, user, setUser }}>
      {children}
    </AppContext.Provider>
  );
}

function UserInfo() {
  const { user } = useContext(AppContext);
  return <p>{user?.name}</p>;
}

답변

useContext는 구조분해 할당을 지원하지 않음 theme과 user를 하나의 Context에 넣어서 어느 하나가 변해도 전체 리렌더링 createContext에 기본값을 전달하지 않아서 오류 Provider의 value에 객체를 넣으면 안 됨

로그인 후 제출하기