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).
Pause background refresh while the user is editing
Do not let polling or background refresh overwrite in-progress modal or form state. Suspend refresh or isolate draft state until editing is complete.
Bad example
| 1 | function EditModal({ item }: { item: Item }) { |
| 2 | const { data } = usePollingQuery('/api/items', 30000); |
| 3 | const [draftName, setDraftName] = useState(item.name); |
| 4 |
|
| 5 | useEffect(() => { |
| 6 | setDraftName(item.name); |
| 7 | }, [item]); |
| 8 |
|
| 9 | return <input value={draftName} onChange={(e) => setDraftName(e.target.value)} />; |
| 10 | } |
Explanation (EN)
Background refresh keeps changing the source props while the user is editing, so the draft can reset unexpectedly. This creates data loss, confusing UI jumps, and modal behavior that feels broken even though the polling itself is technically working.
Objašnjenje (HR)
Pozadinsko osvježavanje stalno mijenja izvorne propse dok korisnik uređuje, pa se draft može neočekivano resetirati. To uzrokuje gubitak podataka, zbunjujuće skokove u UI-ju i modal koji djeluje pokvareno iako polling tehnički radi.
Good example
| 1 | function EditModal({ item, isOpen }: { item: Item; isOpen: boolean }) { |
| 2 | const { data } = usePollingQuery('/api/items', isOpen ? false : 30000); |
| 3 | const [draftName, setDraftName] = useState(item.name); |
| 4 |
|
| 5 | useEffect(() => { |
| 6 | if (!isOpen) { |
| 7 | setDraftName(item.name); |
| 8 | } |
| 9 | }, [item, isOpen]); |
| 10 |
|
| 11 | return <input value={draftName} onChange={(e) => setDraftName(e.target.value)} />; |
| 12 | } |
Explanation (EN)
The editing state is protected from background churn. Polling is paused or draft synchronization is gated while the modal is open, so the user can finish editing without silent resets.
Objašnjenje (HR)
Stanje uređivanja zaštićeno je od pozadinskih promjena. Polling je pauziran ili je sinkronizacija drafta ograničena dok je modal otvoren pa korisnik može završiti uređivanje bez tihih resetiranja.
Notes (EN)
If refresh must continue, keep server data and user draft in separate state channels and merge deliberately rather than resetting from props.
Bilješke (HR)
Ako osvježavanje mora nastaviti raditi, drži serverske podatke i korisnički draft u odvojenim kanalima stanja i spajaj ih namjerno umjesto resetiranja iz propsa.
Exceptions / Tradeoffs (EN)
Purely read-only surfaces can continue polling normally. The rule matters when refresh can overwrite in-progress user input or local editing state.
Iznimke / Tradeoffi (HR)
Potpuno read-only površine mogu normalno nastaviti polling. Pravilo je bitno kada refresh može prepisati korisnički unos ili lokalno stanje uređivanja koje je u tijeku.