react

Installation
SKILL.md

React

Targets React 19.2 and React Compiler 1.0 (babel-plugin-react-compiler), linted by eslint-plugin-react-hooks 7.1+. Match the task to one or more Branches rows and read every listed file in full before producing output — those references are the contract; the tripwires below are only a final self-check.

The compiler is the optimizer

The compiler applies the equivalent of memo to every component and memoizes calculations inside components and hooks, at build time. It does this more granularly than hand-written hooks can — it memoizes after early returns, where useMemo is structurally forbidden.

The price is that the Rules of React stopped being style advice and became a build-time contract. When a component violates them, the compiler bails: it silently skips optimizing that component and moves on. The build stays green, the tests stay green, and the component is simply never optimized. Write code the compiler cannot bail on.

Two consequences that invert pre-compiler habits:

  • Reflexive useMemo/useCallback on cheap values is now noise, and an incomplete dependency array is worse than no memoization at all — the compiler refuses to optimize a component whose manual memoization it cannot match.
  • A rule violation costs optimization silently rather than raising an error, so the lint rules are the only thing standing between you and a quietly unoptimized app. Enable them before enabling the compiler.

Decide memoization first

Installs
348
GitHub Stars
584
First Seen
Mar 18, 2026
react — pedronauck/skills