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 ruleP2stack specificStack: react
reactcontextreducerstate
Use a reducer to simplify a context with many related state setters
When a context manages several interrelated pieces of state with multiple setters, model it with useReducer and typed actions to reduce boilerplate.
PR: hegnar-forum-web · org-mining-hist-2026-06Created: Jun 20, 2026
Bad example
Old codetsx
| 1 | const [isOpen, setIsOpen] = useState(false); |
| 2 | const [src, setSrc] = useState(''); |
| 3 | const [width, setWidth] = useState(0); |
| 4 | const [height, setHeight] = useState(0); |
| 5 | const openImage = el => { setSrc(el.src); setWidth(el.width); setHeight(el.height); setIsOpen(true); }; |
Explanation (EN)
Objašnjenje (HR)
Good example
New codetsx
| 1 | type Action = { type: 'OPEN'; payload: { src: string; width: number; height: number } } | { type: 'CLOSE' }; |
| 2 | const [state, dispatch] = useReducer(reducer, initialState); |
| 3 | const openImage = el => dispatch({ type: 'OPEN', payload: { src: el.src, width: el.width, height: el.height } }); |
Explanation (EN)
Objašnjenje (HR)