react-best-practices

Use useEffect only for synchronizing with external systems, while render-time calculations handle derived state and data transformations. Avoid unnecessary effects by computing values directly during render to ensure safe, maintainable React components.

Safe React effects require proper cleanup to prevent memory leaks and race conditions. Return a cleanup function from useEffect to cancel subscriptions, abort fetches, or reset timers, ensuring proper effect cleanup and maintainable component design.

The best way to manage React props is choosing controlled components for predictable state synchronization and uncontrolled components for isolated internal state. Prefer composition over propagation to build clean, maintainable component designs.

React components re-render unnecessarily from misplaced state or missing memoization. Fix this by using memoization where appropriate, preferring render-time calculations over state updates, and avoiding unnecessary effects to ensure safe, maintainable code.

Yes, you can apply these React best practices to reading and writing existing .tsx and .jsx files. The Skill assesses your components, identifies anti-patterns in forms and lists, and suggests a refactor plan for clean component design.

To avoid data fetch anti-patterns in React, apply effects correctly by managing dependencies and ensuring proper cleanup. Use memoization where appropriate and prefer composition over propagation to maintain safe, maintainable code.