diff --git a/guides/reactjs-relay.md b/guides/reactjs-relay.md index 9b1a8788d8..4c0c6cdfbd 100644 --- a/guides/reactjs-relay.md +++ b/guides/reactjs-relay.md @@ -164,7 +164,7 @@ async function sendMessage(message, timestamp, waku) { } ``` -Then, add a button to send messages to the `App` function: +Then, add a button to the `App` function: ```js function App() { @@ -178,12 +178,14 @@ function App() { }, [waku, wakuStatus]); const sendMessageOnClick = () => { + // Check Waku is started and connected first. if (wakuStatus !== 'Ready') return; sendMessage(`Here is message #${sendCounter}`, waku, new Date()).then(() => console.log('Message sent') ); + // For demonstration purposes. setSendCounter(sendCounter + 1); }; @@ -191,7 +193,7 @@ function App() {

{wakuStatus}

-
@@ -203,9 +205,11 @@ function App() { # Receive Messages To process incoming messages, you need to register an observer on Waku Relay. -First, you need to define the function that acts as observer. +First, you need to define the observer function. -As you are passing the function to Waku Relay, it is best to use `React.useCallback` so that the reference to the function remains the same: +You will need to remove the observer when the component unmount. +Hence, you need the reference to the function to remain the same. +For that, use `React.useCallback`: ```js const processIncomingMessage = React.useCallback((wakuMessage) => { @@ -224,7 +228,7 @@ const processIncomingMessage = React.useCallback((wakuMessage) => { }, []); ``` -Then, add this function as an observer to Waku Relay. +Then, add this observer to Waku Relay. Do not forget to delete the observer is the component is being unmounted: ```js @@ -247,7 +251,7 @@ The Waku work is now done. Your dApp is able to send and receive messages using Waku. For the sake of completeness, let's display received messages on the page. -First, modify the `App()` function to store incoming messages: +First, add incoming messages to the state of the `App` component: ```js function App() { @@ -274,7 +278,7 @@ function App() { // ... } ``` -Then, add the messages to the rendering : +Then, render the messages: ```js function App() { @@ -304,6 +308,7 @@ function App() { } ``` -And VoilĂ ! You should now be able to send and receive messages from two different browsers. +And VoilĂ ! You should now be able to send and receive messages. +Try out by opening the app from different browsers. You can see the complete code in the [Minimal JS Web Chat App](/examples/min-js-web-chat).