Realtime with React hooks in Supabase - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main purpose of using React hooks with Supabase Realtime?

React hooks help manage realtime data updates from Supabase in a simple and efficient way, allowing your app to automatically update the UI when data changes.

beginner

Which React hook is commonly used to subscribe to Supabase Realtime events?

The useEffect hook is commonly used to subscribe to Supabase Realtime events and clean up the subscription when the component unmounts.

intermediate

How do you clean up a Supabase Realtime subscription in React hooks?

Inside useEffect, return a cleanup function that calls subscription.unsubscribe() to stop listening to realtime events when the component unmounts.

beginner

What is the role of useState when working with Supabase Realtime in React?

useState stores the current data from Supabase. When realtime events arrive, you update this state to refresh the UI automatically.

intermediate

Why is it important to handle errors when using Supabase Realtime with React hooks?

Handling errors ensures your app can respond gracefully to connection issues or permission problems, improving user experience and app stability.

Which React hook is best for subscribing to Supabase Realtime events?

A useState

B useEffect

C useMemo

D useCallback

useEffect runs side effects like subscriptions and cleans them up when the component unmounts, making it ideal for realtime event handling.

How do you update the UI when new realtime data arrives from Supabase?

A Do nothing; UI updates automatically

B Reload the entire page

C Use <code>console.log</code> only

D Call <code>setState</code> inside the realtime event handler

Updating state with setState triggers React to re-render the UI with the new data.

What should you do inside useEffect to avoid memory leaks with Supabase subscriptions?

A Call <code>setTimeout</code>

B Do nothing

C Return a cleanup function that unsubscribes

D Use <code>useState</code> instead

Returning a cleanup function that calls unsubscribe() stops the subscription when the component unmounts, preventing memory leaks.

What does useState do in the context of realtime data?

A Stores and updates the current data to show in the UI

B Subscribes to realtime events

C Fetches data from the server

D Handles errors automatically

useState holds the data that changes over time, so the UI can update when new realtime data arrives.

Why is error handling important when using Supabase Realtime with React hooks?

A To keep the app stable and inform users of issues

B It is not important

C To speed up data updates

D To automatically fix bugs

Errors can happen due to network or permission issues; handling them helps maintain a good user experience.

Explain how you would set up a Supabase Realtime subscription in a React component using hooks.

Think about how React manages side effects and state.

Describe why cleaning up subscriptions in React hooks is important when using Supabase Realtime.

Consider what happens if subscriptions keep running after component unmounts.

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