React — Component & Rendering Practice

• · RC1 — State updates are immutable; never mutate state/props objects directly.
• · RC2 — Hooks are called unconditionally, at the top level, every render — never inside conditionals/loops.
• · RC3 — List items use stable, unique keys (an ID), never array index for lists that reorder/filter.
• · RC4 — Derived values are computed during render (or memoized), not duplicated into separate state that can drift.
• · RC5 — Side effects live in useEffect/event handlers, never inline in the render body.

• · Array .map() using index as key on a reorderable/filterable list → switch to a stable ID.
• · A useEffect syncing one state to another (useEffect(() => setB(a), [a])) → usually should be computed inline or via useMemo, not a second state + effect.
• · New component defaulting to "use client" without checking if it needs interactivity/browser APIs → try server component first.
• · useMemo/useCallback added everywhere reflexively → profile first; premature memoization adds complexity without proven benefit.
• · A component with 5+ boolean props → candidate for compound-component or variant-prop refactor.

• · Index-as-key on reorderable lists — causes wrong component state to stick to the wrong item after a reorder/filter/delete.
• · State-sync effects — useEffect whose only job is copying one state into another, introducing a render-lag bug and unnecessary re-renders.
• · Everything is a client component — "use client" slapped at the top of every file by default, forfeiting the zero-JS server-component benefit everywhere.
• · Reflexive memoization — useMemo/useCallback wrapping every value "for performance," adding cognitive and runtime overhead with no measured benefit.
• · Prop drilling through 5+ layers — passing the same prop down a long component chain instead of composition/context/compound components.

• [ ] No direct state mutation. (RE1)
• [ ] Hooks called unconditionally at top level. (RE2)
• [ ] Stable keys on reorderable lists. (RE3)
• [ ] No redundant state-sync effects. (RE4)
• [ ] "use client" scoped to components that need it. (RE5)
• [ ] Memoization justified by profiling. (RE6)

• React documentation

Este pack cita las siguientes fuentes registradas en el índice bibliográfico:

• webReact documentationMeta
• webRules of HooksReact docs