Rules Hub
Coding Rules Library
Extract complex render props into named components
Avoid defining complex UI logic inline within render props. Extract them into separate components to improve readability and maintainability.
Bad example
| 1 | /* Chart.tsx */ |
| 2 | return ( |
| 3 | <LineChart data={data}> |
| 4 | <Tooltip |
| 5 | content={({ active, payload, label }) => { |
| 6 | if (!active || !payload) return null; |
| 7 | return ( |
| 8 | <div className="bg-white p-2 shadow"> |
| 9 | <p className="font-bold">{label}</p> |
| 10 | {payload.map((entry) => ( |
| 11 | <div key={entry.name} style={{ color: entry.color }}> |
| 12 | {entry.name}: {entry.value} |
| 13 | </div> |
| 14 | ))} |
| 15 | </div> |
| 16 | ); |
| 17 | }} |
| 18 | /> |
| 19 | </LineChart> |
| 20 | ); |
Explanation (EN)
Defining the tooltip UI inline within the render prop clutters the parent component, making it hard to read and maintain. The logic for rendering the tooltip is mixed with the chart configuration, and the anonymous function is redefined on every render.
Objašnjenje (HR)
Definiranje UI-a tooltipa unutar render propa zatrpava roditeljsku komponentu, čineći je teškom za čitanje i održavanje. Logika za prikaz tooltipa je pomiješana s konfiguracijom grafa, a anonimna funkcija se ponovno definira pri svakom renderiranju.
Good example
| 1 | /* CustomTooltip.tsx */ |
| 2 | export function CustomTooltip({ active, payload, label }: TooltipProps) { |
| 3 | if (!active || !payload) return null; |
| 4 | return ( |
| 5 | <div className="bg-white p-2 shadow"> |
| 6 | <p className="font-bold">{label}</p> |
| 7 | {payload.map((entry) => ( |
| 8 | <div key={entry.name} style={{ color: entry.color }}> |
| 9 | {entry.name}: {entry.value} |
| 10 | </div> |
| 11 | ))} |
| 12 | </div> |
| 13 | ); |
| 14 | } |
| 15 |
|
| 16 | /* Chart.tsx */ |
| 17 | import { CustomTooltip } from './CustomTooltip'; |
| 18 |
|
| 19 | return ( |
| 20 | <LineChart data={data}> |
| 21 | <Tooltip content={CustomTooltip} /> |
| 22 | </LineChart> |
| 23 | ); |
Explanation (EN)
The tooltip logic is extracted into a dedicated component. This separates the presentation logic from the parent container, makes the component reusable and testable, and improves the readability of the main chart code.
Objašnjenje (HR)
Logika tooltipa je izdvojena u zasebnu komponentu. To odvaja prezentacijsku logiku od roditeljskog spremnika, čini komponentu ponovno iskoristivom i testabilnom te poboljšava čitljivost glavnog koda grafa.