Skill / React code quality
Do not query the DOM in React
Keep element identity and collections in React instead of searching rendered markup.
Goal
Never use querySelector or querySelectorAll in React code; use refs, props, state, and context to preserve ownership.
Review rules for component structure, state ownership, data fetching, and render behavior.
Checks
1Attach refs where elements are created and pass them through React-owned boundaries.
2Register dynamic element collections with callback refs and a ref-backed Map.
3Carry selection and identity through props, state, or context instead of rediscovering them from rendered attributes.
4Refactor existing DOM searches instead of suppressing or wrapping them.
Avoid
1querySelector and querySelectorAll in React source.
2Class-name or data-attribute selectors used to recover React-owned elements or state.
3Effects that scan rendered descendants instead of maintaining refs as elements mount and unmount.
4Lint exceptions, wrapper helpers, or selector utilities that hide DOM queries.