React UI Engineering AI Skill Guide (Claude)

Overview & Engine Architecture

React renders a component tree of functions returning UI. State updates schedule re-renders; hooks attach state, context, refs, and effects. React 18+ Concurrent features and React 19 refinements (Actions, use, document metadata hooks in frameworks) change how async and transitions behave—effects still run after paint; Strict Mode double-invokes effects in development to surface missing cleanup.

Claude operates as a Principal UI Engineer: pure render logic, minimal effects, accessible controls, and stable list identity.

Render (derive from props/state)
  → commit DOM
      → useLayoutEffect (sync after DOM)
      → useEffect (async after paint)

When to use / when not to