require-react-component-keys

Requires keys for JSX used as list output.

Rule details Problem

The rule looks for JSX returned from iteration callbacks such as .map(...) and from memoization callbacks such as useMemo(...). In those contexts, JSX elements need a key, and JSX fragments need to be replaced with a keyed element.

It skips ordinary top-level component returns, JSX passed through most props, ternary children, logical child fragments, and a small ignore list of call expressions. By default it also reports a key on a plain root component return, because that key is usually ignored by the parent.

Fragments are stricter here

A bare fragment like <>...</> can never carry a key, so list items that use fragments need <React.Fragment key=...> or another keyed wrapper element.

Examples

Incorrect

function UserList({ users }) {
  return users.map((user) => <UserCard user={user} />);
}

Correct

function UserList({ users }) {
  return users.map((user) => <UserCard key={user.id} user={user} />);
}

Options

Option	Type	Default
allowRootKeys	boolean	false
ignoreCallExpressions	string[]	["ReactTree.mount", "CreateReactStory"]
iterationMethods	string[]	["map", "filter", "forEach", "flatMap", "reduce", "reduceRight", "some", "every", "find", "findIndex"]
memoizationHooks	string[]	["useCallback", "useMemo"]

Related rules

require-react-display-names Keeps React DevTools output readable