You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-**Reasoning**: New object/function references break memoization of child components. Only matters when child IS memoized AND parent is NOT optimized by React Compiler.
157
-
158
-
#### Before flagging: Run optimization check
159
-
160
-
**YOU MUST call `checkReactCompilerOptimization.ts` (available in PATH from `.claude/scripts/`) on EVERY .tsx file from the diff.**
161
-
162
-
**Call the script ONCE per file, separately. DO NOT use loops or batch processing.**
- The iterator variable directly (e.g., `transform(item)`)
487
+
- A property/value derived from the iterator (e.g., `format(item.name)`)
488
+
- The index parameter when used meaningfully (e.g., `generateId(index)`)
489
+
- The function is not a method called ON the iterator or iterator-derived value (e.g., `item.getValue()`)
490
+
491
+
**For `.forEach`**:
492
+
- Same conditions as above, BUT also verify the side effect doesn't depend on iteration context
493
+
- If the function call would produce the same effect regardless of which iteration it runs in, flag it
494
+
495
+
**DO NOT flag if:**
496
+
497
+
- Function uses iterator, its parts or derived value based on iterator (e.g. `func(item.process())`)
498
+
- Function call depends on iterator (e.g. `item.value ?? getDefault()`)
499
+
- Function is used when mapping to new entities (e.g. `const thing = { id: createID() }`)
500
+
- Above but applied to index instead of iterator
501
+
502
+
-**Reasoning**: Function calls inside iteration callbacks that don't use the iterator variable execute redundantly - producing the same result. This creates O(n) overhead that scales with data size. Hoisting these calls outside the loop eliminates redundant computation and improves performance, especially on large datasets like transaction lists or report collections.
503
+
504
+
Good:
505
+
506
+
```ts
507
+
// Hoist iterator-independent calls outside the loop
-**Condition**: Flag ONLY when ALL of these are true:
833
+
834
+
- A **new feature** is being introduced OR an **existing component's API is being expanded with new props**
835
+
- The change adds configuration properties (flags, conditional logic)
836
+
- These configuration options control feature presence or behavior within the component
837
+
- These features could instead be expressed as composable child components
838
+
839
+
**Features that should be expressed as child components:**
840
+
- Optional UI elements that could be composed in
841
+
- New behavior that could be introduced as new children
842
+
- Features that currently require parent component code changes
843
+
844
+
**DO NOT flag if:**
845
+
- Props are narrow, stable values needed for coordination between composed parts (e.g., `reportID`, `data`, `columns`)
846
+
- The component uses composition and child components for features
847
+
- Parent components stay stable as features are added
848
+
849
+
-**Reasoning**: When new features are implemented by adding configuration (props, flags, conditional logic) to existing components, if requirements change, then those components must be repeatedly modified, increasing coupling, surface area, and regression risk. Composition ensures features scale horizontally, limits the scope of changes, and prevents components from becoming configuration-driven "mega components".
850
+
851
+
Good (composition):
852
+
853
+
- Features expressed as composable children
854
+
- Parent stays stable; add features by adding children
855
+
856
+
```tsx
857
+
<Tabledata={items}columns={columns}>
858
+
<Table.SearchBar />
859
+
<Table.Header />
860
+
<Table.Body />
861
+
</Table>
862
+
```
863
+
864
+
```tsx
865
+
<SelectionListdata={items}>
866
+
<SelectionList.TextInput />
867
+
<SelectionList.Body />
868
+
</SelectionList>
869
+
```
870
+
871
+
Bad (configuration):
872
+
873
+
- Features controlled by boolean flags
874
+
- Adding a new feature requires modifying the Table component's API
875
+
876
+
```tsx
877
+
<Table
878
+
data={items}
879
+
columns={columns}
880
+
shouldShowSearchBar
881
+
shouldShowHeader
882
+
shouldEnableSorting
883
+
shouldShowPagination
884
+
shouldHighlightOnHover
885
+
/>
886
+
887
+
typeTableProps= {
888
+
data:Item[];
889
+
columns:Column[];
890
+
shouldShowSearchBar?:boolean; // ❌ Could be <Table.SearchBar />
891
+
shouldShowHeader?:boolean; // ❌ Could be <Table.Header />
892
+
shouldEnableSorting?:boolean; // ❌ Configuration for header behavior
893
+
shouldShowPagination?:boolean; // ❌ Could be <Table.Pagination />
894
+
shouldHighlightOnHover?:boolean; // ❌ Configuration for styling behavior
895
+
};
896
+
```
897
+
898
+
```tsx
899
+
<SelectionList
900
+
data={items}
901
+
shouldShowTextInput
902
+
shouldShowTooltips
903
+
shouldScrollToFocusedIndex
904
+
shouldDebounceScrolling
905
+
shouldUpdateFocusedIndex
906
+
canSelectMultiple
907
+
disableKeyboardShortcuts
908
+
/>
909
+
910
+
typeSelectionListProps= {
911
+
shouldShowTextInput?:boolean; // ❌ Could be <SelectionList.TextInput />
912
+
shouldShowConfirmButton?:boolean; // ❌ Could be <SelectionList.ConfirmButton />
913
+
textInputOptions?: {...}; // ❌ Configuration object for the above
914
+
};
915
+
```
916
+
917
+
Good (children manage their own state):
918
+
919
+
```tsx
920
+
// Children are self-contained and manage their own state
921
+
// Parent only passes minimal data (IDs)
922
+
// Adding new features doesn't require changing the parent
923
+
function ReportScreen({ params: { reportID }}) {
924
+
return (
925
+
<>
926
+
<ReportActionsViewreportID={reportID} />
927
+
// other features
928
+
<Composer />
929
+
</>
930
+
);
931
+
}
932
+
933
+
// Component accesses stores and calculates its own state
0 commit comments