1# Rule Catalog — Performance
2 
3## React Flow data usage
4 
5IsUrgent: True
6Category: Performance
7 
8### Description
9 
10When rendering React Flow, prefer `useNodes`/`useEdges` for UI consumption and rely on `useStoreApi` inside callbacks that mutate or read node/edge state. Avoid manually pulling Flow data outside of these hooks.
11 
12## Complex prop stability
13 
14IsUrgent: False
15Category: Performance
16 
17### Description
18 
19Only require stable object, array, or map props when there is a clear reason: the child is memoized, the value participates in effect/query dependencies, the value is part of a stable-reference API contract, or profiling/local behavior shows avoidable re-renders. Do not request `useMemo` for every inline object by default; `how-to-write-component` treats memoization as a targeted optimization.
20 
21Update this file when adding, editing, or removing Performance rules so the catalog remains accurate.
22 
23Risky:
24 
25```tsx
26<HeavyComp
27    config={{
28        provider: ...,
29        detail: ...
30    }}
31/>
32```
33 
34Better when stable identity matters:
35 
36```tsx
37const config = useMemo(() => ({
38    provider: ...,
39    detail: ...
40}), [provider, detail]);
41 
42<HeavyComp
43    config={config}
44/>
45```
46