Skip to main content

Patterns: Anti-Patterns

Known anti-patterns to flag during review. Fix when encountered in touched files. Load via the patterns-review context group.

  1. Reducer style inconsistency. Most slices use immutable spread (return { ...state, ... }); a few use Immer mutation (state.field = value). Both are valid in RTK but should be consistent per slice.

  2. Oversized liveChatSlice. Mixes connection state, conversations, messages, filters, sound preferences, and UI state. Candidate for splitting along those concerns.

  3. Direct store import outside React context. Some actions files call store.dispatch() / store.getState() directly. Use thunk arguments ((dispatch, getState) => ...) instead.

  4. Debug strings in production code. Error messages or console logs with placeholder text (e.g., 'translate poopi') left in committed code.

  5. Route duplication. Routes appearing twice in computedRoutes in Root.jsx.

  6. Hooks returning JSX. Hooks like useTableFilterIcon returning rendered elements. Hooks should return data or functions; the caller renders.

  7. No screen-level code splitting. Screens are eagerly imported; only a few heavy panels use React.lazy. New heavy screens should be lazy-loaded.

  8. Inline static styles. Use utility classes or component .less rules for static values. See styling.md Category C for the rule (same value on 3+ elements → CSS class) and Category D for hardcoded colors → tokens.

Current inventory of inline-style and classnames violations is tracked in the hbf-console style migration task.