> ## Documentation Index
> Fetch the complete documentation index at: https://docs.anujpandey.in/llms.txt
> Use this file to discover all available pages before exploring further.

# useSyncExternalStore

# **React `useSyncExternalStore` — Complete Theory Guide**

***

# **1. Introduction**

## **What is `useSyncExternalStore`**

`useSyncExternalStore` is a React Hook introduced in **React 18** to safely subscribe to **external data sources** in a way that works correctly with **concurrent rendering**.

It allows React components to:

* Read data from outside React (e.g., global stores, browser APIs)
* Stay in sync with that data
* Avoid inconsistencies (tearing) during concurrent updates

***

## **Why it is important in React**

Before React 18:

* Developers used `useEffect` + `useState` for subscriptions
* This caused **tearing issues** in concurrent rendering

**Tearing = UI showing inconsistent state across components**

React needed a **guaranteed consistent snapshot mechanism** → hence `useSyncExternalStore`.

***

## **When and why we use it**

Use `useSyncExternalStore` when:

### ✅ External state exists outside React

* Redux store
* Zustand store
* Custom event emitters
* Browser APIs (e.g., `window`, `localStorage`)

### ✅ Need consistency across renders

* Prevent UI mismatch during concurrent updates

### ✅ Building libraries

* State management libraries use this internally

***

# **2. Concepts / Internal Workings**

***

## **Core Concepts**

### **1. External Store**

A store that exists **outside React’s state system**:

```js theme={null}
const store = {
  value: 0,
  listeners: new Set(),
};
```

***

### **2. Snapshot**

A **read-only representation** of the current store state.

```js theme={null}
function getSnapshot() {
  return store.value;
}
```

***

### **3. Subscription**

React needs a way to know **when the store changes**.

```js theme={null}
function subscribe(callback) {
  store.listeners.add(callback);
  return () => store.listeners.delete(callback);
}
```

***

## **How it Works Internally**

### **Flow**

1. React calls `getSnapshot()` during render
2. Component uses that value
3. React subscribes using `subscribe()`
4. When store updates:

   * Subscribers are notified
   * React re-renders component
5. React compares snapshots to decide updates

***

## **Why “Sync” Matters**

React ensures:

* Snapshot is **consistent across render phases**
* No tearing during concurrent rendering

This is critical in:

* Suspense
* Transitions
* Concurrent UI updates

***

## **Internal Guarantees**

* Snapshot must be **stable**
* React may call `getSnapshot` multiple times
* Must return same value unless store changes

***

## **Relationship with Other React Features**

### **1. vs `useEffect`**

| Feature              | useEffect    | useSyncExternalStore |
| -------------------- | ------------ | -------------------- |
| Timing               | After render | During render        |
| Safe for concurrency | ❌ No         | ✅ Yes                |
| Tearing protection   | ❌            | ✅                    |

***

### **2. vs `useState`**

* `useState` → internal React state
* `useSyncExternalStore` → external state

***

### **3. vs Context API**

* Context → propagates React-managed state
* External store → managed outside React

***

### **4. Concurrent Rendering Compatibility**

* Designed specifically for:

  * Suspense
  * Transitions
  * Interruptible rendering

***

# **3. Syntax & Examples**

***

## **Basic Syntax**

```js theme={null}
const value = useSyncExternalStore(
  subscribe,
  getSnapshot,
  getServerSnapshot // optional (SSR)
);
```

***

## **Example 1: Simple Custom Store**

```js theme={null}
// store.js
let value = 0;
const listeners = new Set();

export function increment() {
  value++;
  listeners.forEach((l) => l());
}

export function subscribe(callback) {
  listeners.add(callback);
  return () => listeners.delete(callback);
}

export function getSnapshot() {
  return value;
}
```

```js theme={null}
// Component.jsx
import { useSyncExternalStore } from "react";
import { subscribe, getSnapshot, increment } from "./store";

function Counter() {
  const count = useSyncExternalStore(subscribe, getSnapshot);

  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}
```

***

## **Example 2: Browser API (Online Status)**

```js theme={null}
function subscribe(callback) {
  window.addEventListener("online", callback);
  window.addEventListener("offline", callback);

  return () => {
    window.removeEventListener("online", callback);
    window.removeEventListener("offline", callback);
  };
}

function getSnapshot() {
  return navigator.onLine;
}

function OnlineStatus() {
  const isOnline = useSyncExternalStore(subscribe, getSnapshot);

  return <p>{isOnline ? "Online" : "Offline"}</p>;
}
```

***

## **Example 3: With Server-Side Rendering**

```js theme={null}
function getServerSnapshot() {
  return true; // assume online on server
}

const isOnline = useSyncExternalStore(
  subscribe,
  getSnapshot,
  getServerSnapshot
);
```

***

## **Example 4: Selector Pattern (Optimized Reads)**

```js theme={null}
function useStore(selector) {
  return useSyncExternalStore(
    subscribe,
    () => selector(getSnapshot())
  );
}

// Usage
const count = useStore((state) => state.count);
```

***

## **Example 5: Zustand-like Pattern**

```js theme={null}
const store = {
  state: { count: 0 },
  listeners: new Set(),
};

function setState(newState) {
  store.state = { ...store.state, ...newState };
  store.listeners.forEach((l) => l());
}

function useStore(selector) {
  return useSyncExternalStore(
    (cb) => {
      store.listeners.add(cb);
      return () => store.listeners.delete(cb);
    },
    () => selector(store.state)
  );
}
```

***

# **4. Edge Cases / Common Mistakes**

***

## **1. Returning New Objects from `getSnapshot`**

### ❌ Problem

```js theme={null}
function getSnapshot() {
  return { count: store.value }; // new object every time
}
```

### 🔥 Issue

* Causes unnecessary re-renders
* Breaks React optimization

### ✅ Fix

```js theme={null}
return store.value;
```

***

## **2. Non-stable Snapshots**

React expects:

* Same value → no re-render

If not:

* Infinite loops or excessive renders

***

## **3. Missing Cleanup in `subscribe`**

### ❌

```js theme={null}
function subscribe(cb) {
  listeners.add(cb);
}
```

### 🔥 Issue

* Memory leaks

### ✅

```js theme={null}
return () => listeners.delete(cb);
```

***

## **4. Using it for Internal State**

Wrong usage:

```js theme={null}
// unnecessary
useSyncExternalStore(() => {}, () => state);
```

Use `useState` instead.

***

## **5. Async Snapshot Problems**

### ❌

```js theme={null}
async function getSnapshot() {
  return await fetchData();
}
```

### 🔥 Issue

* Breaks synchronous contract

### ✅

* Snapshot must be **synchronous**

***

## **6. SSR Mismatch Issues**

If `getServerSnapshot` differs from client:

* Hydration warnings

***

# **5. Best Practices**

***

## **1. Keep Snapshot Pure & Stable**

* No side effects
* Return same reference if unchanged

***

## **2. Use Selectors for Performance**

Instead of:

```js theme={null}
const state = useSyncExternalStore(...);
```

Use:

```js theme={null}
const value = useStore(selector);
```

Reduces unnecessary re-renders.

***

## **3. Avoid Overusing It**

Use only when:

* External store exists

Otherwise:

* Prefer `useState`, `useReducer`, or `useContext`

***

## **4. Ensure Subscription Efficiency**

* Avoid re-subscribing unnecessarily
* Keep `subscribe` stable

***

## **5. Handle Server-Side Rendering Properly**

* Always provide `getServerSnapshot` when needed
* Keep server/client values aligned

***

## **6. Prefer Library Abstractions**

In real apps:

* Use libraries built on top of it:

  * Redux (modern)
  * Zustand
  * Jotai

They handle:

* Memoization
* Selectors
* Performance

***

## **7. Debugging Tips**

* Log `getSnapshot` calls → detect excessive renders
* Check reference equality issues
* Validate cleanup logic

***

# **Summary**

`useSyncExternalStore` is a **low-level, concurrency-safe hook** designed to:

* Connect React to external state
* Prevent tearing
* Ensure consistent UI

It is:

* Essential for **state libraries**
* Rarely needed directly in most apps
* Critical for **advanced system design and performance**

***

# **Advanced Conceptual Questions — `useSyncExternalStore` (Senior Level)**

***

# **1. Why was `useSyncExternalStore` introduced instead of improving `useEffect`-based subscriptions?**

### **Answer**

The core issue wasn’t just *subscription*, but **render consistency in concurrent mode**.

### **Problem with `useEffect`**

```js theme={null}
useEffect(() => {
  store.subscribe(() => setState(store.get()));
}, []);
```

* Runs **after render**
* UI may render with **stale data**
* Leads to **tearing** in concurrent rendering

### **Why `useSyncExternalStore` fixes this**

* React reads snapshot **during render**
* Guarantees **consistent data across components**
* Prevents intermediate inconsistent states

### **Key Insight**

React needed:

> A way to read external data *synchronously during render*, not after.

***

# **2. What problem does “tearing” cause, and how does this hook prevent it?**

### **Answer**

### **Tearing Definition**

Different components see **different versions of the same state** in the same render.

### **Example Problem**

```js theme={null}
ComponentA → sees count = 1
ComponentB → sees count = 2
```

### **Why it happens**

* Concurrent rendering splits work
* External state mutates during render

### **How `useSyncExternalStore` solves it**

* React **locks snapshot value**
* Ensures all components read **same version**

### **Internal Mechanism**

* Snapshot read is **consistent per render cycle**
* React re-checks snapshot before commit

***

# **3. Why must `getSnapshot` be synchronous and pure?**

### **Answer**

### **Why synchronous**

React calls it during render:

```js theme={null}
const value = getSnapshot();
```

If async:

* React can't pause rendering
* Breaks rendering guarantees

### **Why pure**

* React may call it multiple times
* Must return same result unless store changes

### ❌ Bad

```js theme={null}
function getSnapshot() {
  return Math.random();
}
```

### 🔥 Issue

* Causes infinite re-renders

### **Key Insight**

> `getSnapshot` must behave like a pure selector.

***

# **4. What happens internally when a store update occurs?**

### **Answer**

### **Flow**

1. Store updates:

```js theme={null}
listeners.forEach(cb => cb());
```

2. React subscriber is triggered
3. React schedules re-render
4. During render:

   * Calls `getSnapshot()`
5. Compares with previous snapshot
6. If changed → re-render commit

### **Important Detail**

React may:

* Re-read snapshot multiple times
* Bail out if unchanged

***

# **5. Why is returning a new object from `getSnapshot` problematic?**

### **Answer**

### ❌ Problem

```js theme={null}
function getSnapshot() {
  return { count: store.value };
}
```

### **Why it breaks**

* New reference every render
* React thinks value changed

### **Result**

* Unnecessary re-renders
* Performance degradation

### ✅ Fix

```js theme={null}
return store.value;
```

### **Advanced Fix (memoized selector)**

```js theme={null}
const cached = {};
function getSnapshot() {
  if (cached.value !== store.value) {
    cached.value = store.value;
  }
  return cached;
}
```

***

# **6. How does `useSyncExternalStore` behave in concurrent rendering?**

### **Answer**

### **Key Guarantee**

* Snapshot consistency across render phases

### **What React does**

* Reads snapshot
* Pauses rendering
* Resumes → re-checks snapshot

### **If changed mid-render**

* React discards work
* Restarts render with new snapshot

### **Why this matters**

Prevents:

* UI inconsistencies
* Partial updates

***

# **7. Why does `useSyncExternalStore` require a `subscribe` function instead of polling?**

### **Answer**

### **Polling Problems**

* Wasteful
* Delayed updates
* CPU overhead

### **Subscription Benefits**

* Push-based updates
* Immediate reactivity
* Efficient

### **Design Decision**

React delegates:

> "Tell me when data changes, I’ll handle rendering."

***

# **8. How does it differ fundamentally from Context API?**

### **Answer**

| Aspect           | Context         | useSyncExternalStore |
| ---------------- | --------------- | -------------------- |
| Ownership        | React           | External             |
| Update trigger   | Provider change | Manual subscription  |
| Concurrency-safe | Yes             | Yes                  |
| Granularity      | Whole tree      | Fine-grained         |

### **Key Insight**

* Context = **React-managed propagation**
* useSyncExternalStore = **external integration**

***

# **9. Why is `getServerSnapshot` needed for SSR?**

### **Answer**

### **Problem**

Server and client must render **same initial state**

### **Without it**

* Hydration mismatch

### **Example**

```js theme={null}
const value = useSyncExternalStore(
  subscribe,
  getSnapshot,
  getServerSnapshot
);
```

### **Why separate function**

* Server environment differs
* No browser APIs

***

# **10. What are the trade-offs of using this hook directly?**

### **Answer**

### **Pros**

* Concurrency-safe
* Precise control
* Minimal abstraction

### **Cons**

* Boilerplate
* Easy to misuse
* No built-in memoization

### **Conclusion**

> Better suited for library authors than app developers

***

# **11. How would you implement a Redux-like store using this hook?**

### **Answer**

```js theme={null}
const store = {
  state: { count: 0 },
  listeners: new Set(),
};

function dispatch(action) {
  store.state = reducer(store.state, action);
  store.listeners.forEach(l => l());
}

function useStore(selector) {
  return useSyncExternalStore(
    (cb) => {
      store.listeners.add(cb);
      return () => store.listeners.delete(cb);
    },
    () => selector(store.state)
  );
}
```

### **Why this works**

* Selector isolates re-renders
* Subscription ensures updates

***

# **12. What happens if `subscribe` is not stable?**

### **Answer**

### ❌ Problem

```js theme={null}
useSyncExternalStore(() => subscribe(cb), getSnapshot);
```

* New function each render
* React re-subscribes

### **Issues**

* Performance hit
* Potential memory leaks

### ✅ Fix

* Define outside component or memoize

***

# **13. How does React detect whether to re-render?**

### **Answer**

* React compares:

```js theme={null}
Object.is(prevSnapshot, nextSnapshot)
```

### **Implication**

* Reference equality matters

### **Optimization Strategy**

* Return primitives or stable references

***

# **14. Can `useSyncExternalStore` replace `useState`? Why or why not?**

### **Answer**

### ❌ No

### **Reason**

* Designed for **external state**
* `useState` is simpler and optimized for internal state

### **Key Difference**

* `useState` → React owns updates
* `useSyncExternalStore` → external ownership

***

# **15. What are real-world use cases where this hook is essential?**

### **Answer**

### **1. State libraries**

* Redux
* Zustand

### **2. Browser APIs**

```js theme={null}
navigator.onLine
window.innerWidth
```

### **3. WebSocket / real-time data**

* External event streams

### **4. Shared state outside React**

* Global caches

***

# **16. Why do modern libraries wrap this hook instead of exposing it directly?**

### **Answer**

### **Problems it solves internally**

* Memoization
* Selectors
* Performance optimizations

### **Example**

Zustand:

```js theme={null}
const count = useStore(state => state.count);
```

### **Why abstraction helps**

* Avoids boilerplate
* Prevents misuse

***

# **17. What happens if the store updates during render?**

### **Answer**

### **Scenario**

* React is rendering
* Store changes mid-render

### **React behavior**

* Detects snapshot mismatch
* Discards render
* Re-renders with new snapshot

### **Why**

Ensures:

> UI always reflects a consistent state

***

# **18. How does this hook support interruptible rendering?**

### **Answer**

### **Concurrent Mode Behavior**

* React can pause rendering
* Resume later

### **Risk**

External state may change meanwhile

### **Solution**

* Re-check snapshot before commit
* Restart if needed

***

# **19. What are subtle memory leak scenarios with this hook?**

### **Answer**

### ❌ Missing cleanup

```js theme={null}
function subscribe(cb) {
  listeners.add(cb);
}
```

### ❌ Multiple subscriptions

* Unstable subscribe function

### **Impact**

* Orphan listeners
* Performance degradation

***

# **Summary Insight**

`useSyncExternalStore` is not just a hook — it's a **contract between React and external state**:

* React controls rendering
* External store controls data
* The hook ensures **consistency, safety, and performance**

***

# **Advanced MCQs — `useSyncExternalStore` (Senior Level)**

***

## **1. What is the primary reason `useSyncExternalStore` reads data during render instead of after render?**

A. To improve performance
B. To avoid unnecessary subscriptions
C. To ensure consistency across concurrent renders
D. To simplify API design

### ✅ **Correct Answer: C**

### **Why**

Reading during render ensures all components see the **same snapshot**, preventing tearing.

### ❌ **Why others are wrong**

* **A**: Performance is secondary, not the core reason
* **B**: Subscription timing is unrelated
* **D**: API simplicity is not the motivation

***

## **2. What happens if `getSnapshot` returns a different value on every call, even if the store hasn’t changed?**

A. React ignores the change
B. Component re-renders infinitely
C. React throws an error
D. No impact

### ✅ **Correct Answer: B**

### **Why**

React uses `Object.is` to compare snapshots → always different → triggers continuous re-renders.

### ❌ **Why others are wrong**

* **A/D**: React does not ignore changes
* **C**: No built-in error thrown

***

## **3. Which scenario can cause tearing without `useSyncExternalStore`?**

A. Multiple components reading local state
B. External store updating during concurrent rendering
C. Using `useEffect` for DOM updates
D. Using Context API

### ✅ **Correct Answer: B**

### **Why**

External mutations during render can cause components to see different values.

### ❌ **Why others are wrong**

* **A**: Local state is controlled by React
* **C**: Not related
* **D**: Context is already concurrency-safe

***

## **4. Why must `subscribe` return a cleanup function?**

A. To satisfy React Hook rules
B. To avoid stale closures
C. To prevent memory leaks
D. To improve rendering speed

### ✅ **Correct Answer: C**

### **Why**

Without cleanup, listeners accumulate → memory leaks.

### ❌ **Why others are wrong**

* **A**: Not a rule requirement
* **B**: Not the main issue
* **D**: Not directly related

***

## **5. What happens if `subscribe` is re-created on every render?**

A. No effect
B. React re-subscribes each time
C. React throws an error
D. Snapshot becomes stale

### ✅ **Correct Answer: B**

### **Why**

New function reference → React thinks subscription changed → re-subscribes.

### ❌ **Why others are wrong**

* **A**: Incorrect
* **C**: No error
* **D**: Snapshot unaffected

***

## **6. Why is async logic inside `getSnapshot` problematic?**

A. It slows down rendering
B. React cannot await during render
C. It breaks subscription logic
D. It causes memory leaks

### ✅ **Correct Answer: B**

### **Why**

React rendering must be synchronous → async breaks rendering model.

### ❌ **Why others are wrong**

* **A**: Not the main issue
* **C/D**: Not directly caused

***

## **7. How does React decide whether to re-render a component using this hook?**

A. Deep comparison
B. Shallow comparison
C. Reference equality using `Object.is`
D. Custom comparator

### ✅ **Correct Answer: C**

### **Why**

React uses `Object.is(prev, next)`.

### ❌ **Why others are wrong**

* **A/B**: No deep/shallow diffing
* **D**: No custom comparator

***

## **8. What is the risk of returning a new object from `getSnapshot`?**

A. Memory leak
B. Missed updates
C. Unnecessary re-renders
D. Subscription failure

### ✅ **Correct Answer: C**

### **Why**

New reference every time → React thinks value changed.

### ❌ **Why others are wrong**

* **A**: Not directly
* **B**: Opposite problem
* **D**: No effect

***

## **9. During concurrent rendering, what does React do if snapshot changes mid-render?**

A. Ignores it
B. Commits partial UI
C. Restarts rendering
D. Throws error

### ✅ **Correct Answer: C**

### **Why**

Ensures consistency → discards and re-renders.

### ❌ **Why others are wrong**

* **A/B/D**: Break correctness guarantees

***

## **10. Why is `getServerSnapshot` required in SSR?**

A. To improve performance
B. To avoid hydration mismatch
C. To enable subscriptions on server
D. To reduce bundle size

### ✅ **Correct Answer: B**

### **Why**

Server and client must match initial render.

### ❌ **Why others are wrong**

* **A/D**: Not related
* **C**: Server doesn't subscribe

***

## **11. Which use case is MOST appropriate for `useSyncExternalStore`?**

A. Form input state
B. Local UI toggles
C. Global state outside React
D. Component animation

### ✅ **Correct Answer: C**

### **Why**

Designed for external state integration.

### ❌ **Why others are wrong**

* **A/B/D**: Better handled by other hooks

***

## **12. What happens if `getSnapshot` mutates the store?**

A. Works fine
B. Causes inconsistent UI
C. Improves performance
D. No effect

### ✅ **Correct Answer: B**

### **Why**

Violates purity → unpredictable behavior.

***

## **13. Why do libraries like Zustand wrap `useSyncExternalStore`?**

A. To reduce bundle size
B. To add memoization and selectors
C. To remove subscriptions
D. To avoid React re-renders

### ✅ **Correct Answer: B**

### **Why**

They abstract complexity and optimize rendering.

***

## **14. What is the biggest limitation of this hook?**

A. Cannot handle async data
B. Requires boilerplate
C. Only works in SSR
D. Cannot re-render components

### ✅ **Correct Answer: B**

### **Why**

Manual setup makes it verbose and error-prone.

***

## **15. Why is it unsafe to use `useEffect` for external store subscriptions in concurrent mode?**

A. It runs too often
B. It runs after render, causing stale UI
C. It blocks rendering
D. It doesn't support cleanup

### ✅ **Correct Answer: B**

### **Why**

UI may render with outdated state before effect runs.

***

## **16. What happens if two components subscribe to the same store?**

A. Only one updates
B. Both update independently but consistently
C. React throws error
D. Only parent updates

### ✅ **Correct Answer: B**

### **Why**

Each subscribes independently but reads same snapshot.

***

## **17. Which pattern improves performance when using this hook?**

A. Returning full state
B. Using selectors
C. Using async snapshot
D. Removing cleanup

### ✅ **Correct Answer: B**

### **Why**

Selectors reduce unnecessary re-renders.

***

## **18. Why does React call `getSnapshot` multiple times?**

A. Debugging
B. Ensuring consistency during render phases
C. Performance testing
D. Subscription validation

### ✅ **Correct Answer: B**

### **Why**

React verifies snapshot stability across phases.

***

## **19. What is a subtle bug when using closures inside `subscribe`?**

A. Memory leak
B. Stale data references
C. Infinite loop
D. No re-render

### ✅ **Correct Answer: B**

### **Why**

Closures may capture outdated state.

***

## **20. What distinguishes `useSyncExternalStore` from `useReducer` fundamentally?**

A. Performance
B. Syntax
C. Ownership of state
D. Number of re-renders

### ✅ **Correct Answer: C**

### **Why**

* `useReducer` → React owns state
* `useSyncExternalStore` → external store owns state

***

# **Final Insight**

These questions target the **real mastery layer**:

* Understanding **React internals**
* Recognizing **concurrency constraints**
* Avoiding **subtle production bugs**
* Designing **scalable state systems**

***

# **`useSyncExternalStore` — Advanced Coding Problems (Senior Level)**

***

# **1. Build a Minimal External Store (Core Primitive)**

### **Problem**

Implement a simple external store and connect it to React using `useSyncExternalStore`.

### **Constraints**

* Store must support `getState`, `setState`, and `subscribe`
* Multiple components should stay in sync

### **Expected Behavior**

* Updating state re-renders all subscribers
* No unnecessary re-renders

### **Edge Cases**

* Multiple updates in quick succession
* Unmount cleanup

***

### **Solution**

```js theme={null}
// store.js
let state = { count: 0 };
const listeners = new Set();

export function setState(updater) {
  state = typeof updater === "function" ? updater(state) : updater;
  listeners.forEach((l) => l());
}

export function getSnapshot() {
  return state;
}

export function subscribe(cb) {
  listeners.add(cb);
  return () => listeners.delete(cb);
}
```

```js theme={null}
// useStore.js
import { useSyncExternalStore } from "react";

export function useStore() {
  return useSyncExternalStore(subscribe, getSnapshot);
}
```

### **Explanation**

* Core pattern: **subscribe + snapshot**
* React handles consistency

***

# **2. Selector-Based Store Optimization**

### **Problem**

Implement a `useStore(selector)` to avoid unnecessary re-renders.

### **Constraints**

* Only re-render when selected slice changes

### **Expected Behavior**

* Component re-renders only when selected value changes

***

### **Solution**

```js theme={null}
export function useStore(selector) {
  return useSyncExternalStore(
    subscribe,
    () => selector(getSnapshot())
  );
}
```

### **Edge Case**

* Selector returns new object → causes re-renders

### **Fix**

Memoize selector output if needed.

***

# **3. Online/Offline Status Tracker**

### **Problem**

Track browser online/offline state using `useSyncExternalStore`.

### **Constraints**

* Must use `window` events

***

### **Solution**

```js theme={null}
function subscribe(cb) {
  window.addEventListener("online", cb);
  window.addEventListener("offline", cb);
  return () => {
    window.removeEventListener("online", cb);
    window.removeEventListener("offline", cb);
  };
}

function getSnapshot() {
  return navigator.onLine;
}
```

***

# **4. Window Resize Hook**

### **Problem**

Create `useWindowWidth()` using external store pattern.

***

### **Solution**

```js theme={null}
function subscribe(cb) {
  window.addEventListener("resize", cb);
  return () => window.removeEventListener("resize", cb);
}

function getSnapshot() {
  return window.innerWidth;
}
```

***

# **5. Prevent Unnecessary Re-renders**

### **Problem**

Fix performance issue where component re-renders on every update.

### ❌ Buggy

```js theme={null}
function getSnapshot() {
  return { count: store.count };
}
```

***

### **Solution**

```js theme={null}
function getSnapshot() {
  return store.count;
}
```

### **Explanation**

* Avoid new object references

***

# **6. Build a Global Theme Store**

### **Problem**

Create a theme system (`light/dark`) using external store.

***

### **Expected Behavior**

* All components update instantly

***

### **Solution**

```js theme={null}
let theme = "light";
const listeners = new Set();

export function setTheme(t) {
  theme = t;
  listeners.forEach(l => l());
}

export function useTheme() {
  return useSyncExternalStore(
    (cb) => {
      listeners.add(cb);
      return () => listeners.delete(cb);
    },
    () => theme
  );
}
```

***

# **7. Implement Debounced Store Updates**

### **Problem**

Prevent rapid updates from causing too many renders.

***

### **Solution**

```js theme={null}
let timeout;

function setStateDebounced(value) {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    state = value;
    listeners.forEach(l => l());
  }, 300);
}
```

***

# **8. Multi-Tab Sync via localStorage**

### **Problem**

Sync state across browser tabs.

***

### **Solution**

```js theme={null}
function subscribe(cb) {
  window.addEventListener("storage", cb);
  return () => window.removeEventListener("storage", cb);
}

function getSnapshot() {
  return localStorage.getItem("data");
}
```

***

# **Edge Case**

* Same tab updates won’t trigger event → manually notify

***

# **9. Build a Redux-like Store with Reducer**

### **Problem**

Implement dispatch-based store.

***

### **Solution**

```js theme={null}
function dispatch(action) {
  state = reducer(state, action);
  listeners.forEach(l => l());
}
```

***

### **Explanation**

* Mirrors Redux internal design

***

# **10. Detect and Fix Memory Leak**

### **Problem**

Subscribers are not removed.

***

### **Solution**

```js theme={null}
return () => listeners.delete(cb);
```

***

### **Explanation**

* Without cleanup → leak

***

# **11. Implement Time-Travel Debugging**

### **Problem**

Track history of state changes.

***

### **Solution**

```js theme={null}
let history = [];
function setState(newState) {
  history.push(state);
  state = newState;
  listeners.forEach(l => l());
}
```

***

### **Edge Case**

* Limit history size

***

# **12. Build a WebSocket Store**

### **Problem**

Sync UI with WebSocket messages.

***

### **Solution**

```js theme={null}
const socket = new WebSocket("url");

function subscribe(cb) {
  socket.onmessage = () => cb();
  return () => (socket.onmessage = null);
}

function getSnapshot() {
  return latestMessage;
}
```

***

# **13. Prevent Stale Closures**

### **Problem**

Callback captures old state.

***

### **Fix**

* Always read from store inside `getSnapshot`

***

# **14. SSR-Safe Store**

### **Problem**

Avoid hydration mismatch.

***

### **Solution**

```js theme={null}
function getServerSnapshot() {
  return initialValue;
}
```

***

# **15. Build a Feature Flag System**

### **Problem**

Toggle features globally.

***

### **Solution**

```js theme={null}
const flags = { newUI: false };
```

Use selector:

```js theme={null}
useStore(s => s.newUI);
```

***

# **16. Partial Subscription System**

### **Problem**

Subscribe only to specific keys.

***

### **Solution**

```js theme={null}
function useStore(key) {
  return useSyncExternalStore(
    subscribe,
    () => store[key]
  );
}
```

***

# **17. Batched Updates Handling**

### **Problem**

Multiple updates trigger multiple renders.

***

### **Solution**

* Batch updates before notifying listeners

```js theme={null}
function batch(fn) {
  fn();
  listeners.forEach(l => l());
}
```

***

# **18. Error Handling in Store**

### **Problem**

Store update throws error.

***

### **Solution**

```js theme={null}
try {
  setState(newState);
} catch (e) {
  console.error(e);
}
```

***

# **19. Derived State Computation**

### **Problem**

Compute derived value efficiently.

***

### **Solution**

```js theme={null}
useStore(state => state.items.length);
```

***

### **Explanation**

* Avoid computing inside component repeatedly

***

# **20. Build a Notification System**

### **Problem**

Global notification queue.

***

### **Solution**

```js theme={null}
let notifications = [];

function addNotification(msg) {
  notifications.push(msg);
  listeners.forEach(l => l());
}
```

***

### **Edge Cases**

* Auto-dismiss logic
* Queue overflow

***

# **Final Insight**

These problems simulate **real engineering challenges**:

* Designing state systems
* Handling concurrency
* Preventing subtle bugs
* Optimizing rendering

***

# **`useSyncExternalStore` — Advanced Debugging Challenges (Senior Code Review)**

***

# **1. Infinite Re-render Due to Unstable Snapshot**

### ❌ **Buggy Code**

```js theme={null}
function getSnapshot() {
  return { count: store.count };
}
```

### **What’s Wrong**

Returns a **new object on every call**

### **Why It Happens**

React compares using `Object.is` → new reference each time → always “changed”

### ✅ **Fix**

```js theme={null}
function getSnapshot() {
  return store.count;
}
```

### **Best Practice**

* Always return **stable references**
* Avoid creating objects inside `getSnapshot`

***

# **2. Memory Leak Due to Missing Cleanup**

### ❌

```js theme={null}
function subscribe(cb) {
  listeners.add(cb);
}
```

### **What’s Wrong**

No cleanup → listeners accumulate

### **Why**

Component unmount doesn’t remove subscription

### ✅ **Fix**

```js theme={null}
function subscribe(cb) {
  listeners.add(cb);
  return () => listeners.delete(cb);
}
```

### **Best Practice**

* Always return cleanup from `subscribe`

***

# **3. Re-subscription on Every Render**

### ❌

```js theme={null}
function Component() {
  const value = useSyncExternalStore(
    (cb) => subscribe(cb),
    getSnapshot
  );
}
```

### **What’s Wrong**

Inline function → new reference each render

### **Why**

React treats it as a new subscription

### ✅ **Fix**

```js theme={null}
const stableSubscribe = (cb) => subscribe(cb);

function Component() {
  const value = useSyncExternalStore(stableSubscribe, getSnapshot);
}
```

### **Best Practice**

* Keep `subscribe` stable

***

# **4. Async Snapshot Breaking Render**

### ❌

```js theme={null}
async function getSnapshot() {
  return await fetchData();
}
```

### **What’s Wrong**

Async function inside render

### **Why**

React cannot await during render

### ✅ **Fix**

```js theme={null}
function getSnapshot() {
  return cachedData;
}
```

### **Best Practice**

* Fetch data outside, store synchronously

***

# **5. Stale Closure in Subscription**

### ❌

```js theme={null}
let value = 0;

function subscribe(cb) {
  setInterval(() => {
    cb(value);
  }, 1000);
}
```

### **What’s Wrong**

Callback uses stale captured value

### **Why**

Closure captures old `value`

### ✅ **Fix**

```js theme={null}
function subscribe(cb) {
  const id = setInterval(() => {
    cb();
  }, 1000);
  return () => clearInterval(id);
}
```

### **Best Practice**

* Always read latest state via `getSnapshot`

***

# **6. Unnecessary Full-State Re-renders**

### ❌

```js theme={null}
const state = useSyncExternalStore(subscribe, getSnapshot);
```

### **What’s Wrong**

Whole state triggers re-render even for unrelated changes

### ✅ **Fix**

```js theme={null}
const count = useSyncExternalStore(
  subscribe,
  () => getSnapshot().count
);
```

### **Best Practice**

* Use **selectors**

***

# **7. Missing SSR Snapshot**

### ❌

```js theme={null}
useSyncExternalStore(subscribe, getSnapshot);
```

### **What’s Wrong**

No `getServerSnapshot`

### **Why**

Server/client mismatch → hydration issues

### ✅ **Fix**

```js theme={null}
useSyncExternalStore(subscribe, getSnapshot, () => initialValue);
```

### **Best Practice**

* Always handle SSR explicitly

***

# **8. Store Mutation Inside Snapshot**

### ❌

```js theme={null}
function getSnapshot() {
  store.count++;
  return store.count;
}
```

### **What’s Wrong**

Side effect inside snapshot

### **Why**

Breaks purity → unpredictable renders

### ✅ **Fix**

```js theme={null}
function getSnapshot() {
  return store.count;
}
```

### **Best Practice**

* `getSnapshot` must be pure

***

# **9. Duplicate Subscriptions**

### ❌

```js theme={null}
function subscribe(cb) {
  listeners.add(cb);
  listeners.add(cb);
}
```

### **What’s Wrong**

Same listener added twice

### **Why**

Causes duplicate updates

### ✅ **Fix**

```js theme={null}
listeners.add(cb); // Set prevents duplicates
```

### **Best Practice**

* Use `Set`, not arrays

***

# **10. Missed Updates Due to Conditional Subscription**

### ❌

```js theme={null}
if (enabled) {
  useSyncExternalStore(subscribe, getSnapshot);
}
```

### **What’s Wrong**

Hook conditionally called

### **Why**

Violates hook rules

### ✅ **Fix**

```js theme={null}
const value = useSyncExternalStore(
  enabled ? subscribe : () => () => {},
  getSnapshot
);
```

### **Best Practice**

* Never conditionally call hooks

***

# **11. Over-Notifying Listeners**

### ❌

```js theme={null}
function setState(newState) {
  state = newState;
  listeners.forEach(l => l());
  listeners.forEach(l => l());
}
```

### **What’s Wrong**

Double notification

### **Why**

Triggers unnecessary re-renders

### ✅ **Fix**

```js theme={null}
listeners.forEach(l => l());
```

### **Best Practice**

* Notify once per update

***

# **12. Store Reference Mutation**

### ❌

```js theme={null}
state.user.name = "John";
```

### **What’s Wrong**

Mutating object directly

### **Why**

Reference doesn’t change → React may skip updates

### ✅ **Fix**

```js theme={null}
state = {
  ...state,
  user: { ...state.user, name: "John" }
};
```

### **Best Practice**

* Always use immutable updates

***

# **13. Subscription Not Triggered**

### ❌

```js theme={null}
function setState(newState) {
  state = newState;
}
```

### **What’s Wrong**

Listeners not notified

### **Why**

React never re-renders

### ✅ **Fix**

```js theme={null}
listeners.forEach(l => l());
```

***

# **14. Event Listener Leak**

### ❌

```js theme={null}
function subscribe(cb) {
  window.addEventListener("resize", cb);
}
```

### **What’s Wrong**

No cleanup

### ✅ **Fix**

```js theme={null}
return () => window.removeEventListener("resize", cb);
```

***

# **15. Selector Returning New Object**

### ❌

```js theme={null}
useStore(state => ({ count: state.count }));
```

### **What’s Wrong**

New object every time

### **Fix**

```js theme={null}
useStore(state => state.count);
```

### **Best Practice**

* Keep selectors returning primitives or memoized values

***

# **16. Race Condition in External Updates**

### ❌

```js theme={null}
setTimeout(() => {
  state = newState;
}, 100);
```

### **What’s Wrong**

Delayed updates may override newer ones

### **Fix**

```js theme={null}
setState(prev => merge(prev, newState));
```

### **Best Practice**

* Use functional updates

***

# **17. Using Hook for Internal State**

### ❌

```js theme={null}
useSyncExternalStore(() => {}, () => localState);
```

### **What’s Wrong**

Misuse for internal state

### **Fix**

```js theme={null}
useState()
```

***

# **18. Ignoring Snapshot Equality**

### ❌

```js theme={null}
return deepClone(state);
```

### **What’s Wrong**

Breaks reference equality

### **Fix**

Return same object if unchanged

***

# **19. Subscription Triggering Too Often**

### ❌

```js theme={null}
setInterval(() => listeners.forEach(l => l()), 16);
```

### **What’s Wrong**

60 FPS updates → performance issue

### **Fix**

* Throttle or debounce updates

***

# **Final Insight**

These bugs reflect **real production failures**:

* Silent performance degradation
* Infinite re-renders
* Hydration mismatches
* Memory leaks

Mastering these patterns means you understand:

> Not just *how* `useSyncExternalStore` works — but *how it fails in real systems*

***

# **`useSyncExternalStore` — Real-World Machine Coding Problems (Senior Architect Level)**

These are **production-grade problems** focused on:

* External state management
* Real-time systems
* Performance & scalability
* React concurrency safety

***

# **1. Real-Time Stock Price Dashboard**

### **Requirements**

* Display live stock prices (multiple symbols)
* Prices update via WebSocket
* Multiple components subscribe to different stocks

### **UI Behavior**

* Table of stocks
* Price updates smoothly (no flicker)

### **State/Data Flow**

* External store holds `{ symbol → price }`
* Components subscribe using selectors

### **Edge Cases**

* Rapid updates (100+/sec)
* Disconnected socket

### **Performance**

* Avoid re-rendering entire table

### **Architecture**

* WebSocket → store → `useSyncExternalStore` → selector

### **Approach**

1. Create store with symbol map
2. WebSocket updates store
3. Use selector per row
4. Memoize row components

***

# **2. Multi-Tab Cart Sync (E-commerce)**

### **Requirements**

* Cart updates reflect across browser tabs

### **UI Behavior**

* Add/remove items updates instantly everywhere

### **State Flow**

* `localStorage` as source of truth

### **Edge Cases**

* Same-tab updates don’t trigger `storage` event

### **Performance**

* Debounce writes

### **Architecture**

* localStorage + manual notify

### **Approach**

1. Write to localStorage
2. Listen to `storage` event
3. Manually notify same tab

***

# **3. Feature Flag System (Remote Config)**

### **Requirements**

* Toggle features dynamically from server

### **UI Behavior**

* Feature appears/disappears instantly

### **State Flow**

* External config store

### **Edge Cases**

* Partial config load
* Fallback values

### **Performance**

* Only affected components re-render

### **Architecture**

* Store + selector-based hook

***

# **4. Global Notification System**

### **Requirements**

* Push notifications globally
* Auto-dismiss after timeout

### **UI**

* Toast stack

### **Edge Cases**

* Duplicate notifications
* Rapid bursts

### **Performance**

* Batch updates

### **Approach**

* Queue in store
* Timeout cleanup

***

# **5. Online/Offline-Aware UI**

### **Requirements**

* Detect network status
* Show offline banner

### **State Flow**

* Browser API (`navigator.onLine`)

### **Edge Cases**

* Flaky connections

### **Architecture**

* Event-based subscription

***

# **6. Collaborative Document Presence System**

### **Requirements**

* Show active users in real-time

### **UI**

* Avatars updating live

### **State Flow**

* WebSocket presence updates

### **Edge Cases**

* User disconnects unexpectedly

### **Performance**

* Frequent updates → optimize with selectors

***

# **7. Window Resize + Layout Engine**

### **Requirements**

* Responsive layout reacting to window size

### **UI**

* Dynamic grid

### **Edge Cases**

* Rapid resize events

### **Performance**

* Throttle resize updates

***

# **8. Dark Mode System (System + User Preference)**

### **Requirements**

* Respect system preference + manual override

### **State Flow**

* `matchMedia` + localStorage

### **Edge Cases**

* System theme changes mid-session

***

# **9. Real-Time Chat Message Stream**

### **Requirements**

* Incoming messages via WebSocket
* Multiple components (list, unread counter)

### **Edge Cases**

* Message ordering
* Duplicates

### **Performance**

* Virtualized list

***

# **10. Time-Based Countdown System**

### **Requirements**

* Multiple timers updating every second

### **UI**

* Countdown display

### **Edge Cases**

* Tab inactive

### **Performance**

* Single interval source

***

# **11. Analytics Dashboard with Live Metrics**

### **Requirements**

* Multiple widgets showing metrics

### **State Flow**

* External polling service

### **Edge Cases**

* Partial failures

### **Performance**

* Selective subscriptions

***

# **12. Form State Shared Across Components**

### **Requirements**

* Multi-step form with shared state

### **UI**

* Stepper

### **Edge Cases**

* Partial updates
* Reset flow

***

# **13. Global Keyboard Shortcut Manager**

### **Requirements**

* Register shortcuts dynamically

### **UI**

* Trigger actions globally

### **Edge Cases**

* Conflicting shortcuts

***

# **14. Media Player State Sync**

### **Requirements**

* Sync play/pause across components

### **State Flow**

* External media state

### **Edge Cases**

* Playback drift

***

# **15. Undo/Redo System (Time Travel)**

### **Requirements**

* Maintain history stack

### **Edge Cases**

* Memory limits

### **Performance**

* Limit history size

***

# **16. Infinite Scroll Feed with External Cache**

### **Requirements**

* Cache pages globally

### **UI**

* Scroll-based loading

### **Edge Cases**

* Duplicate fetches

***

# **17. Authentication State Manager**

### **Requirements**

* Sync auth state across app

### **Edge Cases**

* Token expiry
* Multi-tab logout

***

# **18. Drag-and-Drop Global State**

### **Requirements**

* Track drag state globally

### **UI**

* Cross-component drag feedback

### **Edge Cases**

* Drop outside zone

***

# **19. Real-Time Voting System**

### **Requirements**

* Live vote counts

### **Edge Cases**

* Race conditions

### **Performance**

* High-frequency updates

***

# **20. Shared Web Worker State Manager**

### **Requirements**

* Use Web Worker as source of truth

### **State Flow**

* Worker → main thread → store

### **Edge Cases**

* Worker crash

***

# **Final Architectural Insight**

Across all problems, the pattern is:

```
External Source (WebSocket / API / Browser)
        ↓
   External Store
        ↓
useSyncExternalStore (subscription layer)
        ↓
   React Components (selectors)
```

***

# **What These Problems Test**

* System design thinking
* React concurrency awareness
* Performance optimization
* Real-world state modeling
* Debugging edge cases

***

# **Senior-Level Interview Questions — `useSyncExternalStore`**

***

## **1. When would you choose `useSyncExternalStore` over Context or `useReducer`?**

### **Follow-up**

* What trade-offs are you accepting?
* How would your decision change under heavy real-time updates?

### ✅ **Strong Answer**

Use `useSyncExternalStore` when:

* State exists **outside React**
* Need **fine-grained subscriptions**
* Avoid **context-wide re-renders**

Example: WebSocket-driven dashboard

**Trade-off:**

* More boilerplate vs better performance control

### ❌ **Weak Answer**

“Whenever I need global state”

👉 Fails because it ignores **ownership of state** and **render granularity**

***

## **2. Explain tearing and how React prevents it using this hook**

### **Follow-up**

* Can tearing still happen? When?

### ✅ **Strong Answer**

Tearing occurs when:

* Different components read **different snapshots**

React prevents it by:

* Reading snapshot during render
* Re-validating before commit
* Restarting render if needed

### ❌ **Weak Answer**

“It keeps data in sync”

👉 Too vague, no understanding of concurrency

***

## **3. Why must `getSnapshot` be pure and synchronous?**

### **Follow-up**

* What breaks if it isn’t?

### ✅ **Strong Answer**

* React calls it during render → must be synchronous
* Must be pure → React may call multiple times
* Non-pure leads to inconsistent UI or infinite loops

### ❌ **Weak Answer**

“Because React requires it”

👉 No reasoning

***

## **4. Design a real-time stock system using this hook**

### **Follow-up**

* How do you prevent unnecessary re-renders?
* How do you handle 1000 updates/sec?

### ✅ **Strong Answer**

* External store keyed by symbol
* Selector-based subscriptions
* Throttle updates or batch notifications
* Memoized components

### ❌ **Weak Answer**

“I’ll store everything in state”

👉 Misses external store pattern entirely

***

## **5. What happens if `subscribe` is unstable?**

### **Follow-up**

* How would you detect this in production?

### ✅ **Strong Answer**

* Causes re-subscription every render
* Leads to performance issues and leaks
* Detect via profiling or logs

### ❌ **Weak Answer**

“It might re-render more”

👉 Doesn’t understand subscription lifecycle

***

## **6. How does React decide whether to re-render?**

### **Follow-up**

* How can you optimize this?

### ✅ **Strong Answer**

* Uses `Object.is` on snapshot
* Optimize by:

  * Returning primitives
  * Memoizing selectors

### ❌ **Weak Answer**

“React compares values”

👉 Lacks precision

***

## **7. Why do libraries like Zustand wrap this hook?**

### **Follow-up**

* What problems do they solve?

### ✅ **Strong Answer**

* Add selector memoization
* Avoid unnecessary renders
* Simplify API

### ❌ **Weak Answer**

“To make it easier”

👉 Not deep enough

***

## **8. How would you debug excessive re-renders in a store-based app?**

### **Follow-up**

* What tools or techniques would you use?

### ✅ **Strong Answer**

* Log `getSnapshot` calls
* Check reference equality
* Inspect selectors
* Use React DevTools Profiler

### ❌ **Weak Answer**

“I’d console.log”

👉 Too shallow

***

## **9. What are the risks of returning derived objects in `getSnapshot`?**

### **Follow-up**

* How would you fix it?

### ✅ **Strong Answer**

* New reference every time → re-renders
* Fix with memoization or return primitive

### ❌ **Weak Answer**

“It may slow things down”

👉 Doesn’t explain mechanism

***

## **10. How would you handle SSR with external stores?**

### **Follow-up**

* What causes hydration mismatches?

### ✅ **Strong Answer**

* Use `getServerSnapshot`
* Ensure same initial value server/client

### ❌ **Weak Answer**

“SSR just works”

👉 Incorrect assumption

***

## **11. Can you use this hook for async data fetching?**

### **Follow-up**

* What’s the correct pattern?

### ✅ **Strong Answer**

* No, snapshot must be sync
* Fetch externally, cache result, then expose

### ❌ **Weak Answer**

“Yes, just await inside”

👉 Breaks React model

***

## **12. Design a multi-tab sync system**

### **Follow-up**

* Why doesn’t `storage` event fire in same tab?

### ✅ **Strong Answer**

* Use `localStorage`
* Listen to `storage` event
* Manually notify same tab

### ❌ **Weak Answer**

“I’ll use useEffect”

👉 Doesn’t solve cross-tab sync

***

## **13. What happens if store updates during render?**

### **Follow-up**

* Why is this safe?

### ✅ **Strong Answer**

* React detects mismatch
* Discards render
* Re-renders

### ❌ **Weak Answer**

“It updates later”

👉 Incorrect mental model

***

## **14. Compare `useSyncExternalStore` vs Context for performance**

### **Follow-up**

* When does Context become a bottleneck?

### ✅ **Strong Answer**

* Context re-renders entire subtree
* External store allows selective updates

### ❌ **Weak Answer**

“Context is slower”

👉 Oversimplified

***

## **15. How would you implement undo/redo using this hook?**

### **Follow-up**

* How do you limit memory usage?

### ✅ **Strong Answer**

* Maintain history stack
* Limit size
* Notify listeners on change

### ❌ **Weak Answer**

“Store previous state”

👉 Lacks structure

***

## **16. What are common memory leak scenarios?**

### **Follow-up**

* How do you prevent them?

### ✅ **Strong Answer**

* Missing cleanup
* Re-subscribing unnecessarily
* Fix with proper unsubscribe

### ❌ **Weak Answer**

“React handles memory”

👉 Incorrect

***

## **17. How do you handle high-frequency updates efficiently?**

### **Follow-up**

* When would you drop updates?

### ✅ **Strong Answer**

* Throttle/debounce
* Batch updates
* Prioritize UI responsiveness

### ❌ **Weak Answer**

“React will optimize”

👉 Wrong assumption

***

## **18. How does this hook enable concurrent rendering safety?**

### **Follow-up**

* What would break without it?

### ✅ **Strong Answer**

* Snapshot consistency
* Re-validation before commit
* Prevents tearing

### ❌ **Weak Answer**

“It works with React 18”

👉 Too shallow

***

## **19. What is a subtle bug with selectors?**

### **Follow-up**

* How do you fix it?

### ✅ **Strong Answer**

* Returning new objects → re-renders
* Fix via memoization or primitives

### ❌ **Weak Answer**

“Selectors are fine”

👉 Misses nuance

***

## **20. How would you design a scalable external store architecture?**

### **Follow-up**

* How do you modularize it?

### ✅ **Strong Answer**

* Split stores by domain
* Use selectors
* Normalize state
* Avoid monolithic store

### ❌ **Weak Answer**

“One global store”

👉 Doesn’t scale

***

## **21. When is this hook a bad choice?**

### **Follow-up**

* What would you use instead?

### ✅ **Strong Answer**

* Local UI state → useState
* Simple global state → Context

### ❌ **Weak Answer**

“Always use it”

👉 Misuse

***

## **22. How would you test code using this hook?**

### **Follow-up**

* How do you mock external store?

### ✅ **Strong Answer**

* Mock subscribe + snapshot
* Control state manually
* Assert re-renders

### ❌ **Weak Answer**

“Test UI only”

👉 Ignores state logic

***

# **Final Interview Insight**

These questions evaluate whether a candidate:

* Understands **React concurrency deeply**
* Can **design scalable state systems**
* Anticipates **real-world failures**
* Makes **trade-off-driven decisions**

***