"Cannot update a component while rendering."
Three fixes, one root cause.

import { useState } from 'react';

// ─── BAD: derived state in useState ──────────
function BadFullName() {
const [first, setFirst] = useState('Alice');
const [last, setLast] = useState('Smith');
const [full, setFull] = useState(first + ' ' + last); // ⚠️ derived

// ❌ Calling setState during render
setFull(first + ' ' + last);
// ⚠️ Warning: Cannot update a component while rendering

return 
{full}
;
}

// ─── GOOD: compute during render ────────────
function GoodFullName() {
const [first, setFirst] = useState('Alice');
const [last, setLast] = useState('Smith');

// ✅ Computed every render — always correct, no state
const full = first + ' ' + last;

return (

 setFirst(e.target.value)} />
 setLast(e.target.value)} />
{full}

);
}

// ─── GOOD: useMemo for expensive derivations ─
function ExpensiveDerived({ items }: { items: number[] }) {
// Only recompute when items changes
const total = useMemo(
() => items.reduce((sum, n) => sum + n, 0),
[items]
);
return 
Total: {total}
;
}

// ─── Rule ────────────────────────────────────
//
// If X can be computed from props or other state:
// const X = compute(props, otherState);
//
// If that computation is expensive:
// const X = useMemo(() => compute(props), [props]);
//
// Never:
// const [X, setX] = useState(...);
// setX(...) // in render — warning
// useEffect(() => setX(...), [props]); // extra render, still wrong

console.log(BadFullName, GoodFullName, ExpensiveDerived);

import { useState, useEffect } from 'react';

interface User {
id: string;
name: string;
email: string;
}

// ─── BAD: setting state during render ────────
function BadUserDisplay({ userId }: { userId: string }) {
const [user, setUser] = useStatenull>(null);

// ❌ Called during render
if (userId !== user?.id) {
setUser(fetchUserSync(userId));
}

return 
{user?.name ?? 'Loading...'}
;
}

// ─── GOOD: use useEffect for external data ───
function GoodUserDisplay({ userId }: { userId: string }) {
const [user, setUser] = useStatenull>(null);

useEffect(() => {
let cancelled = false;

fetch(/api/users/${userId}`)
.then(r => r.json())
.then(data => {
if (!cancelled) setUser(data);
});

return () => { cancelled = true; };
}, [userId]);

return 
{user?.name ?? 'Loading...'}
;
}

// ─── GOOD: set state in an event handler ─────
function Counter() {
const [count, setCount] = useState(0);

// ✅ User clicks the button → setCount runs in the event
function handleClick() {
setCount(c => c + 1);
}

return (

Count: {count}

);
}

// ─── GOOD: use a key to remount instead of syncing
// If a component should reset its internal state when props
// change, use key — it forces a fresh mount.

function UserForm({ userId }: { userId: string }) {
const [draft, setDraft] = useState('');

return (

 setDraft(e.target.value)} />

);
}

function App({ userId }: { userId: string }) {
// When userId changes, UserForm remounts with fresh state
return ;
}

function fetchUserSync(id: string): User {
return { id, name: 'Alice', email: 'a@x.com' };
}

console.log(BadUserDisplay, GoodUserDisplay, Counter, UserForm, App);

import { useState } from 'react';

// ─── BAD: child calls parent setState during render
function BadChild({ onMount }: { onMount: () => void }) {
// ❌ Called during render, before BadChild finishes
onMount();
return 
Child
;
}

function BadParent() {
const [mounted, setMounted] = useState(false);

return (

 setMounted(true)} />
{/* ⚠️ Cannot update a component while rendering */}
{mounted ? 'mounted' : 'mounting'}

);
}

// ─── GOOD: use useEffect in the child ────────
function GoodChild({ onMount }: { onMount: () => void }) {
useEffect(() => {
// ✅ Runs after the child has mounted and rendered
onMount();
}, []);

return 
Child
;
}

function GoodParent() {
const [mounted, setMounted] = useState(false);

return (

 setMounted(true)} />
{mounted ? 'mounted' : 'mounting'}

);
}

// ─── ALTERNATIVE: lift state up ──────────────
// If the parent needs to know something about the child,
// the parent usually owns the state. Pass it down as props.

function LiftedChild({ isActive }: { isActive: boolean }) {
return 
{isActive ? 'Active' : 'Inactive'}
;
}

function LiftedParent() {
const [isActive, setIsActive] = useState(false);

return (


 setIsActive(true)}>Activate

);
}

// ─── The rules ───────────────────────────────
//
// 1. Child never calls parent's setState during render.
// 2. If a child needs to communicate something,
// it's usually a callback called from an event,
// effect, or a lifted state that lives in the parent.
// 3. If you want the parent to "know" something,
// the parent probably owns that state.

import { useEffect } from 'react';

console.log(BadParent, GoodParent, LiftedParent);