Rules Hub
Coding Rules Library
← Back to all rules
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
frontend ruleP1stack specificStack: react
reactseparation-of-concernshookspurity
Keep fetch helpers pure and move state setters into the calling hook
A reusable fetch function should return data (or null on error) rather than reaching into context and calling setState; let the hook/component that calls it own the state and error handling.
PR: hegnar-forum-web · org-mining-hist-2026-06Created: Jun 20, 2026
Bad example
Old codets
| 1 | async function fetchThreads({ context, page }) { |
| 2 | const { setThreads, setIsError, showSnackbar } = context; |
| 3 | try { |
| 4 | const res = await fetch(`/api/threads?page=${page}`); |
| 5 | setThreads((await res.json()).threads); |
| 6 | } catch { |
| 7 | setIsError(true); |
| 8 | showSnackbar({ severity: 'error', message: '...' }); |
| 9 | } |
| 10 | } |
Explanation (EN)
Objašnjenje (HR)
Good example
New codets
| 1 | // pure: just fetch and return |
| 2 | async function fetchThreads({ page }): Promise<Threads | null> { |
| 3 | const res = await fetch(`/api/threads?page=${page}`); |
| 4 | if (!res.ok) return null; |
| 5 | return res.json(); |
| 6 | } |
| 7 |
|
| 8 | // the hook owns state + error handling |
| 9 | const data = await fetchThreads({ page }); |
| 10 | if (!data) setIsError(true); |
| 11 | else setThreads(data.threads); |
Explanation (EN)
Objašnjenje (HR)