d9bcdc4a8d
Skills included: - pr-reviewer: Adapted for Gitea/GitHub via platform-aware scripts (dropped fetch_pr_data.py and add_inline_comment.py, kept generate_review_files.py) - code-review-excellence: Methodology and checklists (React, TS, Python, etc.) - vercel-react-best-practices: 57 rules for React/Next.js performance - tailwind-design-system: Tailwind CSS v4 patterns, CVA, design tokens New shell scripts added to ~/.claude/scripts/git/: - pr-diff.sh: Get PR diff (GitHub gh / Gitea API) - pr-metadata.sh: Get PR metadata as normalized JSON Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
41 lines
1.2 KiB
Markdown
41 lines
1.2 KiB
Markdown
---
|
|
title: Calculate Derived State During Rendering
|
|
impact: MEDIUM
|
|
impactDescription: avoids redundant renders and state drift
|
|
tags: rerender, derived-state, useEffect, state
|
|
---
|
|
|
|
## Calculate Derived State During Rendering
|
|
|
|
If a value can be computed from current props/state, do not store it in state or update it in an effect. Derive it during render to avoid extra renders and state drift. Do not set state in effects solely in response to prop changes; prefer derived values or keyed resets instead.
|
|
|
|
**Incorrect (redundant state and effect):**
|
|
|
|
```tsx
|
|
function Form() {
|
|
const [firstName, setFirstName] = useState('First')
|
|
const [lastName, setLastName] = useState('Last')
|
|
const [fullName, setFullName] = useState('')
|
|
|
|
useEffect(() => {
|
|
setFullName(firstName + ' ' + lastName)
|
|
}, [firstName, lastName])
|
|
|
|
return <p>{fullName}</p>
|
|
}
|
|
```
|
|
|
|
**Correct (derive during render):**
|
|
|
|
```tsx
|
|
function Form() {
|
|
const [firstName, setFirstName] = useState('First')
|
|
const [lastName, setLastName] = useState('Last')
|
|
const fullName = firstName + ' ' + lastName
|
|
|
|
return <p>{fullName}</p>
|
|
}
|
|
```
|
|
|
|
References: [You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect)
|