let a = 42
let b = a   // b gets a COPY of 42
b = 100
console.log(a) // 42 — a is untouched

const user = { name: 'Alice', age: 30 }
const userRef = user   // userRef points to the SAME object
userRef.age = 31
console.log(user.age) // 31 — mutation affected the original

// ❌ This mutation is invisible to React
const [user, setUser] = useState({ name: 'Alice', age: 30 })

function birthday() {
  user.age += 1      // mutates in place
  setUser(user)      // same reference — React bails out, no re-render
}

// ✅ Create a new reference
function birthday() {
  setUser({ ...user, age: user.age + 1 })  // new object, new reference
}

const original = { id: 1, profile: { name: 'Alice' }, scores: [10, 20, 30] }

const updated = { ...original, id: 2 }
// updated.profile === original.profile  → true (same reference, not copied)
// updated.scores  === original.scores   → true (same reference, not copied)

import { produce } from 'immer'

type State = { users: { id: number; name: string }[] }

const nextState = produce(state, (draft) => {
  // Looks like mutation — Immer tracks the changes and produces a new object
  const user = draft.users.find((u) => u.id === 3)
  if (user) user.name = 'Bob'
})
// state is unchanged; nextState is a new object with structural sharing

function createStore(initialState) {
  let state = initialState
  const subscribers = new Set()

  return {
    getState: () => state,

    setState: (updater) => {
      const nextState = typeof updater === 'function' ? updater(state) : updater
      if (nextState !== state) {        // referential check — same as React
        state = nextState
        subscribers.forEach((fn) => fn(state))  // notify all observers
      }
    },

    subscribe: (fn) => {
      subscribers.add(fn)
      return () => subscribers.delete(fn)  // returns unsubscribe
    },
  }
}

const store = createStore({ count: 0 })

const unsubscribe = store.subscribe((state) => {
  console.log('State changed:', state.count)
})

store.setState((s) => ({ count: s.count + 1 }))  // logs: "State changed: 1"
store.setState((s) => ({ count: s.count + 1 }))  // logs: "State changed: 2"
unsubscribe()
store.setState((s) => ({ count: s.count + 1 }))  // no log — unsubscribed

Parent Component
│
├── props ──────────────► Child A
│                              │
│                              ▼
│                         (renders using props)
│                              │
│                         event/callback ──► Parent (updates state) ──► re-render
│
└── props ──────────────► Child B

// React.memo compares props shallowly — if props reference changes, it re-renders
const Child = React.memo(function Child({ count }: { count: number }) {
  return <div>{count}</div>
})

// ❌ This creates a new object on every Parent render — memo is useless
<Child config={{ theme: 'dark' }} />

// ✅ Stable reference — memo works correctly
const CONFIG = { theme: 'dark' }
<Child config={CONFIG} />

// ❌ Without key — React compares by index. Inserting at the top destroys and
//    recreates every list item because every index shifts.
{items.map((item) => <Row item={item} />)}

// ✅ With stable key — React correctly identifies the new item and moves existing ones
{items.map((item) => <Row key={item.id} item={item} />)}

// ❌ Classic anti-pattern — syncing derived data into state via useEffect
function ProductList({ products }: { products: Product[] }) {
  const [filteredProducts, setFilteredProducts] = useState(products)
  const [searchQuery, setSearchQuery] = useState('')

  useEffect(() => {
    setFilteredProducts(
      products.filter((p) => p.name.toLowerCase().includes(searchQuery.toLowerCase()))
    )
  }, [products, searchQuery])

  // Problem 1: Extra render cycle — first render shows stale filteredProducts,
  //            then useEffect fires, setting state, causing a second render.
  // Problem 2: filteredProducts is always one render behind the source truth.
  // Problem 3: filteredProducts can diverge from products+searchQuery if you forget
  //            a dependency.
}

// ✅ Derive during render — always consistent, no extra renders, no dependency array
function ProductList({ products }: { products: Product[] }) {
  const [searchQuery, setSearchQuery] = useState('')

  // Computed directly — zero lag, zero possibility of stale state
  const filteredProducts = useMemo(
    () => products.filter((p) =>
      p.name.toLowerCase().includes(searchQuery.toLowerCase())
    ),
    [products, searchQuery]
  )

  return (
    <>
      <input value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} />
      {filteredProducts.map((p) => <ProductCard key={p.id} product={p} />)}
    </>
  )
}