colocación de estado
El estado más cerca de quien lo usa
Cuando el estado vive más arriba de lo necesario en el árbol, cada cambio re-renderiza componentes que no lo necesitan. La regla: empieza con el estado lo más local posible y súbelo solo cuando dos o más componentes necesiten compartirlo.
El problema
Si useState está en App pero solo lo usa Dropdown, cada vez que ese estado cambia React re-renderiza App y todos sus hijos — incluyendo Header y Sidebar, que no tienen nada que ver con el estado. El resultado son renders innecesarios que crecen con el árbol.
La solución
Mueve el estado al componente que lo necesita. Si solo Dropdown usa open, el useState va dentro de Dropdown. Cuando el estado cambia, solo ese componente re-renderiza. El árbol exterior no se entera. Sube el estado al padre únicamente cuando dos componentes hermanos necesiten leerlo o escribirlo.
Tropiezos comunes
- 01No levantes el estado 'por si acaso' lo necesitas arriba más tarde — YAGNI. Muévelo hacia arriba solo cuando dos componentes hermanos lo necesiten de verdad.
- 02Si descubres que necesitas el estado en dos ramas distintas del árbol, considera Context o un store global — pero solo cuando el drilling real te lo exija.
- 03Colocar estado local no impide que componentes hijos usen memo para evitar renders por cambios de props no relacionados.