50+ Advanced Mid-Level React Interview Questions (2026)

// Example of Profiler usage
import { Profiler } from 'react';

function App() {
  const onRender = (id, phase, actualDuration, baseDuration, startTime, commitTime) => {
    console.log({
      id,
      phase,
      actualDuration,
      baseDuration,
      startTime,
      commitTime
    });
  };

  return (
    <Profiler id="App" onRender={onRender}>
      <YourComponent />
    </Profiler>
  );
}

// React.memo - Component memoization
const MemoizedComponent = React.memo(Component, (prevProps, nextProps) => {
  return prevProps.value === nextProps.value;
});

// useMemo - Value memoization
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

// useCallback - Function memoization
const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

import { useVirtualizer } from '@tanstack/react-virtual';

function VirtualList({ items }) {
  const parentRef = useRef();
  
  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 50,
    overscan: 5,
  });

  return (
    <div ref={parentRef} style={{ height: '400px', overflow: 'auto' }}>
      <div style={{ height: `${virtualizer.getTotalSize()}px`, position: 'relative' }}>
        {virtualizer.getVirtualItems().map(virtualItem => (
          <div
            key={virtualItem.key}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              height: `${virtualItem.size}px`,
              transform: `translateY(${virtualItem.start}px)`,
            }}
          >
            {items[virtualItem.index]}
          </div>
        ))}
      </div>
    </div>
  );
}

// Dynamic imports with React.lazy
const LazyComponent = React.lazy(() => import('./LazyComponent'));

// Route-based splitting
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));

// Component-based splitting
const HeavyFeature = React.lazy(() => import('./HeavyFeature'));

// Library splitting using import()
const loadLibrary = async () => {
  const module = await import('heavy-library');
  return module.default;
};

// Custom useDebounce hook
function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

// Custom useThrottle hook
function useThrottle(value, limit) {
  const [throttledValue, setThrottledValue] = useState(value);
  const lastRan = useRef(Date.now());

  useEffect(() => {
    const handler = setTimeout(() => {
      if (Date.now() - lastRan.current >= limit) {
        setThrottledValue(value);
        lastRan.current = Date.now();
      }
    }, limit - (Date.now() - lastRan.current));

    return () => {
      clearTimeout(handler);
    };
  }, [value, limit]);

  return throttledValue;
}

function useReducerWithMiddleware(reducer, initialState, middlewares = []) {
  const [state, setState] = useState(initialState);
  const stateRef = useRef(state);

  const dispatch = useCallback(async (action) => {
    // Run middleware before reducer
    let currentAction = action;
    
    for (const middleware of middlewares) {
      currentAction = await middleware(currentAction, stateRef.current);
      if (!currentAction) return; // Middleware can stop propagation
    }

    // Apply reducer
    const newState = reducer(stateRef.current, currentAction);
    stateRef.current = newState;
    setState(newState);
  }, [reducer]);

  return [state, dispatch];
}

// Example middleware
const loggerMiddleware = (action, state) => {
  console.log('Dispatching:', action, 'Current state:', state);
  return action;
};

const thunkMiddleware = (action, state) => {
  if (typeof action === 'function') {
    return action(dispatch, () => state);
  }
  return action;
};

// Traditional Redux approach
const fetchData = () => async (dispatch) => {
  dispatch({ type: 'FETCH_START' });
  try {
    const response = await api.getData();
    dispatch({ type: 'FETCH_SUCCESS', payload: response });
  } catch (error) {
    dispatch({ type: 'FETCH_ERROR', error });
  }
};

// React Query approach
const { data, isLoading, error } = useQuery({
  queryKey: ['data'],
  queryFn: () => api.getData(),
  staleTime: 5 * 60 * 1000, // 5 minutes
  cacheTime: 10 * 60 * 1000, // 10 minutes
});

const StoreContext = React.createContext();
const StoreDispatchContext = React.createContext();

function StoreProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);
  
  // Memoize context value to prevent unnecessary re-renders
  const stateContextValue = useMemo(() => state, [state]);
  
  return (
    <StoreContext.Provider value={stateContextValue}>
      <StoreDispatchContext.Provider value={dispatch}>
        {children}
      </StoreDispatchContext.Provider>
    </StoreContext.Provider>
  );
}

// Custom hooks for optimized consumption
function useStore(selector) {
  const state = useContext(StoreContext);
  
  return useMemo(() => selector(state), [state, selector]);
}

function useDispatch() {
  return useContext(StoreDispatchContext);
}

// Usage with selector pattern
const user = useStore(state => state.user);
const dispatch = useDispatch();

// useState - Good for simple, independent state
const [count, setCount] = useState(0);
const [name, setName] = useState('');

// useReducer - Better for complex, interrelated state
const initialState = { count: 0, user: null, loading: false };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    case 'setUser':
      return { ...state, user: action.payload };
    case 'setLoading':
      return { ...state, loading: action.payload };
    default:
      return state;
  }
}

// Using Context + Callbacks
const FormContext = React.createContext();

function Form({ children, onSubmit }) {
  const [values, setValues] = useState({});
  
  const updateField = useCallback((name, value) => {
    setValues(prev => ({ ...prev, [name]: value }));
  }, []);

  const contextValue = useMemo(() => ({
    values,
    updateField,
    submit: onSubmit
  }), [values, updateField, onSubmit]);

  return (
    <FormContext.Provider value={contextValue}>
      <form>{children}</form>
    </FormContext.Provider>
  );
}

// Deeply nested component
function DeepField({ name }) {
  const { values, updateField } = useContext(FormContext);
  
  return (
    <input
      value={values[name] || ''}
      onChange={(e) => updateField(name, e.target.value)}
    />
  );
}

const TabContext = React.createContext();

function Tabs({ children, defaultActive }) {
  const [activeTab, setActiveTab] = useState(defaultActive);
  
  return (
    <TabContext.Provider value={{ activeTab, setActiveTab }}>
      <div className="tabs">{children}</div>
    </TabContext.Provider>
  );
}

function TabList({ children }) {
  const { activeTab, setActiveTab } = useContext(TabContext);
  
  return (
    <div className="tab-list">
      {React.Children.map(children, (child, index) =>
        React.cloneElement(child, {
          isActive: activeTab === index,
          onClick: () => setActiveTab(index),
        })
      )}
    </div>
  );
}

function Tab({ children, isActive, onClick }) {
  return (
    <button
      className={`tab ${isActive ? 'active' : ''}`}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

function TabPanel({ children, index }) {
  const { activeTab } = useContext(TabContext);
  
  if (activeTab !== index) return null;
  return <div className="tab-panel">{children}</div>;
}

// Usage
<Tabs defaultActive={0}>
  <TabList>
    <Tab>First</Tab>
    <Tab>Second</Tab>
  </TabList>
  <TabPanel index={0}>Content 1</TabPanel>
  <TabPanel index={1}>Content 2</TabPanel>
</Tabs>

function Fetch({ url, render, children }) {
  const [state, setState] = useState({
    data: null,
    loading: true,
    error: null,
  });

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const data = await response.json();
        setState({ data, loading: false, error: null });
      } catch (error) {
        setState({ data: null, loading: false, error });
      }
    };

    fetchData();
  }, [url]);

  // Support both render prop and function as children
  if (render) return render(state);
  if (typeof children === 'function') return children(state);
  
  return null;
}

// Usage
<Fetch url="/api/data">
  {({ data, loading, error }) => (
    loading ? <Spinner /> :
    error ? <Error message={error.message} /> :
    <DataDisplay data={data} />
  )}
</Fetch>

function withAuth(WrappedComponent, requiredRoles = []) {
  return function AuthenticatedComponent(props) {
    const { user, loading } = useAuth();
    const location = useLocation();
    const navigate = useNavigate();

    useEffect(() => {
      if (!loading && !user) {
        navigate('/login', { state: { from: location } });
      }
      
      if (!loading && user && requiredRoles.length > 0) {
        const hasRole = requiredRoles.some(role => user.roles.includes(role));
        if (!hasRole) {
          navigate('/unauthorized');
        }
      }
    }, [user, loading, navigate, location]);

    if (loading) return <LoadingSpinner />;
    if (!user) return null;
    
    // Check roles if specified
    if (requiredRoles.length > 0) {
      const hasRole = requiredRoles.some(role => user.roles.includes(role));
      if (!hasRole) return null;
    }

    return <WrappedComponent {...props} user={user} />;
  };
}

// Usage
const AdminDashboard = withAuth(Dashboard, ['admin']);

function useInfiniteScroll(fetchMore, options = {}) {
  const {
    threshold = 100,
    rootMargin = '0px',
    enabled = true,
  } = options;

  const observerRef = useRef();
  const [isFetching, setIsFetching] = useState(false);
  const lastElementRef = useRef();

  useEffect(() => {
    if (!enabled) return;

    const observer = new IntersectionObserver(
      async (entries) => {
        const target = entries[0];
        if (target.isIntersecting && !isFetching) {
          setIsFetching(true);
          try {
            await fetchMore();
          } finally {
            setIsFetching(false);
          }
        }
      },
      {
        root: null,
        rootMargin,
        threshold,
      }
    );

    observerRef.current = observer;

    if (lastElementRef.current) {
      observer.observe(lastElementRef.current);
    }

    return () => {
      if (observerRef.current) {
        observerRef.current.disconnect();
      }
    };
  }, [enabled, fetchMore, isFetching, rootMargin, threshold]);

  const setLastElementRef = useCallback((node) => {
    if (observerRef.current && lastElementRef.current) {
      observerRef.current.unobserve(lastElementRef.current);
    }

    lastElementRef.current = node;

    if (node && observerRef.current) {
      observerRef.current.observe(node);
    }
  }, []);

  return { setLastElementRef, isFetching };
}

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

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    this.setState({ errorInfo });
    // Log to error reporting service
    logErrorToService(error, errorInfo);
  }

  handleRetry = () => {
    this.setState(prevState => ({
      hasError: false,
      error: null,
      errorInfo: null,
      retryCount: prevState.retryCount + 1,
    }));
  };

  handleReset = () => {
    this.setState({
      hasError: false,
      error: null,
      errorInfo: null,
      retryCount: 0,
    });
    // Reset app state if needed
    this.props.onReset?.();
  };

  render() {
    if (this.state.hasError) {
      return (
        <div className="error-boundary">
          <h2>Something went wrong</h2>
          {this.props.fallback ? (
            this.props.fallback({
              error: this.state.error,
              errorInfo: this.state.errorInfo,
              retryCount: this.state.retryCount,
              onRetry: this.handleRetry,
              onReset: this.handleReset,
            })
          ) : (
            <>
              <details>
                <summary>Error Details</summary>
                <pre>{this.state.error?.toString()}</pre>
                <pre>{this.state.errorInfo?.componentStack}</pre>
              </details>
              <button onClick={this.handleRetry}>
                Retry ({this.state.retryCount + 1}/3)
              </button>
              <button onClick={this.handleReset}>Reset</button>
            </>
          )}
        </div>
      );
    }

    return this.props.children;
  }
}

// Usage with recovery
<ErrorBoundary
  onReset={() => resetAppState()}
  fallback={({ error, onRetry, onReset }) => (
    <ErrorRecoveryUI
      error={error}
      onRetry={onRetry}
      onReset={onReset}
    />
  )}
>
  <UnstableComponent />
</ErrorBoundary>

function usePrevious(value) {
  const ref = useRef();
  
  useEffect(() => {
    ref.current = value;
  }, [value]);
  
  return ref.current;
}

// Enhanced version with multiple previous values
function usePreviousValues(value, count = 1) {
  const ref = useRef([]);
  
  useEffect(() => {
    ref.current = [value, ...ref.current].slice(0, count);
  }, [value, count]);
  
  return ref.current;
}

function DelayedUpdateComponent() {
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState('');
  const [filteredData, setFilteredData] = useState([]);
  const data = useData();

  const handleSearch = (e) => {
    const value = e.target.value;
    setQuery(value); // Urgent update
    
    // Mark non-urgent state update
    startTransition(() => {
      const filtered = data.filter(item =>
        item.name.toLowerCase().includes(value.toLowerCase())
      );
      setFilteredData(filtered); // Can be interrupted
    });
  };

  return (
    <div>
      <input value={query} onChange={handleSearch} />
      {isPending && <Spinner />}
      <DataList data={filteredData} />
    </div>
  );
}

function useWebSocket(url, options = {}) {
  const {
    onMessage,
    onOpen,
    onClose,
    onError,
    reconnectAttempts = 3,
    reconnectInterval = 3000,
  } = options;

  const wsRef = useRef();
  const reconnectCountRef = useRef(0);
  const [status, setStatus] = useState('connecting');
  const [lastMessage, setLastMessage] = useState(null);

  const connect = useCallback(() => {
    if (wsRef.current?.readyState === WebSocket.OPEN) {
      return;
    }

    const ws = new WebSocket(url);
    wsRef.current = ws;

    ws.onopen = (event) => {
      setStatus('connected');
      reconnectCountRef.current = 0;
      onOpen?.(event);
    };

    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      setLastMessage(data);
      onMessage?.(data);
    };

    ws.onclose = (event) => {
      setStatus('disconnected');
      onClose?.(event);

      // Attempt reconnection
      if (reconnectCountRef.current < reconnectAttempts) {
        reconnectCountRef.current += 1;
        setTimeout(connect, reconnectInterval);
      }
    };

    ws.onerror = (error) => {
      setStatus('error');
      onError?.(error);
    };

    return () => {
      ws.close();
    };
  }, [url, onMessage, onOpen, onClose, onError, reconnectAttempts, reconnectInterval]);

  useEffect(() => {
    const cleanup = connect();
    
    return () => {
      cleanup?.();
    };
  }, [connect]);

  const send = useCallback((data) => {
    if (wsRef.current?.readyState === WebSocket.OPEN) {
      wsRef.current.send(JSON.stringify(data));
    } else {
      throw new Error('WebSocket is not connected');
    }
  }, []);

  const close = useCallback(() => {
    wsRef.current?.close();
  }, []);

  return { send, close, status, lastMessage };
}

function useExternalStore(store, getSnapshot, getServerSnapshot) {
  const [snapshot, setSnapshot] = useState(() => getSnapshot(store));

  useEffect(() => {
    const handleStoreChange = () => {
      setSnapshot(getSnapshot(store));
    };

    // Subscribe to store changes
    const unsubscribe = store.subscribe(handleStoreChange);
    
    // Initial sync
    handleStoreChange();

    return unsubscribe;
  }, [store, getSnapshot]);

  return snapshot;
}

// React 18 version
function useExternalStoreReact18(store, getSnapshot) {
  return useSyncExternalStore(
    store.subscribe,
    () => getSnapshot(store),
    // Server snapshot for SSR
    () => getSnapshot(store)
  );
}

// Example with Redux-like store
const store = {
  state: { count: 0 },
  listeners: new Set(),
  
  getState() {
    return this.state;
  },
  
  subscribe(listener) {
    this.listeners.add(listener);
    return () => this.listeners.delete(listener);
  },
  
  dispatch(action) {
    // Update state
    this.state = reducer(this.state, action);
    
    // Notify listeners
    this.listeners.forEach(listener => listener());
  }
};

// Custom implementation for React < 18
function useId(prefix = 'id') {
  const idRef = useRef();

  if (typeof window === 'undefined') {
    // SSR: Generate deterministic ID
    if (!idRef.current) {
      idRef.current = `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
    }
  } else {
    // CSR: Use React's useId or fallback
    if (!idRef.current) {
      idRef.current = `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
    }
  }

  return idRef.current;
}

// React 18 native version
import { useId } from 'react';

function FormField({ label }) {
  const id = useId();
  
  return (
    <>
      <label htmlFor={`${id}-input`}>{label}</label>
      <input id={`${id}-input`} />
      <p id={`${id}-description`}>Description</p>
    </>
  );
}

// Render Phase (can be async, can be interrupted)
function MyComponent() {
  // This runs during render phase
  const [state, setState] = useState(0);
  
  // Effects are scheduled here but run later
  useEffect(() => {
    // Runs during commit phase
    console.log('Effect ran');
  }, [state]);
  
  // Return JSX (render phase)
  return <div>{state}</div>;
}

// Commit Phase (synchronous, cannot be interrupted)
class Component extends React.Component {
  componentDidMount() {
    // Runs during commit phase
    // Can safely perform DOM operations
    this.node.focus();
  }
  
  componentDidUpdate() {
    // Runs during commit phase
    // DOM is updated at this point
  }
  
  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Runs right before commit phase
    // Can capture DOM state
    return this.node.scrollHeight;
  }
}

// Problem: Without keys, React re-creates elements
function ListWithoutKeys({ items }) {
  return (
    <ul>
      {items.map((item, index) => (
        // ❌ Using index as key can cause issues
        <li key={index}>{item.text}</li>
      ))}
    </ul>
  );
}

// Solution: Stable, unique keys
function ListWithKeys({ items }) {
  return (
    <ul>
      {items.map(item => (
        // ✅ Use unique ID from data
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

// Key behaviors:
// - Same key + same type = reuse element
// - Same key + different type = destroy/create
// - Different key = destroy/create

// Class component with shouldComponentUpdate
class ExpensiveComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // Custom comparison logic
    if (this.props.value !== nextProps.value) {
      return true;
    }
    if (this.props.user?.id !== nextProps.user?.id) {
      return true;
    }
    return false;
  }
  
  render() {
    return <div>{this.props.value}</div>;
  }
}

// Functional equivalent with React.memo
const ExpensiveComponent = React.memo(
  function ExpensiveComponent({ value, user }) {
    return <div>{value}</div>;
  },
  // Custom comparison function
  (prevProps, nextProps) => {
    if (prevProps.value !== nextProps.value) {
      return false; // Should update
    }
    if (prevProps.user?.id !== nextProps.user?.id) {
      return false; // Should update
    }
    return true; // Should NOT update
  }
);

// Server-side render
import { renderToString } from 'react-dom/server';

const html = renderToString(<App />);
// Returns: '<div id="root">...</div>'

// Client-side hydrate
import { hydrateRoot } from 'react-dom/client';

const root = hydrateRoot(
  document.getElementById('root'),
  <App />
);

// Hydration process:
// 1. Server renders HTML
// 2. HTML sent to client
// 3. React attaches event listeners to existing DOM
// 4. React takes over and becomes interactive

// Hydration errors occur when:
// - Client and server render different HTML
// - Missing elements on client
// - Text content mismatch

// Avoid hydration errors:
function ClientOnly({ children }) {
  const [hasMounted, setHasMounted] = useState(false);
  
  useEffect(() => {
    setHasMounted(true);
  }, []);
  
  if (!hasMounted) {
    return null;
  }
  
  return children;
}

// Before React 18 - Automatic batching only in React event handlers
function OldBatching() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    // These are batched in React 17 (single re-render)
    setCount(c => c + 1);
    setFlag(f => !f);
  }

  useEffect(() => {
    // These are NOT batched in React 17 (two re-renders)
    setCount(c => c + 1);
    setFlag(f => !f);
  }, []);

  return <button onClick={handleClick}>Click</button>;
}

// React 18 - Automatic batching everywhere
function NewBatching() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    // Batched (single re-render)
    setCount(c => c + 1);
    setFlag(f => !f);
  }

  useEffect(() => {
    // Also batched in React 18 (single re-render)
    setCount(c => c + 1);
    setFlag(f => !f);
  }, []);

  // Manual flush for edge cases
  function handleClickAsync() {
    setTimeout(() => {
      ReactDOM.flushSync(() => {
        setCount(c => c + 1);
      });
      // Not batched with above
      setFlag(f => !f);
    });
  }

  return <button onClick={handleClick}>Click</button>;
}

function SearchResults({ query }) {
  const deferredQuery = useDeferredValue(query);
  const isStale = query !== deferredQuery;

  return (
    <div style={{ opacity: isStale ? 0.5 : 1 }}>
      <SearchSuggestions query={deferredQuery} />
    </div>
  );
}

// Practical example with search
function SearchPage() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  
  // Memoize to prevent unnecessary re-renders
  const suggestions = useMemo(() => {
    return computeSuggestions(deferredQuery);
  }, [deferredQuery]);

  return (
    <>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      
      {/* Show loading indicator when stale */}
      {query !== deferredQuery && <Spinner />}
      
      {/* Results update with lower priority */}
      <SearchResults results={suggestions} />
    </>
  );
}

function ProfilePage() {
  const [resource, setResource] = useState(initialResource);
  const [isPending, startTransition] = useTransition();

  function handleRefresh() {
    startTransition(() => {
      // This update has lower priority
      setResource(fetchProfileData());
    });
  }

  return (
    <div>
      <button 
        onClick={handleRefresh}
        disabled={isPending}
      >
        {isPending ? 'Refreshing...' : 'Refresh'}
      </button>
      
      <Suspense fallback={<Spinner />}>
        <ProfileDetails resource={resource} />
      </Suspense>
      
      <Suspense fallback={<Spinner />}>
        <ProfileTimeline resource={resource} />
      </Suspense>
    </div>
  );
}

// Nested Suspense with transitions
function NestedSuspense() {
  const [tab, setTab] = useState('home');
  const [isPending, startTransition] = useTransition();

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }

  return (
    <>
      <TabButton
        isActive={tab === 'home'}
        onClick={() => selectTab('home')}
      >
        Home
      </TabButton>
      
      <Suspense fallback={<TabSpinner />}>
        {tab === 'home' ? <Home /> : <About />}
      </Suspense>
    </>
  );
}

function SuspenseWithErrorBoundary({ 
  children, 
  fallback, 
  onError,
  errorComponent 
}) {
  const [error, setError] = useState(null);

  return (
    <ErrorBoundary
      onError={(err, errorInfo) => {
        setError(err);
        onError?.(err, errorInfo);
      }}
      resetKeys={[children]}
      fallback={errorComponent || <DefaultError />}
    >
      <React.Suspense fallback={fallback}>
        {error ? (
          <button onClick={() => setError(null)}>
            Retry
          </button>
        ) : (
          children
        )}
      </React.Suspense>
    </ErrorBoundary>
  );
}

// Usage with resource fetching
function UserProfile({ userId }) {
  const resource = userResourceCache.read(userId);
  
  return (
    <SuspenseWithErrorBoundary
      fallback={<ProfileSkeleton />}
      errorComponent={<ProfileError />}
    >
      <ProfileDetails resource={resource} />
    </SuspenseWithErrorBoundary>
  );
}

function App() {
  const [location, setLocation] = useState(initialLocation);
  const [isNavigating, startNavigation] = useTransition();
  const match = useMatch(location);

  const navigate = useCallback((to) => {
    startNavigation(() => {
      setLocation(to);
    });
  }, [startNavigation]);

  return (
    <div className={isNavigating ? 'navigating' : ''}>
      <nav>
        <button onClick={() => navigate('/')}>Home</button>
        <button onClick={() => navigate('/about')}>About</button>
        <button onClick={() => navigate('/contact')}>Contact</button>
      </nav>
      
      {isNavigating && <NavigationIndicator />}
      
      <Suspense fallback={<PageSkeleton />}>
        {match === '/' && <Home />}
        {match === '/about' && <About />}
        {match === '/contact' && <Contact />}
      </Suspense>
    </div>
  );
}

// Without interruptible rendering
function BlockingComponent({ data }) {
  // If this takes a long time, it blocks the main thread
  const processedData = processLargeData(data);
  
  return <Result data={processedData} />;
}

// With interruptible rendering
function InterruptibleComponent({ data }) {
  const [processedData, setProcessedData] = useState(null);
  
  useEffect(() => {
    // Create a controller to abort if needed
    const controller = new AbortController();
    
    const processData = async () => {
      // This can be interrupted
      const result = await processLargeDataAsync(data, controller.signal);
      
      if (!controller.signal.aborted) {
        setProcessedData(result);
      }
    };
    
    processData();
    
    return () => {
      controller.abort();
    };
  }, [data]);
  
  if (!processedData) {
    return <Skeleton />;
  }
  
  return <Result data={processedData} />;
}

// Using useDeferredValue for interruptible rendering
function SearchWithInterruption({ query }) {
  const deferredQuery = useDeferredValue(query);
  
  // This component can be interrupted if new query comes
  const results = useMemo(() => {
    return searchAPI(deferredQuery);
  }, [deferredQuery]);
  
  return (
    <div>
      <SearchResults results={results} />
      {query !== deferredQuery && <LoadingIndicator />}
    </div>
  );
}

// Server Component (cannot use hooks, effects, state)
async function ProductDetails({ productId }) {
  const product = await db.products.find(productId);
  const reviews = await db.reviews.findByProduct(productId);
  
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      {/* Client Component nested inside */}
      <AddToCart productId={productId} />
      {/* Another Server Component */}
      <Suspense fallback={<ReviewsSkeleton />}>
        <ProductReviews reviews={reviews} />
      </Suspense>
    </div>
  );
}