Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Extract heavy component logic into hooks or helpers
When a React component starts owning substantial form state, derived values, validation, and side effects, move that logic into a custom hook or helper.
Bad example
| 1 | const PortfolioTransactionModal = () => { |
| 2 | const [mode, setMode] = useState("instrument"); |
| 3 | const [errors, setErrors] = useState({}); |
| 4 | const [isSubmitting, setIsSubmitting] = useState(false); |
| 5 | const [dateValue, setDateValue] = useState(""); |
| 6 | const [quantityValue, setQuantityValue] = useState(""); |
| 7 | const costPrice = useMemo(() => { |
| 8 | // derived calculations |
| 9 | return 0; |
| 10 | }, [quantityValue]); |
| 11 |
|
| 12 | const validate = () => { |
| 13 | // validation logic |
| 14 | return true; |
| 15 | }; |
| 16 |
|
| 17 | const handleSave = async () => { |
| 18 | // submit logic |
| 19 | }; |
| 20 |
|
| 21 | return <Dialog>{/* large JSX tree */}</Dialog>; |
| 22 | }; |
Explanation (EN)
The component mixes rendering, state machine logic, validation, derived values, and side effects. It becomes hard to review, test, and change safely.
Objašnjenje (HR)
Komponenta mijesa renderiranje, state machine logiku, validaciju, izvedene vrijednosti i side effecte. Postaje teska za review, testiranje i sigurne izmjene.
Good example
| 1 | const PortfolioTransactionModal = (props: Props) => { |
| 2 | const form = useTransactionModalForm(props); |
| 3 | return <PortfolioTransactionModalView {...form} />; |
| 4 | }; |
| 5 |
|
| 6 | const useTransactionModalForm = ({ open, onClose }: Props) => { |
| 7 | const [mode, setMode] = useState("instrument"); |
| 8 | const [dateValue, setDateValue] = useState(""); |
| 9 | const handleSave = async () => { |
| 10 | // submit logic |
| 11 | }; |
| 12 |
|
| 13 | return { |
| 14 | mode, |
| 15 | setMode, |
| 16 | dateValue, |
| 17 | setDateValue, |
| 18 | handleSave |
| 19 | }; |
| 20 | }; |
Explanation (EN)
The component stays focused on composition and rendering, while the hook owns the form logic. That separation makes the code easier to reason about and test.
Objašnjenje (HR)
Komponenta ostaje fokusirana na kompoziciju i renderiranje, dok hook preuzima logiku forme. Takva podjela olaksava razumijevanje i testiranje.
Exceptions / Tradeoffs (EN)
Do not extract tiny components that only have a couple of local state values and no real business logic.
Iznimke / Tradeoffi (HR)
Nemoj izdvajati sitne komponente koje imaju samo nekoliko lokalnih state vrijednosti i nemaju stvarnu business logiku.