React Training: Stable Effects and Event Lifecycles Without Stale State

React Training: Measure Effect Churn Before Editing Dependencies

Start with the React DevTools Profiler instead of deleting dependencies until a warning disappears. Record a session, toggle a cosmetic value such as theme, and inspect commits for the component that owns a WebSocket, event listener, or timer. In a react js course exercise, a useful baseline is: changing theme must produce zero disconnect/reconnect calls when the connection identity is only serverUrl + roomId. Add User Timing marks around setup and cleanup so the browser Performance panel can confirm the count independently of React DevTools.

useEffect(() => {
  performance.mark(`chat-connect:${roomId}`);
  const connection = createConnection(serverUrl, roomId);
  connection.connect();

  return () => {
    performance.mark(`chat-disconnect:${roomId}`);
    connection.disconnect();
  };
}, [serverUrl, roomId]);

Compare two recordings with the same interaction: first with theme incorrectly included in the dependency array, then with only resource-identity inputs included. Do not use render counts alone as the metric: a cheap render can still trigger an expensive TCP reconnect, authentication handshake, replay subscription, or cache invalidation. The important measurement is setup/teardown pairs per user action.

Component Based Development: Split Resource Identity from Latest UI State

In component based development, an effect should describe the lifetime of an external resource, while UI reactions can read current state without redefining that lifetime. Use useEffectEvent for callbacks invoked by an effect-owned system such as a connection listener. Its body sees values from the latest committed render, but the callback itself is intentionally not a dependency that restarts the connection. This solves the common "notification uses an old theme" bug without coupling theme changes to the socket lifecycle.

import { useEffect, useEffectEvent } from 'react';

function ChatRoom({ serverUrl, roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification(`Joined ${roomId}`, theme);
  });

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', onConnected);
    connection.connect();

    return () => connection.disconnect();
  }, [serverUrl, roomId]);

  return null;
}

Keep the React Hooks ESLint rule enabled and treat its dependency diagnostics as a design review: npx eslint src --rule 'react-hooks/exhaustive-deps:error'. Do not call an Effect Event from a click handler or pass it to a child as a general callback; it is for code reached from an effect. For codebases that cannot use this API, a useRef holding the latest callback is a fallback, but it bypasses more linting guarantees and makes it easier to accidentally read uncommitted assumptions.

Frontend Framework Subscriptions: Make Cleanup Safe Under Repeated Mounts

A frontend framework development build may deliberately run an effect through setup, cleanup, and setup again to expose asymmetric resource handling. Write cleanup as if the connection could be half-open and as if a late message could arrive during disposal. Set a local disposal flag before closing, remove the exact listener reference, and make the close condition explicit; this prevents a queued message from dispatching into an effect instance that is no longer active.

useEffect(() => {
  let disposed = false;
  const socket = new WebSocket(url);

  const onMessage = (event) => {
    if (!disposed) dispatch({ type: 'message', payload: event.data });
  };

  socket.addEventListener('message', onMessage);

  return () => {
    disposed = true;
    socket.removeEventListener('message', onMessage);
    if (socket.readyState === WebSocket.CONNECTING ||
        socket.readyState === WebSocket.OPEN) {
      socket.close(1000, 'component disposed');
    }
  };
}, [url]);

The same ownership rule matters in react native training: subscriptions such as @react-native-community/netinfo's NetInfo.addEventListener return an unsubscribe function, and that function belongs directly in the effect cleanup. Test background/foreground transitions on a physical device or emulator, because an AppState transition can expose duplicate listeners that a desktop browser workflow never exercises. Avoid putting the whole state object from the callback into effect dependencies; subscribe once to the stable service and dispatch the minimal primitive values needed by the reducer.

JSX Training: Cancel Async Work and Block Late State Writes

JSX training often demonstrates fetching data in an effect, but the production requirement is ordering: an older request must not overwrite a newer screen. Create an AbortController per effect instance, pass its signal to fetch, and retain an alive guard for work that has already crossed an await boundary. Aborting transport alone is not a complete ordering guarantee when JSON parsing, schema validation, or a later async transform is already running.

useEffect(() => {
  let alive = true;
  const controller = new AbortController();

  async function loadProduct() {
    try {
      const response = await fetch(`/api/products/${productId}`, {
        signal: controller.signal
      });
      if (!response.ok) throw new Error(`HTTP ${response.status}`);

      const product = await response.json();
      if (alive) setProduct(product);
    } catch (error) {
      if (alive && error.name !== 'AbortError') setError(error);
    }
  }

  void loadProduct();
  return () => {
    alive = false;
    controller.abort();
  };
}, [productId]);

Verify the race with Chrome DevTools Network throttling: navigate from product A to product B while A is throttled, then assert that only B is rendered. In an automated test, use Mock Service Worker (MSW) to delay A's response and React Testing Library's waitFor to check the final DOM. A frequent mistake is swallowing every error after adding abort logic; preserve real HTTP and parsing errors while explicitly ignoring only AbortError.

Frequently Asked Questions

How do I prevent stale closures in a React JS course project?

First classify every value read by the effect: resource identity values belong in the dependency array, while values needed only when a subscription callback fires can move into useEffectEvent. Profile a theme toggle and confirm it no longer creates a disconnect/connect pair. Do not silence react-hooks/exhaustive-deps with an inline disable comment unless you can document the external resource lifetime.

Does react native training require the same useEffect cleanup patterns?

Yes, but validate device-specific lifecycle paths. For NetInfo.addEventListener, return its unsubscribe function directly from useEffect; for AppState listeners, remove the exact subscription during cleanup. Test background → foreground and fast navigation because retained native listeners can dispatch after the JavaScript screen has changed.

Which frontend framework tools can prove an effect is reconnecting too often?

Use React DevTools Profiler to identify the commits that trigger the owner component, then add performance.mark() around connection setup and cleanup and inspect those marks in Chrome Performance. Compare marks per interaction before and after removing non-identity dependencies; the target is fewer resource lifecycles, not merely fewer renders.

What should JSX training teach about fetch cleanup?

Use both AbortController and a local active/epoch guard. Abort cancels a pending request, while the guard blocks a response or transform that completes after the component switched to another identifier. With MSW, delay the old request and assert that its result never replaces the newer UI state.