Realtime with React hooks in Supabase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the React hook used for state management.

Supabase

import React, { [1] } from 'react';

Drag options to blanks, or click blank then click option'

AuseContext

BuseEffect

CuseState

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing useEffect which is for side effects, not state.

Choosing useContext which is for context, not state.

The useState hook is used to manage state in React components.

2fill in blank

medium

Complete the code to subscribe to a Supabase realtime channel inside a React effect hook.

Supabase

useEffect(() => {
  const channel = supabase.channel('public:messages').on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'messages' }, payload => {
    setMessages(current => [...current, payload.new]);
  });
  channel.[1]();
  return () => {
    channel.unsubscribe();
  };
}, []);

Drag options to blanks, or click blank then click option'

Asubscribe

Blisten

Cconnect

Djoin

Attempts:

3 left

💡 Hint

Common Mistakes

Using listen which is not a method on Supabase channels.

Using connect or join which are not correct Supabase channel methods.

The subscribe() method starts listening to the realtime channel events.

3fill in blank

hard

Fix the error in the cleanup function to properly unsubscribe from the Supabase channel.

Supabase

return () => {
  channel.[1]();
};

Drag options to blanks, or click blank then click option'

Aclose

Bdisconnect

Cstop

Dunsubscribe

Attempts:

3 left

💡 Hint

Common Mistakes

Using disconnect which is not a method on Supabase channels.

Using stop or close which are not valid methods here.

The unsubscribe() method properly stops listening to the channel events.

4fill in blank

hard

Fill both blanks to update state with new realtime data and ensure the effect runs only once.

Supabase

useEffect(() => {
  const channel = supabase.channel('public:notifications').on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'notifications' }, payload => {
    [1](current => [...current, payload.new]);
  });
  channel.subscribe();
  return () => {
    channel.unsubscribe();
  };
}, [2]);

Drag options to blanks, or click blank then click option'

AsetNotifications

BsetState

C[]

D[ ]

Attempts:

3 left

💡 Hint

Common Mistakes

Using setState which is generic and not the correct setter here.

Using non-empty dependency arrays causing multiple subscriptions.

setNotifications updates the notifications state.
[] as dependency array makes the effect run only once on mount.

5fill in blank

hard

Fill all three blanks to create a realtime subscription that listens for DELETE events and updates state accordingly.

Supabase

useEffect(() => {
  const channel = supabase.channel('public:tasks').on('postgres_changes', { event: '[1]', schema: 'public', table: 'tasks' }, payload => {
    [2](current => current.filter(task => task.id !== payload.old.[3]));
  });
  channel.subscribe();
  return () => channel.unsubscribe();
}, []);

Drag options to blanks, or click blank then click option'

ADELETE

BsetTasks

Cid

DINSERT

Attempts:

3 left

💡 Hint

Common Mistakes

Using INSERT event instead of DELETE.

Using wrong state setter name.

Using wrong property to identify tasks.

DELETE listens for delete events.
setTasks updates the tasks state.
id is the unique identifier to filter out the deleted task.

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