---
title: Avoid Inline Objects in JSX
impact: MEDIUM
impactDescription: prevents unnecessary child re-renders from new references
tags: rerender, memo, optimization, custom
---

# Avoid Inline Objects in JSX

Inline objects create a new reference every render, causing child re-renders.

```tsx
// BAD: new reference every render
<Component style={{ padding: 16 }} />
<Component data={{ id: 1, name: 'Test' }} />

// GOOD: stable reference
const style = { padding: 16 }
const data = useMemo(() => ({ id: 1, name: 'Test' }), [])
<Component style={style} />
<Component data={data} />

// BEST: Tailwind
<Component className="p-4" />
```