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).
Seed local component state from the URL parameter that drives the same behaviour
When a URL query parameter feeds the data layer but a paired local state starts empty, a shared or reloaded link applies the filter while the control shows nothing, so the user cannot see or clear what is active.
Bad example
| 1 | const [search, setSearch] = useQueryState("search"); |
| 2 | const [value, setValue] = useState(""); // ignores the incoming ?search=foo |
| 3 |
|
| 4 | return <TextField value={value} onChange={e => setValue(e.target.value)} onBlur={() => setSearch(value)} />; |
Explanation (EN)
Opening a shared link filters the results but renders an empty input, so the active filter is invisible and the user has no obvious way to clear it.
Objašnjenje (HR)
Otvaranje podijeljene poveznice filtrira rezultate, ali prikazuje prazan unos, pa je aktivni filtar nevidljiv i korisnik ga nema kako ocito ukloniti.
Good example
| 1 | const [search, setSearch] = useQueryState("search"); |
| 2 | const [value, setValue] = useState(search ?? ""); |
| 3 |
|
| 4 | useEffect(() => { |
| 5 | setValue(search ?? ""); |
| 6 | }, [search]); |
| 7 |
|
| 8 | return <TextField value={value} onChange={e => setValue(e.target.value)} onBlur={() => setSearch(value)} />; |
Explanation (EN)
The control initialises from the URL and follows later changes to it, so what is shown always matches what is applied.
Objašnjenje (HR)
Kontrola se inicijalizira iz URL-a i prati njegove kasnije promjene, pa je prikazano uvijek jednako primijenjenom.
Notes (EN)
The same applies to sort direction, page size, and any control whose initial value is hardcoded while the URL already carries one - a hardcoded default silently overrides the link.
Bilješke (HR)
Isto vrijedi za smjer sortiranja, velicinu stranice i svaku kontrolu ciju je pocetnu vrijednost tvrdo kodirana dok je URL vec nosi - tvrdo kodirana zadana vrijednost tiho nadjacava poveznicu.