// ── What you WRITE ──
const el = (
  <button className="btn" onClick={handleClick}>
    <span>Click me</span>
  </button>
);

// ── What Babel COMPILES it to (React 17+ new transform) ──
import { jsx as _jsx } from 'react/jsx-runtime';

const el = _jsx('button', {
  className: 'btn',
  onClick: handleClick,
  children: _jsx('span', { children: 'Click me' })
});

// ── Old transform (React <17, still works) ──
const el = React.createElement(
  'button',
  { className: 'btn', onClick: handleClick },
  React.createElement('span', null, 'Click me')
);

{
  $$typeof: Symbol(react.element),  // XSS protection marker
  type:     'button',               // string for DOM, function for component
  key:      null,
  ref:      null,
  props:    { className: 'btn', children: ... }
}

// ✅ Valid inside { }
<p>{name}</p>                     // variable
<p>{2 + 2}</p>                   // expression
<p>{items.length}</p>             // property access
<p>{isLoggedIn ? 'Hi' : 'Login'}</p> // ternary
<p>{formatDate(date)}</p>          // function call

// ❌ NOT valid inside { } — these are statements, not expressions
<p>{if (x) ...}</p>              // if statement ❌
<p>{for (...) ...}</p>            // for loop ❌

// Comments inside JSX
<div>
  {/* This is a JSX comment */}
  <p>Content</p>
</div>

// Lowercase → React treats it as a DOM string tag
<button>click</button>
// compiles to: React.createElement('button', ...)

// Uppercase → React treats it as a component reference
<Button>click</Button>
// compiles to: React.createElement(Button, ...)
// React calls Button() to get the elements it returns

// ⚠ This is why this BREAKS:
function myButton() { return <button />; }
const el = <myButton />;  // treated as unknown DOM tag, not a component!

// ✅ Fix: capital letter, OR assign to capital-letter variable
const MyButton = myButton;
const el = <MyButton />;  // ✅ now recognized as component

// CLASS: always reads the LATEST value via this
handleClick() {
  setTimeout(() => {
    alert(this.state.count); // shows current count at time of alert
  }, 3000);
}

// FUNCTIONAL: closes over the value at render time
function Counter() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setTimeout(() => {
      alert(count); // shows count at the time button was clicked, not 3s later
    }, 3000);
  };
}

// ── Passing props ──
<UserCard
  name="Yogesh"
  age={28}
  isAdmin={true}
  onClick={handleClick}
/>

// ── Receiving props (object destructure) ──
function UserCard({ name, age, isAdmin, onClick }) {
  return (
    <div onClick={onClick}>
      <h2>{name}</h2>
      {isAdmin && <span>Admin</span>}
    </div>
  );
}

// ── Default props via destructuring ──
function Button({ label = 'Submit', variant = 'primary' }) { ... }

// ── Spread props (use sparingly) ──
const props = { type: 'button', disabled: false };
<button {...props}>Go</button>

// Parent uses children
<Card>
  <h3>Title</h3>
  <p>Body text</p>
</Card>

// Card component renders whatever is passed
function Card({ children }) {
  return <div className="card">{children}</div>;
}

// children can also be a function (render prop)
<DataProvider>
  {(data) => <Table rows={data} />}
</DataProvider>

// ── Pattern 1: children (slot) ──
function Dialog({ title, children }) {
  return (
    <div className="dialog">
      <h1>{title}</h1>
      {children}
    </div>
  );
}
<Dialog title="Welcome">
  <p>Any content here</p>
</Dialog>

// ── Pattern 2: named slots (multiple prop slots) ──
function Layout({ sidebar, main, footer }) {
  return (
    <div className="layout">
      <aside>{sidebar}</aside>
      <main>{main}</main>
      <footer>{footer}</footer>
    </div>
  );
}
<Layout
  sidebar={<Nav />}
  main={<Feed />}
  footer={<Footer />}
/>

// ── Pattern 3: specialization (compose general into specific) ──
function WelcomeDialog() {
  return (
    <Dialog title="Welcome!">
      <p>Thanks for visiting.</p>
    </Dialog>
  );
}

// ── 1. if/else (outside JSX) — best for complex conditions ──
function Page({ isLoading, data }) {
  if (isLoading) return <Spinner />;
  if (!data)    return <Empty />;
  return <DataView data={data} />;
}

// ── 2. Ternary — best for 2-branch inline choices ──
return (
  <div>
    {isLoggedIn ? <UserMenu /> : <LoginBtn />}
  </div>
);

// ── 3. Short-circuit && — best for "show or nothing" ──
return (
  <div>
    {hasError && <ErrorBanner msg={error} />}
    {items.length > 0 && <List items={items} />} // ✅ guard with > 0
  </div>
);

// ── 4. Return null — unmount / hide completely ──
function Tooltip({ visible, text }) {
  if (!visible) return null; // component is called but renders nothing
  return <div className="tooltip">{text}</div>;
}

// ✅ GOOD: stable, unique, from your data
{users.map(user => (
  <UserRow key={user.id} user={user} />
))}

// ⚠ ACCEPTABLE: index only if list is static, never reordered, never filtered
{staticTabs.map((tab, i) => (
  <Tab key={i} label={tab.label} />
))}

// ❌ BAD: random keys — new key every render = unnecessary remounts
{items.map(item => (
  <Item key={Math.random()} item={item} />
))}

// ❌ BAD: index on a mutable list
// Add item to front → every item's key shifts → all remount, input state lost
{todos.map((todo, i) => (
  <TodoItem key={i} /> // ❌ if todos can be prepended/deleted
))}

// Initial list: [{id:1, name:'Alice'}, {id:2, name:'Bob'}]
// Keys:  key=0 → Alice,  key=1 → Bob

// User types in Alice's input (local state inside TodoItem)
// We prepend {id:3, name:'Charlie'}

// New keys: key=0 → Charlie, key=1 → Alice, key=2 → Bob
// React reuses the key=0 DOM node — input now shows Alice's typed text
// but the label says "Charlie" 💥

// Full syntax — supports key prop (needed in lists)
{items.map(item => (
  <React.Fragment key={item.id}>
    <dt>{item.term}</dt>
    <dd>{item.def}</dd>
  </React.Fragment>
))}

// Shorthand syntax — no key support, but cleaner
function Columns() {
  return (
    <>
      <td>Name</td>
      <td>Age</td>
    </>
  );
}

import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    <div className="modal-overlay">{children}</div>,
    document.getElementById('modal-root') // DOM node outside React root
  );
}

// Portal still behaves like a normal React child:
// - events bubble through React tree (not DOM tree)
// - context works as normal
// - unmounts when parent unmounts

// Wrap your entire app (or part of it)
createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// What StrictMode does in development:
// ✅ Renders components twice — surfaces impure renders
// ✅ Runs effects twice (mount → unmount → remount) — surfaces missing cleanup
// ✅ Warns about deprecated findDOMNode, legacy context API, string refs
// ✅ No effect in production builds

const [count, setCount] = useState(0);
//     ↑ current value   ↑ setter function   ↑ initial value (only used on first render)

// The setter does NOT mutate count — it schedules a new render
function handleClick() {
  setCount(5);
  console.log(count); // still 0 — this render's snapshot is frozen
}

// ✅ To use the new value, use the updater function form
setCount(prev => prev + 1); // always based on latest queued state

// ── Why updater form matters ──
function increment3Times() {
  setCount(count + 1); // ❌ all 3 calls read the same stale count
  setCount(count + 1); // ❌ result: count + 1, not count + 3
  setCount(count + 1); // ❌

  setCount(c => c + 1); // ✅ updater queued: prev → prev+1
  setCount(c => c + 1); // ✅ chains on previous result
  setCount(c => c + 1); // ✅ result: count + 3
}

// ── React 17 and earlier ──
// Batched ONLY inside React event handlers:
handleClick() {
  setCount(c => c + 1);  // } batched → 1 render
  setFlag(true);         // }
}

// NOT batched — setTimeout, Promises, native event listeners in React 17:
setTimeout(() => {
  setCount(c => c + 1);  // render 1
  setFlag(true);         // render 2  ← two separate renders!
}, 1000);

// ── React 18 — Automatic Batching everywhere ──
setTimeout(() => {
  setCount(c => c + 1);  // } batched → 1 render ✅
  setFlag(true);         // }
}, 1000);

// Opt out of batching in React 18 (rare):
import { flushSync } from 'react-dom';

flushSync(() => setCount(c => c + 1)); // forces render immediately
flushSync(() => setFlag(true));          // then another render

// ── Objects ──
const [user, setUser] = useState({ name: 'Yogesh', age: 28 });

// ❌ Mutating — React won't re-render
user.age = 29;
setUser(user); // same reference!

// ✅ Spread to create new object
setUser({ ...user, age: 29 });

// ── Arrays ──
const [items, setItems] = useState(['a', 'b', 'c']);

// ❌ Mutating methods — avoid in state updates
items.push('d');   // mutates!
items.splice(1,1); // mutates!

// ✅ Non-mutating equivalents
setItems([...items, 'd']);               // add
setItems(items.filter(i => i !== 'b'));   // remove
setItems(items.map(i => i === 'b' ? 'B' : i)); // update
setItems([...items].sort());             // sort (spread first!)

// ── Nested objects — spread each level ──
const [profile, setProfile] = useState({
  name: 'Yogesh',
  address: { city: 'Mumbai', pin: '400001' }
});

setProfile({
  ...profile,
  address: { ...profile.address, city: 'Pune' }
});

// ── Form 1: No dependency array — runs after EVERY render ──
useEffect(() => {
  console.log('Runs after every render');
});
// Use: rare. Logging, measurements that must run on every update.

// ── Form 2: Empty array [] — runs once on mount only ──
useEffect(() => {
  fetchData();
  const sub = subscribe();
  return () => sub.unsubscribe(); // cleanup on unmount
}, []);
// Use: initial data fetch, setting up subscriptions, one-time setup.

// ── Form 3: Dependency array — runs when deps change ──
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]); // only re-runs when count changes
// Use: syncing state to an external system, reacting to prop/state changes.

// ⚠ Object/array deps created inline re-trigger every render!
useEffect(() => {
  fetchUser(options);
}, [{ id: userId }]); // ❌ new object every render → infinite loop risk

// ✅ Use primitive values, or useMemo/useCallback to stabilise
useEffect(() => {
  fetchUser({ id: userId });
}, [userId]); // ✅ primitive dep

// ── 1. AbortController — cancel in-flight fetch ──
useEffect(() => {
  const controller = new AbortController();
  fetch(`/api/user/${userId}`, { signal: controller.signal })
    .then(r => r.json())
    .then(setUser)
    .catch(e => { if (e.name !== 'AbortError') setError(e); });
  return () => controller.abort(); // cancel if userId changes or unmounts
}, [userId]);

// ── 2. Event listener ──
useEffect(() => {
  const handleResize = () => setWidth(window.innerWidth);
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

// ── 3. setInterval ──
useEffect(() => {
  const id = setInterval(() => setTime(Date.now()), 1000);
  return () => clearInterval(id);
}, []);

// ── 4. WebSocket / subscription ──
useEffect(() => {
  const ws = new WebSocket(`ws://chat/${roomId}`);
  ws.onmessage = e => setMessages(m => [...m, e.data]);
  return () => ws.close();
}, [roomId]);

// ❌ setState inside effect with no deps (or state in deps)
useEffect(() => {
  setData(fetchSomething()); // setData → re-render → effect runs → setData → ∞
}); // no dep array!

// ❌ Object dep created inside render
const options = { page: 1 }; // new reference every render
useEffect(() => { fetch(options); }, [options]); // always "changed" → loop

// ✅ Fix: stabilise or use primitives
const page = 1;
useEffect(() => { fetch({ page }); }, [page]); // primitive dep

// ❌ count is frozen at 0 in this closure
useEffect(() => {
  const id = setInterval(() => {
    setCount(count + 1); // always reads count=0, increments to 1 forever
  }, 1000);
  return () => clearInterval(id);
}, []); // empty deps — effect never re-runs, count never updates

// ✅ Fix 1: use updater function (no need to read count)
setCount(c => c + 1); // always gets latest value from React

// ✅ Fix 2: add count to deps (re-creates interval on each change)
useEffect(() => {
  const id = setInterval(() => setCount(count + 1), 1000);
  return () => clearInterval(id);
}, [count]);

// ❌ Suppressing the ESLint warning hides real bugs
useEffect(() => {
  doSomething(value);
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); // value is stale — this is a bug, not a fix

// ✅ Proper fix options:
// 1. Add missing dep
}, [value]);

// 2. Move the dep inside the effect (so it's not a dependency)
useEffect(() => {
  const latest = getLatestValue(); // read inside effect, not from closure
  doSomething(latest);
}, []);

// 3. Use useRef to store a mutable value without triggering re-runs
const valueRef = useRef(value);
useEffect(() => { valueRef.current = value; }); // keep ref in sync
useEffect(() => {
  doSomething(valueRef.current); // reads latest without being a dep
}, []);

// ⚠ Always guard with a condition — or you'll get an infinite loop
componentDidUpdate(prevProps) {
  if (this.props.userId !== prevProps.userId) {
    this.fetchUser(this.props.userId);
  }
}
// Without the guard: setState → componentDidUpdate → setState → ∞

// ── Class component ──
componentDidMount() {
  this.fetch(this.props.id);
}
componentDidUpdate(prev) {
  if (prev.id !== this.props.id) this.fetch(this.props.id);
}
componentWillUnmount() {
  this.controller.abort();
}

// ── Functional component — same logic, less code ──
useEffect(() => {
  const controller = new AbortController();
  fetch(`/api/${id}`, { signal: controller.signal })
    .then(r => r.json())
    .then(setData);
  return () => controller.abort();
}, [id]); // runs on mount AND whenever id changes — covers both CDM and CDU

// ❌ Expensive computation runs on EVERY render (result is discarded after mount)
const [state, setState] = useState(parseHeavyJSON(rawData)); // called every render!
const [items, setItems] = useState(JSON.parse(localStorage.getItem('cart') || '[]'));

// ✅ Pass a FUNCTION — React calls it only on first render
const [state, setState] = useState(() => parseHeavyJSON(rawData));
const [items, setItems] = useState(() => {
  const saved = localStorage.getItem('cart');
  return saved ? JSON.parse(saved) : [];
});

// Same pattern for useReducer
const [state, dispatch] = useReducer(reducer, undefined, initFromStorage);
// initFromStorage() called once; result becomes initial state

// ❌ Anti-pattern: syncing prop → state via useEffect
function SearchBox({ query }) {
  const [value, setValue] = useState(query);

  useEffect(() => {
    setValue(query); // "sync" query to value
  }, [query]);
  // Problem: one render with stale value, then another with correct value → flash
  // Also: loses user's in-progress typing whenever parent re-renders
}

// ✅ If value is always derived from query — no state needed at all
function SearchBox({ query }) {
  const upperQuery = query.toUpperCase(); // computed during render — always in sync
  return <p>{upperQuery}</p>;
}

// ✅ Expensive derived value — useMemo (not useEffect)
function FilteredList({ items, filter }) {
  const filtered = useMemo(
    () => items.filter(i => i.includes(filter)),
    [items, filter]
  );
  return <List items={filtered} />;
}

// ✅ When you DO need editable state seeded from a prop:
// Use the lazy initializer — initialise once, user can then edit independently
function EditableField({ initialValue }) {
  const [value, setValue] = useState(initialValue); // seed once, then own it
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

function Form() {
  const handleSubmit = (e) => {
    e.preventDefault();         // stops browser page reload
    console.log(e.type);        // "submit"
    console.log(e.target);       // the <form> DOM node
    console.log(e.nativeEvent);  // the real browser event
  };

  const handleChange = (e) => {
    console.log(e.target.value);  // typed value
    console.log(e.target.name);   // input name attribute
    console.log(e.target.checked); // for checkboxes
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" onChange={handleChange} />
    </form>
  );
}

// Bubbling — inner click fires child handler, then parent handler
<div onClick={() => console.log('parent')}>
  <button onClick={() => console.log('child')}>Click</button>
</div>
// Logs: "child" → "parent"

// Stop bubbling — prevent parent from firing
<button onClick={(e) => {
  e.stopPropagation();
  handleDelete();
}}>Delete</button>

// Capture phase — fires top-down, before bubbling
<div onClickCapture={() => console.log('captured first')}>
  <button onClick={() => console.log('bubble')}>Click</button>
</div>
// Logs: "captured first" → "bubble"

// Common pattern: close dropdown when clicking outside
useEffect(() => {
  const close = (e) => {
    if (!ref.current.contains(e.target)) setOpen(false);
  };
  document.addEventListener('mousedown', close);
  return () => document.removeEventListener('mousedown', close);
}, []);

// ── Pattern 1: Inline arrow function (simplest) ──
<button onClick={() => deleteUser(user.id)}>Delete</button>
// ⚠ Creates a new function reference every render — can break React.memo

// ── Pattern 2: data attribute (avoids new function per item) ──
<button
  data-id={user.id}
  onClick={handleDelete}  // same reference every render
>Delete</button>

const handleDelete = (e) => {
  const id = e.currentTarget.dataset.id;
  deleteUser(id);
};

// ── Pattern 3: useCallback for memoised handler ──
const handleDelete = useCallback((id) => {
  deleteUser(id);
}, []); // stable reference

{users.map(u => (
  <UserRow
    key={u.id}
    user={u}
    onDelete={handleDelete}  // stable — UserRow wrapped in React.memo won't re-render
  />
))}

// ── Pattern 4: curried handler factory ──
const handleDelete = (id) => (e) => {
  e.stopPropagation();
  deleteUser(id);
};
<button onClick={handleDelete(user.id)}>Delete</button>

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}            // React controls the value
        onChange={e => setEmail(e.target.value)}
      />

      // ✅ Powered by: validate on every keystroke
      // ✅ Powered by: disable submit until valid
      <button disabled={!email || !password}>Login</button>
    </form>
  );
}

// ⚠ Gotcha: value without onChange = read-only input (React warns)
<input value="fixed" />           // read-only — user can't type
<input defaultValue="initial" />  // uncontrolled with initial value

function UploadForm() {
  const fileRef = useRef(null);
  const nameRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    const name = nameRef.current.value;  // read on submit
    const file = fileRef.current.files[0]; // file input MUST be uncontrolled
    upload({ name, file });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input ref={nameRef} defaultValue="" />
      <input type="file" ref={fileRef} />  // file inputs CANNOT be controlled
      <button>Upload</button>
    </form>
  );
}

function AllInputs() {
  const [form, setForm] = useState({
    name:     '',
    agree:    false,
    gender:   '',
    country:  'in',
    bio:      '',
    skills:   [],     // multiple checkboxes
  });

  // Universal handler — reads name + type to handle all inputs
  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setForm(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }));
  };

  // Multi-checkbox handler (array of selected values)
  const handleSkill = (e) => {
    const { value, checked } = e.target;
    setForm(prev => ({
      ...prev,
      skills: checked
        ? [...prev.skills, value]
        : prev.skills.filter(s => s !== value)
    }));
  };

  return (
    <form>
      {/* Text input */}
      <input type="text" name="name"
        value={form.name} onChange={handleChange} />

      {/* Single checkbox — reads checked, not value */}
      <input type="checkbox" name="agree"
        checked={form.agree} onChange={handleChange} />

      {/* Radio buttons — each has same name, different value */}
      <input type="radio" name="gender" value="male"
        checked={form.gender === 'male'} onChange={handleChange} />
      <input type="radio" name="gender" value="female"
        checked={form.gender === 'female'} onChange={handleChange} />

      {/* Select — uses value prop, not selected attribute */}
      <select name="country" value={form.country} onChange={handleChange}>
        <option value="in">India</option>
        <option value="us">USA</option>
      </select>

      {/* Textarea — uses value prop, NOT children */}
      <textarea name="bio"
        value={form.bio} onChange={handleChange} />

      {/* Multi-checkbox (array state) */}
      {['React', 'Node', 'CSS'].map(skill => (
        <label key={skill}>
          <input type="checkbox" value={skill}
            checked={form.skills.includes(skill)}
            onChange={handleSkill} />
          {skill}
        </label>
      ))}
    </form>
  );
}

function SignupForm() {
  const [fields, setFields] = useState({ email: '', password: '' });
  const [errors, setErrors]   = useState({});
  const [touched, setTouched] = useState({});

  // ── Validate function (pure) ──
  const validate = ({ email, password }) => {
    const e = {};
    if (!email)                          e.email    = 'Required';
    else if (!email.includes('@'))       e.email    = 'Invalid email';
    if (!password)                       e.password = 'Required';
    else if (password.length < 8)      e.password = 'Min 8 chars';
    return e;
  };

  // ── Strategy 1: Real-time (onChange) ──
  const handleChange = (e) => {
    const next = { ...fields, [e.target.name]: e.target.value };
    setFields(next);
    setErrors(validate(next)); // validate every keystroke
  };

  // ── Strategy 2: On-blur (show error only after user leaves the field) ──
  const handleBlur = (e) => {
    setTouched(t => ({ ...t, [e.target.name]: true }));
    setErrors(validate(fields));
  };

  // ── Strategy 3: On-submit only ──
  const handleSubmit = (e) => {
    e.preventDefault();
    const errs = validate(fields);
    if (Object.keys(errs).length) {
      setErrors(errs);
      setTouched({ email: true, password: true }); // show all errors
      return;
    }
    submitToApi(fields);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" value={fields.email}
        onChange={handleChange} onBlur={handleBlur} />
      {/* Show error only after field was touched */}
      {touched.email && errors.email &&
        <p className="error">{errors.email}</p>}
      <button disabled={Object.keys(validate(fields)).length > 0}>
        Submit
      </button>
    </form>
  );
}

// ── Approach 1: useEffect + setTimeout (no library) ──
function SearchBox() {
  const [input, setInput]     = useState(''); // updates on every keystroke
  const [query, setQuery]     = useState(''); // debounced value sent to API

  useEffect(() => {
    const timer = setTimeout(() => setQuery(input), 400);
    return () => clearTimeout(timer); // cancel if input changes before 400ms
  }, [input]);

  useEffect(() => {
    if (query) searchAPI(query); // only fires when user stops typing
  }, [query]);

  return <input value={input} onChange={e => setInput(e.target.value)} />;
}

// ── Approach 2: Custom useDebounce hook (reusable) ──
function useDebounce(value, delay = 400) {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);
  return debounced;
}

// Usage:
const debouncedSearch = useDebounce(input, 400);
useEffect(() => {
  if (debouncedSearch) searchAPI(debouncedSearch);
}, [debouncedSearch]);

// ── Approach 3: useRef to hold stable debounced function ──
const timerRef = useRef();
const handleChange = (e) => {
  clearTimeout(timerRef.current);
  timerRef.current = setTimeout(() => searchAPI(e.target.value), 400);
};

const INITIAL = { name: '', email: '', role: 'user', active: true };

function UserForm({ onSave }) {
  const [form, setForm]     = useState(INITIAL);
  const [loading, setLoading] = useState(false);
  const [error, setError]     = useState(null);

  // Universal change handler using computed property name
  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setForm(f => ({
      ...f,
      [name]: type === 'checkbox' ? checked : value
    }));
  };

  // Programmatic field update (useful for dependent fields)
  const setField = (key, val) =>
    setForm(f => ({ ...f, [key]: val }));

  // Reset to initial state
  const handleReset = () => setForm(INITIAL);

  // Submit with async + error handling
  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);
    try {
      await onSave(form);
      handleReset(); // clear form on success
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name"  value={form.name}  onChange={handleChange} />
      <input name="email" value={form.email} onChange={handleChange} />
      {error && <p className="error">{error}</p>}
      <button type="submit" disabled={loading}>
        {loading ? 'Saving...' : 'Save'}
      </button>
      <button type="button" onClick={handleReset}>Reset</button>
    </form>
  );
}

function AutoFocusInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus(); // DOM method — runs after mount
  }, []);

  const handleClear = () => {
    inputRef.current.value = ''; // direct DOM mutation (uncontrolled)
    inputRef.current.focus();
  };

  return <input ref={inputRef} placeholder="type here" />;
}

// useRef for mutable value (no re-render on change)
function Stopwatch() {
  const [time, setTime]     = useState(0);
  const intervalRef         = useRef(null); // holds timer id — not state

  const start = () => {
    intervalRef.current = setInterval(
      () => setTime(t => t + 1), 1000
    );
  };
  const stop = () => clearInterval(intervalRef.current);
}

// ── Child: forward the ref to the actual <input> ──
const FancyInput = forwardRef(({ label, ...props }, ref) => (
  <div>
    <label>{label}</label>
    <input ref={ref} {...props} />  // ref points to this DOM node
  </div>
));

// ── Parent: gets direct access to the input DOM node ──
function Parent() {
  const ref = useRef(null);

  return (
    <>
      <FancyInput label="Name" ref={ref} />
      <button onClick={() => ref.current.focus()}>Focus</button>
    </>
  );
}

// ── useImperativeHandle — expose a custom API instead of the raw DOM node ──
const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),
    clear: () => { inputRef.current.value = ''; }
  }));
  return <input ref={inputRef} {...props} />;
});
// Parent calls: ref.current.focus() or ref.current.clear()

import { useForm } from 'react-hook-form';

function RegisterForm() {
  const {
    register,       // connects input to RHF
    handleSubmit,   // wraps your submit, provides validated data
    formState: { errors, isSubmitting },
    reset,          // reset to default values
    watch,          // watch a field's value reactively
    setValue,       // programmatically set a field
  } = useForm({ defaultValues: { name: '', email: '' } });

  const onSubmit = async (data) => {
    await saveUser(data); // data is already validated
    reset();
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register('name', {
          required: 'Name is required',
          minLength: { value: 2, message: 'Min 2 chars' }
        })}
      />
      {errors.name && <p>{errors.name.message}</p>}

      <input
        {...register('email', {
          required: 'Email required',
          pattern: { value: /^\S+@\S+\.\S+$/, message: 'Invalid email' }
        })}
      />
      {errors.email && <p>{errors.email.message}</p>}

      <button disabled={isSubmitting}>
        {isSubmitting ? 'Saving...' : 'Register'}
      </button>
    </form>
  );
}

// With Zod schema validation (production pattern)
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  name:  z.string().min(2),
  email: z.string().email(),
});

const { register, handleSubmit } = useForm({
  resolver: zodResolver(schema)
});

// ❌ Conditional hook — breaks the slot order
function BadComponent({ isAdmin }) {
  const [name, setName] = useState('');    // slot 0 ✅

  if (isAdmin) {
    const [role, setRole] = useState(''); // slot 1 — but ONLY sometimes!
  }

  const [age, setAge] = useState(0);      // slot 1 or 2 depending on isAdmin 💥
}
// When isAdmin flips, "age" reads from the wrong slot → corrupted state

// ✅ Condition goes INSIDE the hook, not around it
function GoodComponent({ isAdmin }) {
  const [name, setName] = useState(''); // always slot 0
  const [role, setRole] = useState(''); // always slot 1
  const [age, setAge]  = useState(0);  // always slot 2

  // Condition is inside useEffect, not around the hook
  useEffect(() => {
    if (isAdmin) fetchAdminRole().then(setRole);
  }, [isAdmin]);
}

// ❌ Hook inside event handler
const handleClick = () => {
  const [x, setX] = useState(0); // ❌ not called during render
};

function VideoPlayer({ src }) {
  const videoRef = useRef(null);

  const play  = () => videoRef.current.play();
  const pause = () => videoRef.current.pause();

  return (
    <>
      <video ref={videoRef} src={src} />
      <button onClick={play}>Play</button>
      <button onClick={pause}>Pause</button>
    </>
  );
  // videoRef.current is null until after first render (before mount)
  // Always null-check: videoRef.current?.play()
}

// Track how many times a component rendered (for debugging)
function RenderCounter() {
  const renderCount = useRef(0);
  renderCount.current++; // no re-render triggered
  return <p>Rendered {renderCount.current} times</p>;
}

// Store previous value of a prop/state
function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value; // runs after render — stores this render's value for next
  });
  return ref.current; // returns value from PREVIOUS render
}

// Store a callback without stale closure (useEvent pattern)
function useStableCallback(fn) {
  const ref = useRef(fn);
  useEffect(() => { ref.current = fn; }); // always latest fn
  return useCallback((...args) => ref.current(...args), []); // stable identity
}

// ── Without useMemo — recalculates on every render ──
function ProductList({ products, filter, theme }) {
  // Runs on EVERY render, even when only theme changes
  const filtered = products
    .filter(p => p.name.includes(filter))
    .sort((a, b) => a.price - b.price);

  return <List items={filtered} theme={theme} />;
}

// ── With useMemo — only recalculates when products or filter change ──
function ProductList({ products, filter, theme }) {
  const filtered = useMemo(() =>
    products
      .filter(p => p.name.includes(filter))
      .sort((a, b) => a.price - b.price),
  [products, filter]); // theme change = skip recalc ✅

  return <List items={filtered} theme={theme} />;
}

// ── Stabilise object/array reference for useEffect deps ──
// Without: new object every render → effect re-fires every render
const options = useMemo(
  () => ({ endpoint: url, method: 'GET' }),
  [url]
);
useEffect(() => { fetch(options); }, [options]); // stable ✅

// ── The problem: new function = React.memo child re-renders anyway ──
function Parent() {
  const [count, setCount] = useState(0);

  // New function object every render → ExpensiveChild always re-renders
  const handleSubmit = (data) => saveData(data);

  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>+</button>
      <ExpensiveChild onSubmit={handleSubmit} /> // re-renders on every count change
    </>
  );
}

// ── Fix: useCallback + React.memo on child ──
function Parent() {
  const [count, setCount] = useState(0);

  // Stable reference — only changes if saveData changes
  const handleSubmit = useCallback((data) => {
    saveData(data);
  }, []); // empty deps = never changes

  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>+</button>
      <ExpensiveChild onSubmit={handleSubmit} /> // skips re-render ✅
    </>
  );
}

// ExpensiveChild must be wrapped in React.memo to benefit
const ExpensiveChild = React.memo(({ onSubmit }) => {
  console.log('ExpensiveChild rendered');
  return <form onSubmit={onSubmit}>...</form>;
});

// ── useCallback for stable useEffect dependency ──
const fetchUser = useCallback(() => {
  api.get(`/users/${userId}`).then(setUser);
}, [userId]);

useEffect(() => { fetchUser(); }, [fetchUser]); // safe — only re-runs when userId changes

// ── State shape ──
const initial = { items: [], total: 0, loading: false };

// ── Reducer — pure function, no side effects ──
function cartReducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      return {
        ...state,
        items: [...state.items, action.item],
        total: state.total + action.item.price
      };
    case 'REMOVE_ITEM': {
      const removed = state.items.find(i => i.id === action.id);
      return {
        ...state,
        items: state.items.filter(i => i.id !== action.id),
        total: state.total - (removed?.price ?? 0)
      };
    }
    case 'CLEAR':
      return initial;
    case 'SET_LOADING':
      return { ...state, loading: action.loading };
    default:
      return state; // always return current state for unknown actions
  }
}

// ── Component ──
function Cart() {
  const [cart, dispatch] = useReducer(cartReducer, initial);

  return (
    <div>
      <p>Total: {cart.total}</p>
      <button onClick={() => dispatch({ type: 'ADD_ITEM', item: { id: 1, price: 10 } })}>
        Add
      </button>
      <button onClick={() => dispatch({ type: 'CLEAR' })}>Clear</button>
    </div>
  );
}

// useMemo — caches the RETURN VALUE of a function
const sortedList = useMemo(
  () => [...items].sort(),  // ← this function runs, result is cached
  [items]
);
// sortedList is an ARRAY (the return value)

// useCallback — caches the FUNCTION ITSELF
const handleSort = useCallback(
  () => setItems(i => [...i].sort()), // ← this function is cached as-is
  []
);
// handleSort is a FUNCTION

// They are equivalent:
const handleSort = useCallback(fn, [deps]);
// is exactly the same as:
const handleSort = useMemo(() => fn, [deps]);

// ── 1. Create context with default (for use outside provider) ──
const ThemeContext = createContext(null);

// ── 2. Provider component encapsulates state ──
export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggle = useCallback(
    () => setTheme(t => t === 'light' ? 'dark' : 'light'),
    []
  );

  // Memoize value object — avoids all consumers re-rendering on unrelated parent renders
  const value = useMemo(() => ({ theme, toggle }), [theme, toggle]);

  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
}

// ── 3. Custom hook — throws if used outside provider ──
export function useTheme() {
  const ctx = useContext(ThemeContext);
  if (!ctx) throw new Error('useTheme must be inside ThemeProvider');
  return ctx;
}

// ── 4. Usage anywhere in the tree ──
function ThemeButton() {
  const { theme, toggle } = useTheme();
  return <button onClick={toggle}>Mode: {theme}</button>;
}

// ── 5. Wire at app root ──
function App() {
  return (
    <ThemeProvider>
      <Router>
        <Layout />   // ThemeButton anywhere inside works
      </Router>
    </ThemeProvider>
  );
}

// ❌ Problem: new object on every render → all consumers re-render
function BadProvider({ children }) {
  const [user, setUser]   = useState(null);
  const [theme, setTheme] = useState('dark');

  return (
    // New object literal every render → reference changes → all consumers re-render
    <AppCtx.Provider value={{ user, setUser, theme, setTheme }}>
      {children}
    </AppCtx.Provider>
  );
}

// ✅ Fix 1: useMemo on the value object
const value = useMemo(
  () => ({ user, setUser, theme, setTheme }),
  [user, theme] // setters are stable, don't need to be deps
);

// ✅ Fix 2: Split context by update frequency (best pattern)
const UserCtx  = createContext(null); // changes when user logs in/out
const ThemeCtx = createContext(null); // changes on theme toggle

// Now: toggling theme only re-renders ThemeCtx consumers, not user consumers
function Providers({ children }) {
  const [user, setUser]   = useState(null);
  const [theme, setTheme] = useState('dark');
  return (
    <UserCtx.Provider  value={useMemo(() => ({ user, setUser }), [user])}>
    <ThemeCtx.Provider value={useMemo(() => ({ theme, setTheme }), [theme])}>
      {children}
    </ThemeCtx.Provider>
    </UserCtx.Provider>
  );
}

function useFetch(url) {
  const [data, setData]       = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError]     = useState(null);

  useEffect(() => {
    if (!url) return;
    const controller = new AbortController();
    setLoading(true);
    fetch(url, { signal: controller.signal })
      .then(r => { if (!r.ok) throw new Error(r.statusText); return r.json(); })
      .then(setData)
      .catch(e => { if (e.name !== 'AbortError') setError(e); })
      .finally(() => setLoading(false));
    return () => controller.abort();
  }, [url]);

  return { data, loading, error };
}

// Usage — clean component, zero fetch logic
function UserProfile({ id }) {
  const { data, loading, error } = useFetch(`/api/users/${id}`);
  if (loading) return <Spinner />;
  if (error)   return <Error msg={error.message} />;
  return <p>{data.name}</p>;
}

function useLocalStorage(key, defaultValue) {
  const [value, setValue] = useState(() => {
    try {
      const stored = localStorage.getItem(key);
      return stored ? JSON.parse(stored) : defaultValue;
    } catch { return defaultValue; }
  });

  const setStored = useCallback((next) => {
    const toStore = typeof next === 'function' ? next(value) : next;
    setValue(toStore);
    localStorage.setItem(key, JSON.stringify(toStore));
  }, [key, value]);

  return [value, setStored];
}
// Usage: const [theme, setTheme] = useLocalStorage('theme', 'dark');

function useWindowSize() {
  const [size, setSize] = useState({
    width:  window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    const handle = () => setSize({
      width:  window.innerWidth,
      height: window.innerHeight
    });
    window.addEventListener('resize', handle);
    return () => window.removeEventListener('resize', handle);
  }, []);

  return size;
}
// Usage: const { width } = useWindowSize();
// const isMobile = width < 768;

function Counter() {
  const [count, setCount] = useState(0); // Hook node 1: { state: 0, queue: [] }
  const [name,  setName]  = useState(''); // Hook node 2: { state: '', queue: [] }
  useEffect(() => {}, []);               // Hook node 3: { effect, deps: [] }
  const memoVal = useMemo(() => count * 2, [count]); // Hook node 4: { value, deps }
}

// Fiber's hook list (conceptual linked list):
// node1 → node2 → node3 → node4 → null

// On RE-RENDER: React walks the SAME list in order
// useState call 1 → reads node1.state → returns [0, setter]
// useState call 2 → reads node2.state → returns ['', setter]
// useEffect call  → reads node3.deps → compares, schedules if changed
// useMemo call    → reads node4.deps → recomputes if changed

// MOUNT vs UPDATE — different dispatcher
// First render: "mount dispatcher" — creates nodes, stores initial values
// Subsequent: "update dispatcher" — reads existing nodes, applies queued updates

// ── withAuth HOC — redirect if not logged in ──
function withAuth(WrappedComponent) {
  // Return a new component that wraps the original
  function AuthGuard(props) {
    const { user } = useAuth();

    if (!user) {
      return <Navigate to="/login" />;
    }
    // Pass ALL original props through — transparency is key
    return <WrappedComponent {...props} user={user} />;
  }
  // Preserve displayName for React DevTools
  AuthGuard.displayName = `withAuth(${WrappedComponent.displayName || WrappedComponent.name})`;
  return AuthGuard;
}

// Usage
const ProtectedDashboard = withAuth(Dashboard);

// ── withLogger HOC — log renders ──
function withLogger(WrappedComponent) {
  return function(props) {
    useEffect(() => {
      console.log(`${WrappedComponent.name} mounted`, props);
      return () => console.log(`${WrappedComponent.name} unmounted`);
    }, []);
    return <WrappedComponent {...props} />;
  };
}

// ── HOCs are composable ──
const EnhancedPage = withLogger(withAuth(Dashboard));
// Renders: EnhancedPage → withLogger wrapper → withAuth wrapper → Dashboard

// ── Mouse tracker with render prop ──
function MouseTracker({ render }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });

  return (
    <div onMouseMove={e => setPos({ x: e.clientX, y: e.clientY })}>
      {render(pos)}  // caller decides what to do with pos
    </div>
  );
}

// Caller 1: show coordinates
<MouseTracker render={({ x, y }) => <p>{x}, {y}</p>} />

// Caller 2: move an image with the cursor
<MouseTracker render={({ x, y }) => (
  <img src="/cat.png" style={{ position: 'fixed', left: x, top: y }} />
)} />

// ── children as a function (same pattern, cleaner syntax) ──
function Toggle({ children }) {
  const [on, setOn] = useState(false);
  return <{children({ on, toggle: () => setOn(v => !v) })}>;
}

<Toggle>
  {({ on, toggle }) => (
    <button onClick={toggle}>{on ? 'ON' : 'OFF'}</button>
  )}
</Toggle>

// ── HOC approach ──
function withWindowWidth(Component) {
  return function(props) {
    const [width, setWidth] = useState(window.innerWidth);
    useEffect(() => {
      const h = () => setWidth(window.innerWidth);
      window.addEventListener('resize', h);
      return () => window.removeEventListener('resize', h);
    }, []);
    return <Component {...props} windowWidth={width} />;
  };
}
const MyPage = withWindowWidth(Page); // extra wrapper in DevTools

// ── Render prop approach ──
function WindowWidth({ children }) {
  const [width, setWidth] = useState(window.innerWidth);
  // ...same effect...
  return children(width);
}
// extra nesting in JSX:
<WindowWidth>
  {(width) => <Page width={width} />}
</WindowWidth>

// ── Custom hook approach ── (winner)
function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const h = () => setWidth(window.innerWidth);
    window.addEventListener('resize', h);
    return () => window.removeEventListener('resize', h);
  }, []);
  return width;
}
// Usage — zero component tree impact:
function Page() {
  const width = useWindowWidth(); // clean! no wrappers, no prop injection
  return <p>{width < 768 ? 'Mobile' : 'Desktop'}</p>;
}

// ── 1. Shared context ──
const TabsCtx = createContext(null);

// ── 2. Parent manages state ──
function Tabs({ children, defaultTab = 0 }) {
  const [active, setActive] = useState(defaultTab);
  return (
    <TabsCtx.Provider value={{ active, setActive }}>
      <div className="tabs">{children}</div>
    </TabsCtx.Provider>
  );
}

// ── 3. Sub-components read from context ──
function TabList({ children }) {
  return <div role="tablist" className="tab-list">{children}</div>;
}

function Tab({ index, children }) {
  const { active, setActive } = useContext(TabsCtx);
  return (
    <button
      role="tab"
      aria-selected={active === index}
      className={active === index ? 'tab active' : 'tab'}
      onClick={() => setActive(index)}
    >
      {children}
    </button>
  );
}

function TabPanels({ children }) {
  const { active } = useContext(TabsCtx);
  return <div className="panels">{React.Children.toArray(children)[active]}</div>;
}

function TabPanel({ children }) {
  return <div role="tabpanel">{children}</div>;
}

// ── 4. Attach sub-components as static properties (optional, clean API) ──
Tabs.List   = TabList;
Tabs.Tab    = Tab;
Tabs.Panels = TabPanels;
Tabs.Panel  = TabPanel;

// ── 5. API the consumer sees — flexible, self-documenting ──
<Tabs defaultTab={0}>
  <Tabs.List>
    <Tabs.Tab index={0}>Overview</Tabs.Tab>
    <Tabs.Tab index={1}>Details</Tabs.Tab>
    <Tabs.Tab index={2}>Reviews</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panels>
    <Tabs.Panel>Overview content</Tabs.Panel>
    <Tabs.Panel>Details content</Tabs.Panel>
    <Tabs.Panel>Reviews content</Tabs.Panel>
  </Tabs.Panels>
</Tabs>

// Without memo — re-renders every time parent renders
function ExpensiveList({ items }) {
  console.log('ExpensiveList rendered');
  return <ul>{items.map(i => <li key={i.id}>{i.name}</li>)}</ul>;
}

// With memo — skips render if items reference didn't change
const ExpensiveList = React.memo(function({ items }) {
  return <ul>{items.map(i => <li key={i.id}>{i.name}</li>)}</ul>;
});

// Custom comparison for deep equality or partial checks
const UserCard = React.memo(
  ({ user }) => <div>{user.name}</div>,
  (prev, next) => prev.user.id === next.user.id  // only re-render if id changes
);

function Dropdown({
  // Controlled mode props
  open:      controlledOpen,   // if provided, parent controls it
  onOpenChange,                 // parent's setter
  // Uncontrolled mode props
  defaultOpen = false,          // initial value (uncontrolled)
  children
}) {
  // Internal state — used only in uncontrolled mode
  const [internalOpen, setInternalOpen] = useState(defaultOpen);

  // Is this component controlled? Check if parent passed the open prop
  const isControlled = controlledOpen !== undefined;
  const open = isControlled ? controlledOpen : internalOpen;

  const handleToggle = () => {
    if (isControlled) {
      onOpenChange?.(!open); // notify parent — parent decides the new state
    } else {
      setInternalOpen(v => !v); // manage our own state
    }
  };

  return (
    <div>
      <button onClick={handleToggle}>Toggle</button>
      {open && <div className="panel">{children}</div>}
    </div>
  );
}

// Uncontrolled usage (simpler)
<Dropdown defaultOpen={false}>Content</Dropdown>

// Controlled usage (parent owns state)
<Dropdown open={isMenuOpen} onOpenChange={setIsMenuOpen}>
  Content
</Dropdown>

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  // Runs during render phase — update state to show fallback
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  // Runs after render — good for logging to Sentry etc.
  componentDidCatch(error, info) {
    logToSentry(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback ?? <h2>Something went wrong.</h2>;
    }
    return this.props.children;
  }
}

// Usage — wrap any subtree
<ErrorBoundary fallback={<ErrorPage />}>
  <UserDashboard />
</ErrorBoundary>

// Multiple granular boundaries — isolate failures
<Layout>
  <ErrorBoundary fallback={<SidebarError />}><Sidebar /></ErrorBoundary>
  <ErrorBoundary fallback={<FeedError />}><Feed /></ErrorBoundary>
</Layout>

import { lazy, Suspense } from 'react';

// lazy() takes a function returning a dynamic import
// The component is loaded only when first rendered
const AdminDashboard = lazy(() => import('./AdminDashboard'));
const UserProfile    = lazy(() => import('./UserProfile'));
const Analytics      = lazy(() => import('./Analytics'));

function App() {
  return (
    // Suspense catches lazy components "suspending" and shows fallback
    <Suspense fallback={<PageSpinner />}>
      <Routes>
        <Route path="/admin"     element={<AdminDashboard />} />
        <Route path="/profile"   element={<UserProfile />} />
        <Route path="/analytics" element={<Analytics />} />
      </Routes>
    </Suspense>
  );
}

// Nested Suspense — granular loading states
<Suspense fallback={<LayoutSkeleton />}>    // outer: layout loading
  <Layout>
    <Suspense fallback={<ChartSkeleton />}>  // inner: chart loading
      <HeavyChart />
    </Suspense>
  </Layout>
</Suspense>

// Combine with Error Boundary for robust async UI
<ErrorBoundary fallback={<ErrorPage />}>
  <Suspense fallback={<Spinner />}>
    <LazyPage />
  </Suspense>
</ErrorBoundary>

// ── store.js ──
const StateCtx    = createContext(null);
const DispatchCtx = createContext(null); // separate ctx — dispatch is always stable

const initial = { user: null, cart: [], notifications: [] };

function appReducer(state, action) {
  switch (action.type) {
    case 'LOGIN':        return { ...state, user: action.user };
    case 'LOGOUT':       return { ...state, user: null, cart: [] };
    case 'ADD_TO_CART':  return { ...state, cart: [...state.cart, action.item] };
    default: return state;
  }
}

export function AppProvider({ children }) {
  const [state, dispatch] = useReducer(appReducer, initial);

  return (
    <DispatchCtx.Provider value={dispatch}>
      <StateCtx.Provider value={state}>
        {children}
      </StateCtx.Provider>
    </DispatchCtx.Provider>
  );
}

// Separate hooks — consumers only re-render when their slice changes
export const useAppState    = () => useContext(StateCtx);
export const useAppDispatch = () => useContext(DispatchCtx);

// ── Usage in any component ──
function AddToCartButton({ item }) {
  const dispatch = useAppDispatch(); // stable — never re-renders from state changes
  return (
    <button onClick={() => dispatch({ type: 'ADD_TO_CART', item })}>
      Add to Cart
    </button>
  );
}

// ── Rule 1: Different type = full rebuild ──
// Before: <Counter />   After: <p>...</p>
// React unmounts Counter (destroys state), mounts <p>
// This is why conditionally swapping components resets state!

function App({ isAdmin }) {
  return isAdmin
    ? <AdminPanel />   // toggling between these: full unmount/remount each time
    : <UserPanel />;   // state inside AdminPanel is destroyed when switching
}

// ── Rule 2: Same type, same position = update in place ──
// Both are <Counter /> — React reuses the instance, updates props
function App({ isPremium }) {
  return isPremium
    ? <Counter color="gold" />   // same position, same type
    : <Counter color="grey" />;  // → state PRESERVED, only color prop changes
}

// ── Trick: reset state by changing key ──
// React treats different key = different component = full remount
<ProfileForm key={userId} />
// When userId changes, ProfileForm fully remounts — state is fresh ✅
// This replaces the anti-pattern of getDerivedStateFromProps / useEffect sync

// ── Position matters, not just type ──
function App({ showBanner }) {
  return (
    <div>
      {showBanner && <Banner />}  // position 0 — conditionally rendered
      <Counter />                   // when Banner appears, Counter shifts from pos 0 to 1
    </div>                           // → Counter remounts! State lost. Use key to stabilise.
  );
}

// Re-render = React calls your function again = cheap JS work
// DOM update = React writes to real DOM = expensive

// Even if a component re-renders 100 times, React only touches the DOM
// for the parts that actually changed. So a "wasted" re-render that produces
// the same JSX is cheap — React diffs it and does zero DOM work.

// ⚠ Re-renders ARE a problem when:
// 1. The component does expensive computation inside the render
// 2. It causes a cascade of many child re-renders
// 3. It creates new object references that invalidate downstream memos

// ✅ Check if a re-render is wasted:
// React DevTools → Profiler → check "Highlight updates when components render"
// Components that flash unexpectedly are candidates for React.memo

// Opt out of parent-triggered re-render:
const Child = React.memo(({ name }) => <p>{name}</p>);
// Child only re-renders if name prop changes, even if parent re-renders constantly

// ❌ State too high — search re-renders the whole app on every keystroke
function App() {
  const [search, setSearch] = useState(''); // every keystroke re-renders App
  return (
    <>
      <Header />        // ← re-renders unnecessarily
      <Sidebar />       // ← re-renders unnecessarily
      <SearchBox value={search} onChange={setSearch} />
      <Results query={search} />
    </>
  );
}

// ✅ Push state down — only SearchBox + Results re-render
function App() {
  return (
    <>
      <Header />   // never re-renders from search
      <Sidebar />  // never re-renders from search
      <SearchSection />  // self-contained: owns search state internally
    </>
  );
}
function SearchSection() {
  const [search, setSearch] = useState(''); // scoped here
  return (
    <>
      <SearchBox value={search} onChange={setSearch} />
      <Results query={search} />
    </>
  );
}

// ── Lifting content out of a re-rendering parent ──
// "children as props" trick — children don't re-render with parent
function AnimatedWrapper({ children }) {
  const [tick, setTick] = useState(0); // updates every frame
  return <div style={{ opacity: tick % 2 }}>{children}</div>;
}
// children are created in the PARENT of AnimatedWrapper
// → children's identity is stable → they don't re-render with tick!
<AnimatedWrapper>
  <ExpensiveTree />  // ✅ won't re-render on tick changes
</AnimatedWrapper>

import { Profiler } from 'react';

function onRender(
  id,           // "id" prop of the Profiler
  phase,        // "mount" | "update" | "nested-update"
  actualDuration, // time spent rendering
  baseDuration,   // estimated time without memoisation
  startTime,
  commitTime
) {
  if (actualDuration > 16) { // 16ms = 1 frame at 60fps
    console.warn(`${id} took ${actualDuration.toFixed(1)}ms`);
  }
}

<Profiler id="ProductList" onRender={onRender}>
  <ProductList items={items} />
</Profiler>
// Profiler is stripped from production builds automatically

// ── Parent component with frequent state changes ──
function Dashboard() {
  const [filter, setFilter] = useState('');   // changes on every keystroke
  const [sortBy, setSortBy] = useState('name'); // changes rarely
  const rawData = useData();                    // large dataset, changes rarely

  // 1. useMemo — expensive computation, skip when filter/sortBy/data unchanged
  const processedRows = useMemo(() => {
    return rawData
      .filter(row => row.name.toLowerCase().includes(filter))
      .sort((a, b) => a[sortBy] > b[sortBy] ? 1 : -1);
  }, [rawData, filter, sortBy]);

  // 2. useCallback — stable function ref so DataGrid (memoised) doesn't re-render
  const handleRowClick = useCallback((rowId) => {
    navigate(`/detail/${rowId}`);
  }, [navigate]); // navigate is stable from react-router

  const handleSort = useCallback((col) => {
    setSortBy(col);
  }, []); // no deps — setSortBy is always stable

  return (
    <>
      <input value={filter} onChange={e => setFilter(e.target.value)} />
      {/* 3. React.memo — DataGrid skips render when rows/handlers didn't change */}
      <DataGrid
        rows={processedRows}     // stable via useMemo
        onRowClick={handleRowClick} // stable via useCallback
        onSort={handleSort}         // stable via useCallback
      />
    </>
  );
}

// DataGrid is wrapped in React.memo — only re-renders when its props change
const DataGrid = React.memo(function DataGrid({ rows, onRowClick, onSort }) {
  console.log('DataGrid rendered'); // now only logs when rows/handlers change
  return (/* grid JSX */);
});

// Each route loads its own chunk — user on /login never downloads /admin code
const Home       = lazy(() => import('./pages/Home'));
const Dashboard  = lazy(() => import('./pages/Dashboard'));
const Admin      = lazy(() => import('./pages/Admin'));
const Settings   = lazy(() => import('./pages/Settings'));

<Suspense fallback={<PageLoader />}>
  <Routes>
    <Route path="/"          element={<Home />}      />
    <Route path="/dashboard" element={<Dashboard />} />
    <Route path="/admin"     element={<Admin />}     />
  </Routes>
</Suspense>

// Split heavy components that aren't needed immediately
const RichTextEditor = lazy(() => import('./RichTextEditor'));
const HeavyChart     = lazy(() => import('./HeavyChart'));
const PDFViewer      = lazy(() => import('./PDFViewer'));

// Only loads RichTextEditor bundle when user opens the editor
{isEditorOpen && (
  <Suspense fallback={<EditorSkeleton />}>
    <RichTextEditor />
  </Suspense>
)}

// Preload on hover for near-instant feel
const preloadEditor = () => import('./RichTextEditor'); // starts download early
<button
  onMouseEnter={preloadEditor}  // preload on hover
  onClick={() => setEditorOpen(true)}
>
  Open Editor
</button>

// vite.config.js — split vendor libraries into separate cached chunks
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            if (id.includes('react'))       return 'vendor-react';
            if (id.includes('chart.js'))   return 'vendor-charts';
            if (id.includes('lodash'))     return 'vendor-utils';
          }
        }
      }
    }
  }
};
// React chunks are cached by browser — only app code re-downloads on deploy

// ── 1. Lazy load below-the-fold images ──
<img
  src="/product.jpg"
  loading="lazy"       // native browser lazy loading
  decoding="async"     // decode off main thread
  alt="Product name"
/>

// ── 2. Responsive images with srcSet ──
<img
  src="/hero-800.webp"
  srcSet="/hero-400.webp 400w, /hero-800.webp 800w, /hero-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
  alt="Hero"
/>

// ── 3. Intersection Observer for custom lazy loading ──
function useLazyImage(src) {
  const imgRef = useRef(null);
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setLoaded(true);
        observer.disconnect();
      }
    });
    if (imgRef.current) observer.observe(imgRef.current);
    return () => observer.disconnect();
  }, []);

  return { imgRef, src: loaded ? src : undefined };
}

// Skeleton matches the shape of the content — reduces layout shift
function UserCardSkeleton() {
  return (
    <div className="card">
      <div className="skeleton circle" style={{ width: 48, height: 48 }} />
      <div style={{ flex: 1 }}>
        <div className="skeleton" style={{ width: '60%', height: 16 }} />
        <div className="skeleton" style={{ width: '40%', height: 12, marginTop: 8 }} />
      </div>
    </div>
  );
}

// CSS for the shimmer animation
// .skeleton { background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
//   background-size: 200% 100%; animation: shimmer 1.5s infinite; }

function UserCard({ userId }) {
  const { data, loading } = useFetch(`/api/users/${userId}`);
  if (loading) return <UserCardSkeleton />; // shows while loading
  return <div className="card">{data.name}</div>;
}

// ── How it works ──
// 1. Container has fixed height + overflow: scroll
// 2. Inner div has total height = rowHeight × rowCount (creates scroll space)
// 3. On scroll, calculate which rows are visible: start = scrollTop / rowHeight
// 4. Only render those rows + overscan buffer, positioned absolutely

// ── react-window (lightweight, most popular) ──
import { FixedSizeList } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>  // style from react-window — MUST be applied for correct positioning
    Row {index}: {data[index].name}
  </div>
);

<FixedSizeList
  height={600}         // container height in px
  width="100%"
  itemCount={10000}   // total rows
  itemSize={50}        // each row height in px
  overscanCount={5}    // extra rows above/below viewport
>
  {Row}
</FixedSizeList>
// Renders ~15 DOM nodes regardless of 10,000 items ✅

// ── @tanstack/react-virtual (headless, more flexible) ──
const rowVirtualizer = useVirtualizer({
  count: rows.length,
  getScrollElement: () => containerRef.current,
  estimateSize: () => 50,
  overscan: 5
});
// Gives you virtualItems array — you control the DOM structure completely

// ── worker.js ──
self.onmessage = (e) => {
  const { data } = e.data;
  const result = heavyComputation(data); // runs in background
  self.postMessage({ result });
};

// ── useWorker custom hook ──
function useWorker(workerUrl) {
  const workerRef = useRef(null);

  useEffect(() => {
    workerRef.current = new Worker(new URL(workerUrl, import.meta.url));
    return () => workerRef.current.terminate();
  }, [workerUrl]);

  const postMessage = useCallback((msg) => {
    return new Promise((resolve) => {
      workerRef.current.onmessage = (e) => resolve(e.data);
      workerRef.current.postMessage(msg);
    });
  }, []);

  return { postMessage };
}

// ── Component ──
function DataProcessor() {
  const [result, setResult]   = useState(null);
  const [loading, setLoading] = useState(false);
  const { postMessage } = useWorker('./worker.js');

  const process = async () => {
    setLoading(true);
    const { result } = await postMessage({ data: bigDataset });
    // UI stayed responsive during computation!
    setResult(result);
    setLoading(false);
  };

  return (
    <>
      <button onClick={process} disabled={loading}>
        {loading ? 'Processing...' : 'Process Data'}
      </button>
      {result && <Results data={result} />}
    </>
  );
}

import { startTransition, useTransition } from 'react';

function SearchPage() {
  const [input, setInput]   = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    const val = e.target.value;

    // Urgent — update input immediately (high priority)
    setInput(val);

    // Non-urgent — defer list update (can be interrupted)
    startTransition(() => {
      setResults(filterItems(val));
    });
  };

  return (
    <>
      <input value={input} onChange={handleChange} />
      {/* Show stale results with opacity while new results compute */}
      <div style={{ opacity: isPending ? 0.5 : 1 }}>
        {results.map(r => <ResultRow key={r.id} item={r} />)}
      </div>
    </>
  );
}

import { useDeferredValue } from 'react';

function SearchPage({ query }) {  // query comes from parent (prop)
  // Deferred copy — lags behind query intentionally
  const deferredQuery = useDeferredValue(query);

  // isStale = true while deferred lags behind
  const isStale = query !== deferredQuery;

  return (
    <div style={{ opacity: isStale ? 0.6 : 1 }}>
      {/* ExpensiveList re-renders with deferredQuery, not the latest query */}
      <ExpensiveList query={deferredQuery} />
    </div>
  );
}

// ── Key difference ──
// startTransition: you control WHEN the update fires (wrap the setter)
// useDeferredValue: you control WHAT value the component sees (wrap the value)
// Use startTransition when you own the state setter
// Use useDeferredValue when you receive the value via props

// ── web-vitals library (from Google) ──
import { onLCP, onINP, onCLS, onFCP, onTTFB } from 'web-vitals';

function sendToAnalytics({ name, value, rating, id }) {
  fetch('/analytics', {
    method: 'POST',
    body: JSON.stringify({ name, value, rating, id })
  });
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

// ── reportWebVitals — generated by CRA/Vite ──
// index.js:
reportWebVitals(console.log); // logs metrics to console during dev

// ── Performance.mark for custom timing ──
performance.mark('fetch-start');
await fetchData();
performance.mark('fetch-end');
performance.measure('fetch-duration', 'fetch-start', 'fetch-end');
// Visible in DevTools → Performance → Timings lane

// ❌ Prop drilling — Button doesn't care about user, just passes it down
<App user={user} />
  <Layout user={user} />     // Layout doesn't use user
    <Header user={user} />   // Header doesn't use user
      <Avatar user={user} /> // Finally used here

// ✅ Composition — pass Avatar as a prop (children or named slot)
function App() {
  return <Layout header={<Header right={<Avatar user={user} />} />} />;
}
// Layout and Header never see user — zero coupling

// ✅ Context — for truly global data (theme, auth, i18n)
const UserCtx = createContext(null);
function App() {
  return (
    <UserCtx.Provider value={user}>
      <Layout />  // No user prop needed anywhere
    </UserCtx.Provider>
  );
}
function Avatar() {
  const user = useContext(UserCtx); // reads directly
  return <img src={user.avatar} />;
}

// ❌ New object every render → all consumers re-render on every App render
function App() {
  const [user, setUser] = useState(null);
  return (
    <AuthCtx.Provider value={{ user, setUser }}>  // ← new {} each render!
      <Router />
    </AuthCtx.Provider>
  );
}

// ✅ Fix 1: Memoize the value object
function App() {
  const [user, setUser] = useState(null);
  const value = useMemo(() => ({ user, setUser }), [user]);
  // Now value only changes reference when user changes — not on every App render
  return <AuthCtx.Provider value={value}><Router /></AuthCtx.Provider>;
}

// Split context into what changes (state) and what doesn't (dispatch)
// dispatch from useReducer is always the same reference — safe to share standalone

const CartStateCtx  = createContext(null); // changes when cart updates
const CartDispatchCtx = createContext(null); // stable — never changes

function CartProvider({ children }) {
  const [state, dispatch] = useReducer(cartReducer, []);
  return (
    <CartStateCtx.Provider value={state}>
      <CartDispatchCtx.Provider value={dispatch}>
        {children}
      </CartDispatchCtx.Provider>
    </CartStateCtx.Provider>
  );
}

// AddToCartButton only reads dispatch → NEVER re-renders when cart state changes
function AddToCartButton({ item }) {
  const dispatch = useContext(CartDispatchCtx); // stable ref
  return <button onClick={() => dispatch({ type: 'ADD', item })}>Add</button>;
}

// CartBadge reads state → re-renders only when cart changes
function CartBadge() {
  const cart = useContext(CartStateCtx);
  return <span>{cart.length}</span>;
}

// Instead of one giant AppContext, create narrow contexts
const ThemeCtx    = createContext('light'); // changes ~never
const UserCtx     = createContext(null);    // changes on login/logout
const NotifCtx    = createContext([]);      // changes frequently

// Components subscribe only to what they need
// A new notification won't re-render the entire app — only NotifCtx consumers

// Wrap in a single AppProviders component to avoid nesting hell:
function AppProviders({ children }) {
  return (
    <ThemeCtx.Provider value={'dark'}>
      <UserProvider>
        <NotifProvider>
          {children}
        </NotifProvider>
      </UserProvider>
    </ThemeCtx.Provider>
  );
}

// State shape — all related fields together
const initialState = {
  status: 'idle',   // 'idle' | 'loading' | 'success' | 'error'
  data: null,
  error: null,
};

// Reducer: pure function (state, action) → new state
function fetchReducer(state, action) {
  switch (action.type) {
    case 'FETCH_START':
      return { ...state, status: 'loading', error: null };
    case 'FETCH_SUCCESS':
      return { status: 'success', data: action.payload, error: null };
    case 'FETCH_ERROR':
      return { status: 'error', data: null, error: action.payload };
    default:
      return state;
  }
}

function UserProfile({ userId }) {
  const [state, dispatch] = useReducer(fetchReducer, initialState);

  useEffect(() => {
    dispatch({ type: 'FETCH_START' });
    fetchUser(userId)
      .then(data => dispatch({ type: 'FETCH_SUCCESS', payload: data }))
      .catch(err => dispatch({ type: 'FETCH_ERROR', payload: err.message }));
  }, [userId]);

  if (state.status === 'loading') return <Spinner />;
  if (state.status === 'error')   return <Error msg={state.error} />;
  if (state.status === 'success') return <Profile data={state.data} />;
  return <p>Ready</p>;
}

import { createContext, useContext, useReducer, useMemo } from 'react';

// 1. Create separate contexts
const CartStateCtx    = createContext(null);
const CartDispatchCtx = createContext(null);

// 2. Initial state
const initial = { items: [], coupon: null };

// 3. Pure reducer — easy to unit test
function cartReducer(state, action) {
  switch (action.type) {
    case 'ADD': {
      const existing = state.items.find(i => i.id === action.item.id);
      if (existing) {
        return {
          ...state,
          items: state.items.map(i =>
            i.id === action.item.id ? { ...i, qty: i.qty + 1 } : i
          ),
        };
      }
      return { ...state, items: [...state.items, { ...action.item, qty: 1 }] };
    }
    case 'REMOVE':
      return { ...state, items: state.items.filter(i => i.id !== action.id) };
    case 'CLEAR':
      return initial;
    case 'APPLY_COUPON':
      return { ...state, coupon: action.code };
    default: return state;
  }
}

// 4. Provider — dispatch is always stable (no useMemo needed for it)
export function CartProvider({ children }) {
  const [state, dispatch] = useReducer(cartReducer, initial);
  // Memoize state to avoid inline object creation
  const cartState = useMemo(() => state, [state]);
  return (
    <CartStateCtx.Provider value={cartState}>
      <CartDispatchCtx.Provider value={dispatch}>
        {children}
      </CartDispatchCtx.Provider>
    </CartStateCtx.Provider>
  );
}

// 5. Custom hooks — throw if used outside provider
export function useCartState() {
  const ctx = useContext(CartStateCtx);
  if (!ctx) throw new Error('useCartState must be inside CartProvider');
  return ctx;
}
export function useCartDispatch() {
  const ctx = useContext(CartDispatchCtx);
  if (!ctx) throw new Error('useCartDispatch must be inside CartProvider');
  return ctx;
}

// 6. Selector hook — derived state computed close to the consumer
export function useCartTotal() {
  const { items } = useCartState();
  return useMemo(
    () => items.reduce((sum, i) => sum + i.price * i.qty, 0),
    [items]
  );
}

// 7. Usage: components pick what they need
function CartBadge() {
  const { items } = useCartState();        // re-renders on cart change
  return <span>{items.length}</span>;
}
function AddButton({ item }) {
  const dispatch = useCartDispatch();     // NEVER re-renders from cart state
  return (
    <button onClick={() => dispatch({ type: 'ADD', item })}>Add</button>
  );
}