Rules Hub
Coding Rules Library
Prefer curried event handlers for parameterized callbacks
Use curried functions to pass arguments to event handlers instead of inline anonymous wrappers to improve JSX readability.
Bad example
| 1 | const handleSort = (column: string) => { |
| 2 | setSortBy(column); |
| 3 | }; |
| 4 |
|
| 5 | return ( |
| 6 | <button onClick={() => handleSort('date')}> |
| 7 | Sort by Date |
| 8 | </button> |
| 9 | ); |
Explanation (EN)
Using an inline arrow function wrapper `() => handleSort(...)` adds visual noise to the JSX and mixes logic definition with usage.
Objašnjenje (HR)
Korištenje inline arrow funkcije `() => handleSort(...)` dodaje vizualni šum u JSX i miješa definiciju logike s upotrebom.
Good example
| 1 | const handleSort = (column: string) => (e: React.MouseEvent) => { |
| 2 | setSortBy(column); |
| 3 | }; |
| 4 |
|
| 5 | return ( |
| 6 | <button onClick={handleSort('date')}> |
| 7 | Sort by Date |
| 8 | </button> |
| 9 | ); |
Explanation (EN)
By using a curried function (a function that returns the event handler), the JSX becomes cleaner and reads like a direct assignment `onClick={handler(arg)}`.
Objašnjenje (HR)
Korištenjem curried funkcije (funkcija koja vraća event handler), JSX postaje čišći i čita se kao izravna dodjela `onClick={handler(arg)}`.
Notes (EN)
This pattern is functionally equivalent to arrow wrappers regarding re-renders (a new function is created each time), but it is often preferred for style and cleaner JSX syntax.
Bilješke (HR)
Ovaj uzorak je funkcionalno ekvivalentan arrow wrapperima što se tiče ponovnog renderiranja (svaki put se kreira nova funkcija), ali se često preferira zbog stila i čišće JSX sintakse.