mirror of
https://github.com/kennethnym/aris.git
synced 2026-02-02 13:11:17 +00:00
30 lines
728 B
Markdown
30 lines
728 B
Markdown
|
---
|
||
|
|
title: Subscribe to Derived State
|
||
|
|
impact: MEDIUM
|
||
|
|
impactDescription: reduces re-render frequency
|
||
|
|
tags: rerender, derived-state, media-query, optimization
|
||
|
|
---
|
||
|
|
|
||
|
|
## Subscribe to Derived State
|
||
|
|
|
||
|
|
Subscribe to derived boolean state instead of continuous values to reduce re-render frequency.
|
||
|
|
|
||
|
|
**Incorrect (re-renders on every pixel change):**
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
function Sidebar() {
|
||
|
|
const width = useWindowWidth() // updates continuously
|
||
|
|
const isMobile = width < 768
|
||
|
|
return <nav className={isMobile ? 'mobile' : 'desktop'} />
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
**Correct (re-renders only when boolean changes):**
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
function Sidebar() {
|
||
|
|
const isMobile = useMediaQuery('(max-width: 767px)')
|
||
|
|
return <nav className={isMobile ? 'mobile' : 'desktop'} />
|
||
|
|
}
|
||
|
|
```
|