React Dojo

Buscar

Busca conceptos, ejercicios y quizzes

prácticaintermedio

Context sin re-renders espurios

Crea un ThemeProvider que expone theme y setTheme. El reto: si pasas { theme, setTheme } como value inline, cada render crea un objeto nuevo y TODOS los consumidores se re-renderizan — incluso los que no leen theme. Memoiza el value.

Objetivos

  1. 1.Define ThemeContext con createContext
  2. 2.ThemeProvider guarda theme en useState
  3. 3.El value pasado al Provider se memoiza con useMemo
  4. 4.Un hook useTheme() que lee el contexto y lanza error si no hay Provider
  5. 5.Un componente <Toolbar/> que lee setTheme — NO debe re-renderizarse al cambiar tick del padre
  6. 6.Un componente <Card/> memoizado que lee theme
tu código
Pista

memo + useMemo trabajan juntos aquí: Toolbar envuelto en memo solo evita renders si sus props (el value del ctx vía useTheme) son estables. Si el value cambia por referencia, memo no sirve.

Conceptos relacionados

useContextuseMemomemo
¿Fue útil?
Inicia sesión para dar feedback