Skip to content

Commit 55331f1

Browse files
committed
docs: rm the rule on inline jsx
1 parent 92052f6 commit 55331f1

1 file changed

Lines changed: 2 additions & 31 deletions

File tree

contributingGuides/review/RULES.md

Lines changed: 2 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -102,36 +102,7 @@ return <ReportActionItem report={report} />
102102

103103
---
104104

105-
### [PERF-5] Avoid inline object/array/function creation in JSX
106-
- **Condition**: Objects, arrays, and functions should not be created inline in JSX. Use `useMemo` or `useCallback` to memoize them when there's actual performance benefit.
107-
- **Reasoning**: Inline creation generates new instances on every render, breaking React's reconciliation optimizations and forcing child component re-renders. Memoization moves the creation cost outside the render cycle and enables proper optimization.
108-
109-
Good:
110-
```tsx
111-
const reportActionItemStyle = useMemo(() => [styles.container, styles.flex], []);
112-
const handleSelect = useCallback(() => {
113-
onSelectRow(item);
114-
}, [onSelectRow, item]);
115-
116-
<ReportActionItem
117-
style={reportActionItemStyle}
118-
onSelect={handleSelect}
119-
reportID={report.reportID}
120-
/>
121-
```
122-
123-
Bad:
124-
```tsx
125-
<ReportActionItem
126-
style={[styles.container, styles.flex]}
127-
onSelect={() => onSelectRow(item)}
128-
reportID={report.reportID}
129-
/>
130-
```
131-
132-
---
133-
134-
### [PERF-6] Use shallow comparisons instead of deep comparisons
105+
### [PERF-5] Use shallow comparisons instead of deep comparisons
135106
- **Condition**: In `React.memo` and similar optimization functions, compare only specific relevant properties instead of using deep equality checks.
136107
- **Reasoning**: Deep equality checks recursively compare all nested properties, creating performance overhead that often exceeds the re-render cost they aim to prevent. Shallow comparisons of specific relevant properties provide the same optimization benefits with minimal computational cost.
137108

@@ -154,7 +125,7 @@ memo(ReportActionItem, (prevProps, nextProps) =>
154125

155126
---
156127

157-
### [PERF-7] Use specific properties as hook dependencies
128+
### [PERF-6] Use specific properties as hook dependencies
158129
- **Condition**: In `useEffect`, `useMemo`, and `useCallback`, specify individual object properties as dependencies instead of passing entire objects.
159130
- **Reasoning**: Passing entire objects as dependencies causes hooks to re-execute whenever any property changes, even unrelated ones. Specifying individual properties creates more granular dependency tracking, reducing unnecessary hook executions and improving performance predictability.
160131

0 commit comments

Comments
 (0)