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 ruleP2project specificStack: react
reacthandlersreadabilityevents
Avoid inline event handlers in JSX
Extract event handlers into named functions to improve readability, reuse, and debugging.
Created: Jan 29, 2026
Bad example
Old codetsx
| 1 | export function Menu() { |
| 2 | return <button onClick={() => doSomething()}>Open</button>; |
| 3 | } |
Explanation (EN)
Inline handlers hide intent and make it harder to reuse or test the handler logic.
Objašnjenje (HR)
Inline handleri skrivaju namjeru i otežavaju ponovno korištenje ili testiranje logike.
Good example
New codetsx
| 1 | function handleOpen() { |
| 2 | doSomething(); |
| 3 | } |
| 4 |
|
| 5 | export function Menu() { |
| 6 | return <button onClick={handleOpen}>Open</button>; |
| 7 | } |
Explanation (EN)
Named handlers make intent explicit and keep JSX clean.
Objašnjenje (HR)
Imenovani handleri jasno izražavaju namjeru i drže JSX urednim.
Exceptions / Tradeoffs (EN)
Tiny components can keep inline handlers if extraction hurts readability.
Iznimke / Tradeoffi (HR)
Mikro komponente mogu zadržati inline handlere ako ekstrakcija šteti čitljivosti.