Split useEffect calls

Better React practice.

examples/web-chat/src/App.tsx

@@ -86,8 +86,17 @@ export default function App() {
     localStorage.setItem('nick', nick);
   }, [nick]);
 
-  // Waku: Start, process messages, send messages
   useEffect(() => {
+    if (stateWaku) return;
+
+    initWaku(setWaku)
+      .then(() => console.log('Waku init done'))
+      .catch((e) => console.log('Waku init failed ', e));
+  }, [stateWaku]);
+
+  useEffect(() => {
+    if (!stateWaku) return;
+
     const handleRelayMessage = (wakuMsg: WakuMessage) => {
       console.log('Message received: ', wakuMsg);
       const msg = Message.fromWakuMessage(wakuMsg);
@@ -96,6 +105,14 @@ export default function App() {
       }
     };
 
+    stateWaku.relay.addObserver(handleRelayMessage, [ChatContentTopic]);
+
+    return;
+  }, [stateWaku]);
+
+  useEffect(() => {
+    if (!stateWaku) return;
+
     const handleProtocolChange = async (
       waku: Waku,
       { peerId, protocols }: { peerId: PeerId; protocols: string[] }
@@ -118,13 +135,6 @@ export default function App() {
       }
     };
 
-    if (!stateWaku) {
-      initWaku(setWaku)
-        .then(() => console.log('Waku init done'))
-        .catch((e) => console.log('Waku init failed ', e));
-    } else {
-      stateWaku.relay.addObserver(handleRelayMessage, [ChatContentTopic]);
-
     stateWaku.libp2p.peerStore.on(
       'change:protocols',
       handleProtocolChange.bind({}, stateWaku)
@@ -137,7 +147,6 @@ export default function App() {
         handleProtocolChange.bind({}, stateWaku)
       );
     };
-    }
   }, [stateWaku]);
 
   return (