react-best-practices

To avoid stale state in useEffect, ensure effect dependencies are correctly specified and manage state updates to prevent unnecessary renders. This Skill guides correct cleanup patterns and dependency array usage for safer React components.

Use useRef for mutable values that don't trigger re-renders, like accessing DOM elements or storing event handler references. This Skill provides safe patterns for using refs, useImperativeHandle, and event handlers in React.

The best way to structure React components is favoring focused custom hooks and composition over prop drilling. This Skill guides component design to improve reuse and maintain predictable renders in your codebase.

Yes, this React best practices guidance applies to modern React projects using TypeScript or JavaScript. It enforces safe, maintainable component patterns for .tsx and .jsx files during development and code reviews.

Refactor React components by auditing effect usage, ref patterns, and memoization against established guidelines. This Skill helps contributors align with team conventions and improve review quality during onboarding and refactoring.

You should not use useMemo unnecessarily when the computational cost of recalculating values is lower than the memory overhead. This Skill guides appropriate useMemo usage and dependency management to maintain predictable renders.