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).
Memoize for outcomes, not habit
Use memoization when it prevents real work; avoid blanket useMemo/useCallback everywhere.
Bad example
| 1 | import { useCallback, useMemo, useState } from "react"; |
| 2 |
|
| 3 | export function Filters() { |
| 4 | const [q, setQ] = useState(""); |
| 5 |
|
| 6 | // Over-memoization: tiny computations and callbacks that don't prevent rerenders. |
| 7 | const label = useMemo(() => q.trim(), [q]); |
| 8 | const onChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => setQ(e.target.value), []); |
| 9 |
|
| 10 | return ( |
| 11 | <div> |
| 12 | <span>{label}</span> |
| 13 | <input value={q} onChange={onChange} /> |
| 14 | </div> |
| 15 | ); |
| 16 | } |
Explanation (EN)
Memoization adds code and cognitive overhead. If it doesn't prevent expensive rerenders or heavy computation, it becomes performance theater.
Objašnjenje (HR)
Memoizacija dodaje kod i mentalni overhead. Ako ne sprjecava skupe rerendere ili teske izracune, postaje performance theater.
Good example
| 1 | import { useState } from "react"; |
| 2 |
|
| 3 | export function Filters() { |
| 4 | const [q, setQ] = useState(""); |
| 5 | const label = q.trim(); |
| 6 |
|
| 7 | return ( |
| 8 | <div> |
| 9 | <span>{label}</span> |
| 10 | <input value={q} onChange={(e) => setQ(e.target.value)} /> |
| 11 | </div> |
| 12 | ); |
| 13 | } |
Explanation (EN)
Keep code simple by default. Add memoization only when profiling shows it prevents meaningful work (expensive renders, large lists, memoized children, stable Context values).
Objašnjenje (HR)
Drzi kod jednostavnim po defaultu. Dodaj memoizaciju tek kada profiling pokaze da sprjecava znacajan rad (skupi renderi, velike liste, memoizirana djeca, stabilne Context vrijednosti).
Notes (EN)
Good reasons to memoize: stabilizing Context value, preventing rerenders of memoized children, expensive derived computations, and stable dependencies for effects.
Bilješke (HR)
Dobri razlozi za memoizaciju: stabilizacija Context valuea, sprjecavanje rerendera memoizirane djece, skupi derivirani izracuni i stabilne ovisnosti za efekte.
Exceptions / Tradeoffs (EN)
Memoization can be used proactively in hot paths you already know are expensive, but avoid spreading it across the entire codebase without evidence.
Iznimke / Tradeoffi (HR)
Memoizaciju mozes koristiti proaktivno na hot pathovima za koje znas da su skupi, ali nemoj je siriti po cijelom codebaseu bez dokaza.