Rules Hub

Coding Rules Library

← Back to all rules
frontend ruleStack: react
clean-codereadabilityjavascripttypescript

Prefer function references over wrapper lambdas

Pass function references directly when arguments match, avoiding unnecessary anonymous wrapper functions.

PR: Feat/FCK-1561 - Adding Invoice Table to Minside #3570Created: Dec 8, 2025

Bad example

Old codetsx
1const [page, setPage] = useState(1);
2
3// Bad: Redundant anonymous wrapper function
4<Pagination
5 totalEntries={100}
6 onPageChange={(newPage) => setPage(newPage)}
7/>

Explanation (EN)

The anonymous function `(newPage) => setPage(newPage)` creates unnecessary verbosity. It simply forwards the argument to `setPage` without adding any logic.

Objašnjenje (HR)

Anonimna funkcija `(newPage) => setPage(newPage)` stvara nepotrebnu opširnost. Ona samo prosljeđuje argument u `setPage` bez dodavanja ikakve logike.

Good example

New codetsx
1const [page, setPage] = useState(1);
2
3// Good: Direct function reference
4<Pagination
5 totalEntries={100}
6 onPageChange={setPage}
7/>

Explanation (EN)

Passing `setPage` directly is cleaner and functionally equivalent, as long as the function signatures match safely.

Objašnjenje (HR)

Izravno prosljeđivanje `setPage` je čišće i funkcionalno ekvivalentno, sve dok se potpisi funkcija sigurno podudaraju.

Notes (EN)

Be careful when passing functions that accept more arguments than intended (e.g., `['1', '2'].map(parseInt)` fails because `map` passes index). For state setters, this is safe.

Bilješke (HR)

Budite oprezni pri prosljeđivanju funkcija koje prihvaćaju više argumenata nego što je predviđeno (npr. `['1', '2'].map(parseInt)` ne radi ispravno jer `map` šalje index). Za React state settere ovo je sigurno.