You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-**Condition**: Flag when useEffect updates state based on props or other state, when the value could be computed directly
254
+
255
+
-**Reasoning**: Computing derived values directly in the component body ensures they're always synchronized with props/state and avoids unnecessary re-renders.
// 🔴 Avoid: redundant state and unnecessary Effect
277
+
const [fullName, setFullName] =useState('');
278
+
useEffect(() => {
279
+
setFullName(firstName+''+lastName);
280
+
}, [firstName, lastName]);
281
+
}
282
+
```
283
+
284
+
---
285
+
286
+
### [PERF-7] Control component resets via key prop
287
+
288
+
-**Condition**:
289
+
- Flag when useEffect resets all or most component state when a prop changes
290
+
- Should use `key` prop instead to reset the entire component
291
+
292
+
-**Reasoning**: Using `key` prop for full resets is more React-idiomatic. When a prop changes and you need to reset all component state, the `key` prop causes React to unmount and remount the component, automatically resetting all state without needing useEffect.
// Component resets when userId changes due to key prop
305
+
}
306
+
```
307
+
308
+
Bad:
309
+
310
+
```tsx
311
+
// 🔴 Avoid: resetting all state with useEffect
312
+
function ProfilePage({ userId }) {
313
+
return <ProfileViewuserId={userId} />;
314
+
}
315
+
316
+
function ProfileView({ userId }) {
317
+
const [comment, setComment] =useState('');
318
+
const [rating, setRating] =useState(0);
319
+
320
+
useEffect(() => {
321
+
setComment(''); // Reset when userId changes
322
+
setRating(0);
323
+
}, [userId]);
324
+
}
325
+
```
326
+
327
+
---
328
+
329
+
### [PERF-8] Handle events in event handlers
330
+
331
+
-**Condition**: Flag when useEffect responds to user events that should be handled in event handlers
332
+
333
+
-**Reasoning**: Event handlers provide immediate response and clearer code flow. useEffect adds unnecessary render cycles and makes the relationship between user action and response less clear.
-**Condition**: Flag when multiple useEffects form a chain where one effect's state update triggers another effect
372
+
373
+
-**Reasoning**: Chains of effects create complex dependencies, timing issues, and unnecessary renders. Logic should be restructured to avoid interdependent effects.
### [PERF-10] Communicate with parent components without useEffect
419
+
420
+
-**Condition**: Flag when useEffect calls parent callbacks to communicate state changes or pass data to parent components
421
+
422
+
-**Reasoning**: Parent-child communication should not use useEffect. Instead, lift the state up to the parent component and pass it down as props. This follows React's unidirectional data flow pattern, eliminates synchronization issues, reduces unnecessary renders, and makes the data flow clearer. Use useEffect only when synchronizing with external systems, not for parent-child communication.
0 commit comments