44alwaysApply: true
55---
66<Warning>
7- Below are list of constraints to adhere to based on project style requirements:
8- - useEffect, useRef, useCallback and other hook related items should always be implemented in custom hook files instead of inside components
9- - Utilize readonly and immutable inputs to all ui components
10- - Non-interactive elements should not be assigned mouse or keyboard event listeners.sonarqube(typescript:S6847) !important
11- - Use <hr> instead of the "separator" role to ensure accessibility across all devices.
12- - Do not utilize fixed pixel heights and widths that will not respond to variable screen size and resolution
7+ 1. **Constants:**
8+ - Extract magic numbers/strings into constants.
9+ - Centralize in a dedicated constants file.
10+
11+ 2. **Folder Structure:**
12+ - Organize by feature/purpose (components, hooks, utilities, constants, types).
13+ - Be consistent and intuitive.
14+
15+ 3. **Reusable & Dumb Components:**
16+ - Split large components into small, focused pieces.
17+ - Keep business logic out of presentational components.
18+ - Use the children pattern to avoid prop drilling.
19+
20+ 4. **Minimal Markup:**
21+ - Avoid unnecessary wrappers; use React fragments (`<>…</>`).
22+ - If layout styling is needed, wrap with a one-off container rather than embedding in a reusable component.
23+
24+ 5. **No Layout in Reusable Components:**
25+ - Reusable components (e.g., buttons, headings) should accept a `className` prop for one-off styling.
26+ - Do not hardcode layout styles inside them.
27+
28+ 6. **TypeScript:**
29+ - Use strict TypeScript types for props, state, and functions.
30+ - Use union types for limited values (e.g., `'primary' | 'secondary'`).
31+
32+ 7. **Event Handlers:**
33+ - Name props using the “onEvent” convention (e.g., `onAddTodo`).
34+ - Use internal handler names like `handleAddTodo`.
35+
36+ 8. **State Updates:**
37+ - Wrap state updates in dedicated event handler functions.
38+ - Use updater functions (`setState(prev => …)`) when new state depends on previous state.
39+
40+ 9. **Single Source of Truth:**
41+ - Track selected/active items by ID instead of the entire object.
42+
43+ 10. **URL as State:**
44+ - Store shareable state (filters, pagination) in the URL, not in component state.
45+
46+ 11. **useEffect Discipline:**
47+ - Keep each `useEffect` focused on one concern.
48+ - Split effects if they manage unrelated tasks.
49+
50+ 12. **Data Fetching:**
51+ - Prefer React Query/SWR or Next.js data fetching methods over manual useEffect fetching.
52+
53+ 13. **Performance:**
54+ - Use `useMemo` for expensive calculations/objects.
55+ - Use `useCallback` for functions passed as props.
56+ - Wrap components in `React.memo` to avoid unnecessary renders.
57+
58+ 14. **Consolidate Related State:**
59+ - Use a single state object for related pieces of state where possible.
60+
61+ 15. **Custom Hooks & Utilities:**
62+ - Extract shared logic into custom hooks.
63+ - Write utility functions for common tasks (e.g., string formatting).
64+
65+ 16. **Avoid Prop Drilling:**
66+ - Use context or children patterns instead of passing raw setter functions deeply.
67+
68+ 17. **Naming for Function Props:**
69+ - Expose custom events using “onEvent” props (e.g., `onAddTodo`), and use descriptive handler names internally (e.g., `handleAddTodo`).
70+
71+ ### Project Constraints (Reminders)
72+
73+ - **Hooks:** Place all hook logic (useEffect, useRef, useCallback, etc.) in custom hook files.
74+ - **Immutability:** All UI component inputs must be readonly/immutable.
75+ - **Event Listeners:** Do not assign mouse or keyboard listeners to non-interactive elements.
76+ - **Accessibility:** Use `<hr>` instead of the "separator" role.
77+ - **Responsive Design:** Avoid fixed pixel heights/widths; design for responsiveness.
78+
79+ ---
80+
81+ All new code must comply with these guidelines to ensure a modular, maintainable, and high-performing React codebase.
1382</Warning>
0 commit comments