AI & Agent Dev Bug Sandbox Back to Radar

React Example In Use-Realtime.Md Uses Await Inside Non-Async UseEffect Callback

The React pattern in examples/prompts/use-realtime.md contains a syntax error due to using await inside a synchronous useEffect callback, preventing users from copying the example. The fix wraps the asynchronous setup in an inner async function and returns a proper cleanup function.

mediumConfidence 95%React

Origin Analysis

The useEffect callback is declared as a synchronous function but contains an await expression, which is invalid JavaScript. This likely stems from a documentation mistake where the async nature of supabase.realtime.setAuth() was overlooked.

1. Copy the fenced JavaScript block from examples/prompts/use-realtime.md (lines 142-164 at the specified revision). 2. Save as react-example.js. 3. Run `node --check react-example.js` with Node.js v22.23.2. 4. Observe SyntaxError: await is only valid in async functions and the top level bodies of modules.

Fixing Code Block

useEffect(() => {
  let cancelled = false;
  let cleanup = () => {};

  const setup = async () => {
    try {
      await supabase.realtime.setAuth();
      if (cancelled) return;

      const channel = supabase
        .channel(`room-${roomId}`)
        .on('postgres_changes', { event: '*', schema: 'public', table: 'rooms', filter: `id=eq.${roomId}` }, (payload) => {
          // handle payload
        })
        .subscribe();

      cleanup = () => {
        supabase.removeChannel(channel);
      };
    } catch (error) {
      console.error('Realtime setup failed:', error);
    }
  };

  setup();

  return () => {
    cancelled = true;
    cleanup();
  };
}, [roomId]);

The fix introduces an inner async function setup() that performs the await and subscription, and stores the cleanup function returned by the subscription in a variable. The effect's return statement cancels the operation and invokes cleanup, handling unmount during async setup.

Edge Case Audit

The fix assumes supabase.realtime.setAuth() resolves without throwing. In concurrent or rapid roomId changes, stale subscription cleanup must be handled; the cancelled flag prevents setup after unmount but the cleanup for a previous subscription must be called before setting up a new one. Consider aborting the async operation if possible. No version-specific issues identified, but rolling back to a previous broken version will reintroduce the syntax error.

Ecosystem Topology

Latest critical and high reports

React Example In Use-Realtime.Md Uses Await Inside Non-Async UseEffect Callback

Origin Analysis

Fixing Code Block

Edge Case Audit

Ecosystem Topology

Agent Frameworks

Vector Databases

Toolchains

React Example In Use-Realtime.Md Uses Await Inside Non-Async UseEffect Callback

Origin Analysis

Fixing Code Block

Edge Case Audit

Related Intelligence

Ecosystem Topology

Agent Frameworks

Vector Databases

Toolchains