---
title: "Rule Catalog — Performance"
description: "IsUrgent: True Category: Performance"
type: skill
canonical_url: https://claudary.paisolsolutions.com/skills/performance-8
source: "Claudary"
difficulty: intermediate
author: "Claude Code Knowledge Pack"
date: 2026-07-10T11:31:55.131Z
license: CC-BY-4.0
attribution: "Rule Catalog — Performance — Claudary (https://claudary.paisolsolutions.com/skills/performance-8)"
---

# Rule Catalog — Performance
IsUrgent: True Category: Performance

## Overview

# Rule Catalog — Performance

## React Flow data usage

IsUrgent: True
Category: Performance

### Description

When 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.

## Complex prop memoization

IsUrgent: True
Category: Performance

### Description

Wrap complex prop values (objects, arrays, maps) in `useMemo` prior to passing them into child components to guarantee stable references and prevent unnecessary renders.

Update this file when adding, editing, or removing Performance rules so the catalog remains accurate.

Wrong:

```tsx
<HeavyComp
    config={{
        provider: ...,
        detail: ...
    }}
/>
```

Right:

```tsx
const config = useMemo(() => ({
    provider: ...,
    detail: ...
}), [provider, detail]);

<HeavyComp
    config={config}
/>
```

---

Source: [Claudary](https://claudary.paisolsolutions.com/skills/performance-8) · https://claudary.paisolsolutions.com