Realtime with React hooks in Supabase - Step-by-Step Execution

Process Flow - Realtime with React hooks

Component mounts

↓

Setup realtime subscription

↓

Listen for data changes

↓

On data update -> setState

↓

Component re-renders with new data

↓

Component unmounts

↓

Cleanup subscription

This flow shows how a React component uses hooks to subscribe to realtime data, update state on changes, and clean up when done.

Execution Sample

Supabase

useEffect(() => {
  const subscription = supabase
    .from('messages')
    .on('INSERT', payload => setMessages(m => [...m, payload.new]))
    .subscribe()
  return () => { supabase.removeSubscription(subscription) }
}, [])

This code sets up a realtime listener for new messages and updates the component state when a new message arrives.

Process Table

Step	Action	State Before	State After	Effect on UI
1	Component mounts, useEffect runs	messages = []	messages = []	UI shows empty list
2	Subscribe to 'messages' INSERT events	subscription = null	subscription = active	Listening for new messages
3	New message arrives: {id:1, text:'Hi'}	messages = []	messages = [{id:1, text:'Hi'}]	UI updates to show 1 message
4	New message arrives: {id:2, text:'Hello'}	messages = [{id:1, text:'Hi'}]	messages = [{id:1, text:'Hi'}, {id:2, text:'Hello'}]	UI updates to show 2 messages
5	Component unmounts, cleanup runs	subscription = active	subscription = removed	Stops listening to new messages

💡 Component unmounts, subscription is removed to prevent memory leaks

Status Tracker

Variable	Start	After Step 3	After Step 4	Final
messages	[]	[{id:1, text:'Hi'}]	[{id:1, text:'Hi'}, {id:2, text:'Hello'}]	[{id:1, text:'Hi'}, {id:2, text:'Hello'}]
subscription	null	active	active	removed

Key Moments - 3 Insights

Why do we use useEffect with an empty dependency array?

Because we want to set up the subscription only once when the component mounts, as shown in step 1 of the execution_table.

What happens if we don't clean up the subscription on unmount?

The subscription stays active, causing memory leaks and unwanted updates, as prevented in step 5 of the execution_table.

How does the UI update when new data arrives?

The setMessages state updater adds new messages, triggering a re-render to show updated data, as seen in steps 3 and 4.

Visual Quiz - 3 Questions

Look at the execution_table, what is the state of 'messages' after step 3?

A [{id:1, text:'Hi'}]

B []

C [{id:2, text:'Hello'}]

D null

💡 Hint

Check the 'State After' column for step 3 in the execution_table.

At which step does the subscription get removed?

A Step 2

B Step 5

C Step 3

D Step 4

💡 Hint

Look for 'subscription = removed' in the 'State After' column.

If we forget to add the empty dependency array in useEffect, what happens?

A Subscription never sets up

B Subscription sets up only once

C Subscription sets up on every render causing multiple listeners

D Component never mounts

💡 Hint

Recall why useEffect with [] runs only once, as explained in key_moments.

Concept Snapshot

React Realtime with Supabase Hooks:
- useEffect sets up subscription on mount
- Listen to 'INSERT' events on a table
- Update state with setState on new data
- Component re-renders showing fresh data
- Cleanup subscription on unmount to avoid leaks

Full Transcript

This example shows how a React component uses Supabase realtime subscriptions with hooks. When the component mounts, useEffect runs once to subscribe to new 'messages' inserts. When a new message arrives, the callback updates the messages state array, triggering a UI update. When the component unmounts, the subscription is removed to prevent memory leaks. This flow ensures live data updates in the UI safely and efficiently.

Practice

1. What is the main purpose of using Realtime with React hooks in a Supabase app?

easy

A. To handle user authentication manually

B. To style the app components dynamically

C. To update the app instantly when data changes in the database

D. To fetch data only once when the app loads

Solution

1. Step 1: Understand Realtime with React hooks

   Realtime with React hooks allows the app to listen for changes in the database and update the UI immediately.

2. Step 2: Identify the main purpose

   The main goal is to keep the app data fresh without manual refresh by updating instantly on data changes.

3. Final Answer:

   To update the app instantly when data changes in the database -> Option C

4. Quick Check:

   Realtime updates = instant app data refresh [OK]

Hint: Realtime means instant updates on data change [OK]

Common Mistakes:

• Confusing realtime with styling or authentication
• Thinking it fetches data only once
• Assuming it handles user login

2. Which React hook is commonly used to subscribe and clean up Supabase realtime events?

easy

A. useEffect

B. useState

C. useMemo

D. useContext

Solution

1. Step 1: Recall React hooks for side effects

   useEffect is designed to run code on component mount and clean up on unmount, perfect for subscriptions.

2. Step 2: Match with Supabase realtime subscription

   Supabase realtime subscriptions need to be set up and cleaned up properly, which useEffect handles well.

3. Final Answer:

   useEffect -> Option A

4. Quick Check:

   Subscriptions need useEffect [OK]

Hint: useEffect manages setup and cleanup of subscriptions [OK]

Common Mistakes:

• Using useState for subscriptions
• Confusing useMemo with side effects
• Thinking useContext handles subscriptions

3. Given this React code snippet using Supabase realtime subscription:

const [messages, setMessages] = useState([]);
useEffect(() => {
  const subscription = supabase
    .from('messages')
    .on('INSERT', payload => {
      setMessages(current => [...current, payload.new]);
    })
    .subscribe();
  return () => {
    supabase.removeSubscription(subscription);
  };
}, []);

What happens when a new message is inserted into the 'messages' table?

medium

A. The new message is added to the messages state array

B. The messages state is reset to an empty array

C. The subscription stops listening for new messages

D. An error occurs because setMessages is called incorrectly

Solution

1. Step 1: Analyze the subscription callback

   On 'INSERT' event, the callback adds the new message (payload.new) to the current messages array using setMessages.

2. Step 2: Understand state update behavior

   setMessages uses a function to append the new message, preserving existing messages and adding the new one.

3. Final Answer:

   The new message is added to the messages state array -> Option A

4. Quick Check:

   INSERT event appends new message [OK]

Hint: INSERT event adds new data to state array [OK]

Common Mistakes:

• Thinking state resets instead of appending
• Assuming subscription stops on insert
• Believing setMessages usage is incorrect here

4. You wrote this React useEffect to subscribe to Supabase realtime updates:

useEffect(() => {
  supabase
    .from('tasks')
    .on('UPDATE', payload => {
      setTasks(tasks.map(t => t.id === payload.new.id ? payload.new : t));
    });
}, []);

But the app does not update when tasks change. What is the likely problem?

medium

A. The setTasks function is used incorrectly

B. The event type 'UPDATE' is invalid

C. useEffect should not have an empty dependency array

D. The subscription is missing the .subscribe() call

Solution

1. Step 1: Check subscription setup

   The code calls .on() but does not call .subscribe(), so the subscription is never activated.

2. Step 2: Confirm event type and state update

   'UPDATE' is valid and setTasks usage is correct; empty dependency array is appropriate here.

3. Final Answer:

   The subscription is missing the .subscribe() call -> Option D

4. Quick Check:

   Missing .subscribe() means no updates [OK]

Hint: Always call .subscribe() after .on() for realtime [OK]

Common Mistakes:

• Forgetting .subscribe() after .on()
• Thinking event type 'UPDATE' is wrong
• Misusing setTasks function
• Changing dependency array unnecessarily

5. You want to build a React component that listens to both INSERT and DELETE events on a Supabase 'comments' table and updates the state accordingly. Which approach correctly handles both events and cleans up subscriptions?

hard

A. Use one subscription with .on('INSERT') only, ignoring DELETE events

B. Use two separate subscriptions inside one useEffect, each with .subscribe(), and remove both on cleanup

C. Use useEffect without cleanup function to keep subscriptions alive

D. Subscribe to 'comments' table outside useEffect and update state directly

Solution

1. Step 1: Understand multiple event subscriptions

   To listen to both INSERT and DELETE, create two subscriptions with .on('INSERT') and .on('DELETE').

2. Step 2: Manage subscriptions lifecycle

   Inside useEffect, subscribe to both and return a cleanup function that removes both subscriptions to avoid memory leaks.

3. Final Answer:

   Use two separate subscriptions inside one useEffect, each with .subscribe(), and remove both on cleanup -> Option B

4. Quick Check:

   Multiple subscriptions + cleanup = correct approach [OK]

Hint: Subscribe separately for each event and clean up both [OK]

Common Mistakes:

• Ignoring DELETE events
• Not cleaning up subscriptions
• Subscribing outside useEffect causing leaks
• Using only one event subscription