React Anti-Patterns

Good React code is simple, predictable, and easy to read. Anti-patterns make components fragile, harder to maintain, and confusing for other developers.

JSX conditional logic standards

• Avoid excessive use of ternary (? :) operators in JSX.
• Do not nest multiple ternaries inside JSX. Extract logic into variables or helper functions first.
• Avoid complex conditional expressions in JSX render trees. Compute values outside render, then render cleanly.
• Use early returns or extracted subcomponents for readability.

useEffect and useState usage standards

• Avoid unnecessary usage of useEffect and useState. Always prefer trusted, popular solutions (e.g., React Query for server state, React Hook Form for form state).
• useEffect must only be used for real side-effects (network, subscriptions, timers, DOM APIs). Do not use it for deriving values from props or state.
• Excessive useState declarations in one component make it unmaintainable.
  • If a component manages too many states, extract them into a dedicated hook to separate concerns.
  • Each hook should own a related group of states (e.g., useDialogState, useFormState, usePaginationState).
• Keep components lean by combining local UI state with hook-managed logic.

Cleanup and memory leaks

• Always implement cleanup functions inside useEffect when subscribing to events, opening sockets, or setting timers.
• Ensure that event listeners, subscriptions, or intervals are cleared on component unmount.
• Memory leaks from forgotten cleanups are unacceptable in production code.

---