How to Implement Optimistic UI with Supabase

1-- Create the todos table
2create table public.todos (
3  id uuid primary key default gen_random_uuid(),
4  user_id uuid references auth.users(id) on delete cascade not null,
5  task text not null,
6  is_complete boolean default false,
7  created_at timestamptz default now()
8);
9
10-- Enable RLS
11alter table public.todos enable row level security;
12
13-- Users can read their own todos
14create policy "Users read own todos" on public.todos
15  for select to authenticated
16  using ((select auth.uid()) = user_id);
17
18-- Users can insert their own todos
19create policy "Users insert own todos" on public.todos
20  for insert to authenticated
21  with check ((select auth.uid()) = user_id);
22
23-- Users can update their own todos
24create policy "Users update own todos" on public.todos
25  for update to authenticated
26  using ((select auth.uid()) = user_id);
27
28-- Users can delete their own todos
29create policy "Users delete own todos" on public.todos
30  for delete to authenticated
31  using ((select auth.uid()) = user_id);
32
33-- Enable real-time for multi-user sync
34alter publication supabase_realtime add table public.todos;

1import { useState } from 'react'
2import { createClient } from '@supabase/supabase-js'
3
4const supabase = createClient(
5  process.env.NEXT_PUBLIC_SUPABASE_URL!,
6  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
7)
8
9function useTodos(userId: string) {
10  const [todos, setTodos] = useState<Todo[]>([])
11
12  const addTodo = async (task: string) => {
13    // 1. Create optimistic item with temp ID
14    const tempId = crypto.randomUUID()
15    const optimisticTodo = {
16      id: tempId,
17      user_id: userId,
18      task,
19      is_complete: false,
20      created_at: new Date().toISOString(),
21    }
22
23    // 2. Update UI immediately
24    setTodos((prev) => [...prev, optimisticTodo])
25
26    // 3. Send to Supabase
27    const { data, error } = await supabase
28      .from('todos')
29      .insert({ user_id: userId, task, is_complete: false })
30      .select()
31      .single()
32
33    if (error) {
34      // 4. Roll back on failure
35      setTodos((prev) => prev.filter((t) => t.id !== tempId))
36      console.error('Insert failed:', error.message)
37      return
38    }
39
40    // 5. Replace temp item with server item (real ID)
41    setTodos((prev) =>
42      prev.map((t) => (t.id === tempId ? data : t))
43    )
44  }
45
46  return { todos, setTodos, addTodo }
47}

1const toggleTodo = async (id: string, currentStatus: boolean) => {
2  // Save previous state for rollback
3  const previousTodos = [...todos]
4
5  // Optimistic update
6  setTodos((prev) =>
7    prev.map((t) =>
8      t.id === id ? { ...t, is_complete: !currentStatus } : t
9    )
10  )
11
12  const { error } = await supabase
13    .from('todos')
14    .update({ is_complete: !currentStatus })
15    .eq('id', id)
16
17  if (error) {
18    setTodos(previousTodos) // Roll back
19    console.error('Update failed:', error.message)
20  }
21}
22
23const deleteTodo = async (id: string) => {
24  const previousTodos = [...todos]
25
26  // Optimistic delete
27  setTodos((prev) => prev.filter((t) => t.id !== id))
28
29  const { error } = await supabase
30    .from('todos')
31    .delete()
32    .eq('id', id)
33
34  if (error) {
35    setTodos(previousTodos) // Roll back
36    console.error('Delete failed:', error.message)
37  }
38}

1import { useEffect } from 'react'
2
3function useRealtimeSync(
4  userId: string,
5  setTodos: React.Dispatch<React.SetStateAction<Todo[]>>
6) {
7  useEffect(() => {
8    const channel = supabase
9      .channel('todos-realtime')
10      .on(
11        'postgres_changes',
12        { event: 'INSERT', schema: 'public', table: 'todos' },
13        (payload) => {
14          setTodos((prev) => {
15            // Avoid duplicating our own optimistic insert
16            const exists = prev.some((t) => t.id === payload.new.id)
17            return exists ? prev : [...prev, payload.new as Todo]
18          })
19        }
20      )
21      .on(
22        'postgres_changes',
23        { event: 'UPDATE', schema: 'public', table: 'todos' },
24        (payload) => {
25          setTodos((prev) =>
26            prev.map((t) =>
27              t.id === payload.new.id ? (payload.new as Todo) : t
28            )
29          )
30        }
31      )
32      .on(
33        'postgres_changes',
34        { event: 'DELETE', schema: 'public', table: 'todos' },
35        (payload) => {
36          setTodos((prev) =>
37            prev.filter((t) => t.id !== payload.old.id)
38          )
39        }
40      )
41      .subscribe()
42
43    return () => {
44      supabase.removeChannel(channel)
45    }
46  }, [userId, setTodos])
47}

1const addTodoWithFeedback = async (task: string) => {
2  const tempId = crypto.randomUUID()
3  const optimisticTodo = {
4    id: tempId,
5    user_id: userId,
6    task,
7    is_complete: false,
8    created_at: new Date().toISOString(),
9  }
10
11  setTodos((prev) => [...prev, optimisticTodo])
12
13  const { data, error } = await supabase
14    .from('todos')
15    .insert({ user_id: userId, task, is_complete: false })
16    .select()
17    .single()
18
19  if (error) {
20    setTodos((prev) => prev.filter((t) => t.id !== tempId))
21    // Show user-facing feedback
22    toast.error(`Could not add todo: ${error.message}`)
23    return
24  }
25
26  setTodos((prev) =>
27    prev.map((t) => (t.id === tempId ? data : t))
28  )
29}