diff --git a/examples/slack-clone/components/Message.js b/examples/slack-clone/components/Message.js
index dcdc453123b..548eddf0a14 100644
--- a/examples/slack-clone/components/Message.js
+++ b/examples/slack-clone/components/Message.js
@@ -2,7 +2,7 @@ const Message = ({ message }) => (
   <>
     <div className="flex items-center">
       <div className="">
-        <p className="text-white font-bold">{message.author.username}</p>
+        <p className="text-white font-bold">{message.user_id}</p>
         <p className="text-white">{message.message}</p>
       </div>
     </div>
diff --git a/examples/slack-clone/package-lock.json b/examples/slack-clone/package-lock.json
index 15380962ea2..c7058d601c1 100644
--- a/examples/slack-clone/package-lock.json
+++ b/examples/slack-clone/package-lock.json
@@ -1403,16 +1403,6 @@
         "colors": "1.1.2",
         "commander": "2.9.0",
         "promise": "7.1.1"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "2.9.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz",
-          "integrity": "sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=",
-          "requires": {
-            "graceful-readlink": ">= 1.0.0"
-          }
-        }
       }
     },
     "ansi-colors": {
@@ -2398,9 +2388,12 @@
       }
     },
     "commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz",
+      "integrity": "sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=",
+      "requires": {
+        "graceful-readlink": ">= 1.0.0"
+      }
     },
     "commondir": {
       "version": "1.0.1",
@@ -9756,6 +9749,13 @@
         "commander": "^2.20.0",
         "source-map": "~0.6.1",
         "source-map-support": "~0.5.12"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+        }
       }
     },
     "terser-webpack-plugin": {
@@ -10325,7 +10325,8 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -10343,11 +10344,13 @@
             },
             "balanced-match": {
               "version": "1.0.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -10360,15 +10363,18 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -10471,7 +10477,8 @@
             },
             "inherits": {
               "version": "2.0.4",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -10481,6 +10488,7 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -10493,17 +10501,20 @@
             "minimatch": {
               "version": "3.0.4",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.9.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -10520,6 +10531,7 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -10600,7 +10612,8 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -10610,6 +10623,7 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -10685,7 +10699,8 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -10715,6 +10730,7 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -10732,6 +10748,7 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -10770,11 +10787,13 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.1.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             }
           }
         },
diff --git a/examples/slack-clone/pages/channels/[id].js b/examples/slack-clone/pages/channels/[id].js
index faaf25ee6a7..d5d6f6ed7ee 100644
--- a/examples/slack-clone/pages/channels/[id].js
+++ b/examples/slack-clone/pages/channels/[id].js
@@ -16,15 +16,16 @@ const ChannelsPage = props => {
   const { id: channelId } = router.query
   const [channels, setChannels] = useState([])
   const [messages, setMessages] = useState([])
+  const [changes, setChanges] = useState([])
 
   // Initial load of data
   useEffect(() => {
     try {
       setChannels(props.channels)
-      const mySubscription = supabase
+      supabase
         .from('messages')
         .on('*', payload => {
-          console.log('Change received!', payload)
+          setChanges([payload.new].concat(changes))
         })
         .subscribe()
     } catch (error) {
@@ -32,6 +33,15 @@ const ChannelsPage = props => {
     }
   }, [])
 
+  // Initial load of data
+  useEffect(() => {
+    try {
+      if (changes.length) setMessages(messages.concat(changes[0]))
+    } catch (error) {
+      console.log('Error: ', error)
+    }
+  }, [changes])
+
   // Update when the route changes
   useEffect(() => {
     try {
@@ -41,6 +51,15 @@ const ChannelsPage = props => {
     }
   }, [router.query.id])
 
+  // // Update when the messages changes
+  // useEffect(() => {
+  //   try {
+  //     console.log(messages)
+  //   } catch (error) {
+  //     console.log('Error: ', error)
+  //   }
+  // }, [messages])
+
   // Render the channels and messages
   return (
     <Layout channels={channels}>