okf-studio: Skill for Claude Code

React Compiler

Rule

The compiler memoizes. You do not.

In any React 19+ codebase with the compiler enabled, do not add useMemo, useCallback, or React.memo by default. The compiler handles memoization at finer granularity than a human writes, and adding manual versions is at best noise. This is the most common failure mode in LLM-generated React: the bulk of any agent's React training corpus is pre-compiler, so the default output skews toward manual memoization.

Default behavior when writing React

Write components plainly:

function DashboardRow({ entity, onSelect }) {
  const label = formatLabel(entity);
  const total = entity.items.reduce((sum, i) => sum + i.value, 0);
  return (
    <Row onClick={() => onSelect(entity.id)}>
      <Label>{label}</Label>
      <Total>{total}</Total>
    </Row>
  );
}

Not:

const DashboardRow = memo(({ entity, onSelect }) => {
  const formatted = useMemo(() => ({ /* ... */ }), [entity]);
  const handleClick = useCallback(() => onSelect(entity.id), [entity.id, onSelect]);
  return /* ... */;
});

The compiler produces the equivalent of the first from any input that follows the Rules of React. Adding the second by hand is noise and can interfere with the compiler's analysis.

Three exceptions where manual memoization is still required

Keep manual useMemo or useCallback only in these cases:

1. Referential identity for non-React consumers. Values feeding into addEventListener, an IntersectionObserver, third-party libraries with their own === checks, anything outside React that retains the reference.
2. Expensive non-render work the compiler cannot see through. Parsing a large blob, building a large index, calling a heavy library. Keep, and add a comment explaining why.
3. Effect dependencies that must be stable for correctness. If a dependency would trip the effect every render without the wrap, keep it.

Anything outside these three cases gets deleted.

Audit workflow on an existing codebase