Rules Hub

Coding Rules Library

← Back to all rules
frontend ruleStack: react
reactjsxclean-codereadabilitytypescript

Prefer a compute helper over raw IIFEs in JSX

Use a utility function to execute inline logic immediately instead of noisy IIFE syntax inside JSX props.

PR: Fix/FABS-441 - Fixing mobile paywall and paywall image endpoint #250Created: Dec 8, 2025

Bad example

Old codetsx
1<div
2 className={(() => {
3 if (isLoading) return 'opacity-50';
4 if (hasError) return 'text-red-500';
5 return 'text-black';
6 })()}
7>
8 Status
9</div>

Explanation (EN)

Using a raw Immediately Invoked Function Expression (IIFE) inside JSX creates visual clutter with trailing parentheses `()`, making the code harder to read.

Objašnjenje (HR)

Korištenje sirovog IIFE-a (funkcije koja se odmah izvršava) unutar JSX-a stvara vizualni nered zbog zagrada `()` na kraju, što otežava čitanje koda.

Good example

New codetsx
1// defined once as a utility
2function compute<T>(fn: () => T): T {
3 return fn();
4}
5
6// ... inside component
7<div
8 className={compute(() => {
9 if (isLoading) return 'opacity-50';
10 if (hasError) return 'text-red-500';
11 return 'text-black';
12 })}
13>
14 Status
15</div>

Explanation (EN)

Wrapping the logic in a `compute` helper clearly communicates intent and removes the awkward syntax of traditional IIFEs.

Objašnjenje (HR)

Omotavanje logike u `compute` pomoćnu funkciju jasno komunicira namjeru i uklanja nespretnu sintaksu tradicionalnih IIFE-a.

Notes (EN)

While extracting complex logic into named variables is often preferred, `compute` is an excellent alternative when the logic is strictly presentational and should remain co-located with the JSX.

Bilješke (HR)

Iako je izvlačenje složene logike u imenovane varijable često poželjnije, `compute` je izvrsna alternativa kada je logika isključivo prezentacijska i treba ostati uz JSX.