react-best-practices

Use effects only for synchronizing with external systems; prefer useMemo for data transformation and event handlers for user actions to ensure predictable React component behavior.

Refactor components by replacing effect-driven state updates with event handlers, applying updater functions, and using refs for mutable values to convert effect-heavy code into handler-driven implementations.

Yes, the guidance applies to .tsx and .jsx files with React imports, pairing React refactoring and hook patterns with TypeScript conventions for linter-friendly dependency handling.

Best practices include using useImperativeHandle for controlled ref exposure, applying useEffectEvent for non-reactive logic, and ensuring custom hooks include proper cleanup and linter-friendly dependency arrays.

Excessive re-renders often stem from effect misuse. Applying memoization with useMemo, using refs for mutable values, and aligning dependency arrays with linter rules minimizes unnecessary render cycles.

Yes, component design guidance covers choosing between controlled and uncontrolled patterns, favoring composition over prop drilling, and implementing key-based resets for predictable component behavior.