3ac66feba2
gitignore 의 *.md / .claude/ 차단을 풀어 다음 파일을 git 으로 추적. - /CLAUDE.md, /AGENTS.md (루트 에이전트 가이드) - .agents/**/*.md (skills 문서 95개) - .claude/settings.json (Claude Code 프로젝트 설정) .claude/worktrees/ 는 git worktree 메타이므로 신규 ignore 라인으로 제외. Co-Authored-By: Claude Opus 4.7 (1M context) <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)
|