State not updating inside socket.on custom event

[omkarajagunde]

Hello peeps,

I am trying to make a realtime chatting app, using nextjs - 12.0.4, socket.io-client - "^4.4.0", react - "17.0.2" (hooks), here is the code snippet where the setState is not updating the "userFoundFlag"

not finding any concrete help on forums/blogs hence putting this here

any ideas/suggestions/help is very much appreciated, Thanks!

for debugging purposes please refer to full code below especially the "socketRef.current.on("CLIENT_PAIRED..." inside useEffect()

socketRef.current.on("CLIENT_PAIRED", (data) => {
    setState((prevState) => ({ ...prevState, userFoundFlag: true }));
    console.log("Search finished, user found for live chat :: ", data);
});

full code is here

import React, { useState, useEffect, useRef, useCallback } from "react";
import Image from "next/image";
import Link from "next/link";
import DarkModeToggle from "react-dark-mode-toggle";
import TextareaAutosize from "react-textarea-autosize";
import AwesomeDebouncePromise from "awesome-debounce-promise";

import SiteLogoWhite from "../../Resources/SiteLogoWhite.svg";
import SendIcon from "../../Resources/SendIcon.svg";
import ImageIcon from "../../Resources/ImageIcon.svg";

// Styles
import styles from "../../styles/live.module.scss";

import socketIOClient from "socket.io-client";

function Index() {
	const [state, setState] = useState({
		isMobileView: false,
		isDarkMode: true,
		isSenderTyping: true,
		isRulesViewOpen: false,
		isNewSessionStatus: "New",
		mySocketId: "",
		**userFoundFlag: false,**
		newTabs: ["Chat settings", "My Friends"],
		settingsTabViewOptions: [],
		settingsTabIndex: 2,
		tabIndex: 0,
		commonInterestsArray: [],
		smartRepliesArray: [],
		restrictedModeKeywordsArray: [],
		restrictedModeNewKeywordsArray: [],
		chatMessagesArray: [],
	});
	const socketRef = useRef();

	// Run only first time when component loads
	useEffect(() => {
		// set initial level
		if (window.innerWidth <= 768) setState((prevState) => ({ ...prevState, isMobileView: true }));
		else setState((prevState) => ({ ...prevState, isMobileView: false }));

		window.addEventListener("resize", () => {
			if (window.innerWidth < 768) setIsMobileViewDebouncer(true);
			else setIsMobileViewDebouncer(false);
		});

		socketRef.current = socketIOClient(process.env.NEXT_PUBLIC_WebsocketURL, {
			path: "/live",
			query: { msg: "OmkarAjagunde" },
			transports: ["websocket"],
		});

		socketRef.current.on("connect", () => {
			console.log("socket connected with id :: ", socketRef.current.id);
			setState((prevState) => ({ ...prevState, mySocketId: socketRef.current.id }));
		});

		**socketRef.current.on("CLIENT_PAIRED", (data) => {
			setState((prevState) => ({ ...prevState, userFoundFlag: true }));
			console.log("Search finished, user found for live chat :: ", data, socketRef);
		});**

		socketRef.current.on("chatting", (data) => {
			console.log(data);
		});

		socketRef.current.on("typing", (data) => {
			console.log(data);
		});

		return () => {
			socketRef.current.disconnect();
			window.removeEventListener("resize", () => {});
		};
	}, []);

	// see chatMessageArray updates
	useEffect(() => {
		let elemsArray = document.querySelectorAll("#chatMessage");
		let elemChatContainer = document.getElementById("chatContainer");
		elemsArray = Array.from(elemsArray);
		let scrollElem = elemsArray[elemsArray.length - 1];

		// On mobile scroll to fix scrollIntoView we call it in setTimeOut when default keyboard is closed
		setTimeout(() => {
			if (scrollElem) scrollElem.scrollIntoView();
		}, 200);

		// Update height flag to remove position: absolute on chatContainer

		return () => {
			//
		};
	}, [state.chatMessagesArray]);

	// Debouncing resize event
	const setIsMobileViewDebouncer = AwesomeDebouncePromise((flag) => {
		setState((prevState) => ({ ...prevState, isMobileView: flag }));
		console.log("resize event triggered, updating local component state");
	}, 500);

	const handleToggleMode = (e) => {
		console.log(setState);
		setState((prevState) => ({ ...prevState, isDarkMode: !state.isDarkMode }));
	};

	const handleSendClick = () => {
		let elem = document.getElementById("inputText");
		let chatArray = [...state.chatMessagesArray];
		chatArray.map((msg, index) => {
			msg.newlyAdded = false;
		});
		if (elem.value.trim().length > 0) {
			let sendMsgObject = {
				type: "sent",
				msg: elem.value,
				senderName: "Daniel",
				timeStamp: "1:09 pm, 16/12/2021",
				newlyAdded: true,
			};
			elem.value = "";
			setState((prevState) => ({ ...prevState, chatMessagesArray: [...chatArray, sendMsgObject] }));
		}
	};

	const handleSmartReplyClick = (reply) => {
		let chatArray = [...state.chatMessagesArray];
		chatArray.map((msg, index) => {
			msg.newlyAdded = false;
		});
		let sendMsgObject = {
			type: "sent",
			msg: reply,
			senderName: "Daniel",
			timeStamp: "1:09 pm, 16/12/2021",
			newlyAdded: true,
		};
		setState((prevState) => ({ ...prevState, chatMessagesArray: [...chatArray, sendMsgObject] }));
	};

	const handleToggleRules = () => {
		setState((prevState) => ({ ...prevState, isRulesViewOpen: !prevState.isRulesViewOpen }));
	};

	const handleStopRulesScreenPropagation = (e) => {
		e.stopPropagation();
	};

	const handleAddNewKeywordBackToRestrictedMode = (index) => {
		const localNewKeywordsArray = [...state.restrictedModeKeywordsArray];
		setState((prevState) => ({
			...prevState,
			restrictedModeNewKeywordsArray: [localNewKeywordsArray[index], ...state.restrictedModeNewKeywordsArray],
			restrictedModeKeywordsArray: localNewKeywordsArray.filter((val, keyIndex) => keyIndex !== index),
		}));
	};

	const handleAddNewKeywordToRestrictedMode = (index) => {
		const localNewKeywordsArray = [...state.restrictedModeNewKeywordsArray];
		setState((prevState) => ({
			...prevState,
			restrictedModeKeywordsArray: [...state.restrictedModeKeywordsArray, localNewKeywordsArray[index]],
			restrictedModeNewKeywordsArray: localNewKeywordsArray.filter((val, keyIndex) => keyIndex !== index),
		}));
	};

	const handleAddNewKeyword = () => {
		let elem = document.getElementById("keywordInput");
		let value = elem.value;
		if (value.trim().length > 0) {
			setState((prevState) => ({
				...prevState,
				restrictedModeKeywordsArray: [...state.restrictedModeKeywordsArray, value.trim()],
			}));
			elem.value = "";
		}
	};

	const handleChangeSessionStatus = () => {
		if (state.isNewSessionStatus === "New") {
			// socket event to search and get paired with other user
			// socket initialisation

			console.log("trying to connect to socket server :: ");
			const searchInterval = setInterval(() => {
				if (!state.userFoundFlag) {
					console.log("CLIENT_INTRODUCTION if:: ", state);
					socketRef.current.emit("CLIENT_INTRODUCTION", {
						socketId: socketRef.current.id,
						action: "CLIENT_INTRODUCTION",
						actionData: {
							interests: state.commonInterestsArray,
							genderInterest: state.settingsTabViewOptions[state.settingsTabIndex],
							pairFound: false,
						},
					});
				} else {
					console.log("CLIENT_INTRODUCTION else:: ", state.userFoundFlag);
					setState((prevState) => ({ ...prevState, isNewSessionStatus: "Skip" }));
					console.log(searchInterval);
					clearInterval(searchInterval);
				}
			}, 5000);
		}
		if (state.isNewSessionStatus === "Skip") setState((prevState) => ({ ...prevState, isNewSessionStatus: "Really" }));
		if (state.isNewSessionStatus === "Really") setState((prevState) => ({ ...prevState, isNewSessionStatus: "New" }));
	};

	const handleTabChange = (index) => {
		setState((prevState) => ({ ...prevState, tabIndex: index }));
	};

	const handleSettingsTabChange = (index) => {
		setState((prevState) => ({ ...prevState, settingsTabIndex: index }));
	};

	const handleAddInterest = (e) => {
		let value = e.target.value;
		if (e.key === "Enter" && value.trim().length > 0) {
			setState((prevState) => ({
				...prevState,
				commonInterestsArray: [...state.commonInterestsArray, value.trim()],
			}));
			document.getElementById("interestInput").value = "";
		}
	};

	const handleRemoveInterest = (interestIndex) => {
		setState((prevState) => ({
			...prevState,
			commonInterestsArray: state.commonInterestsArray.filter((val, index) => interestIndex !== index),
		}));
	};

	// rendering desktop view
	const renderDesktopView = () => {
		return <div>Live Chat Page on desktop, coming soon with a boom</div>;
	};

	const renderCorrectTab = () => {
		if (state.tabIndex === 0) {
			return (
				<div className={styles.chatContainer__settings}>
					<div className={styles.chatContainer__settingsTitle}>Connect With</div>
					<div className={styles.chatContainer__settingsSubTitle}>
						To use this confirm your gender by <b>clicking here</b>
					</div>
					<div className={styles.chatContainer__settingsTabView}>
						{state.settingsTabViewOptions.map((tab, index) => (
							<div
								style={{ backgroundColor: state.settingsTabIndex === index ? "#e56b9f" : null, color: state.settingsTabIndex === index ? "white" : null }}
								onClick={() => handleSettingsTabChange(index)}
								key={tab}
							>
								{tab}
							</div>
						))}
					</div>

					<div className={styles.chatContainer__settingsTitle}>Add Common Interests</div>
					<div className={styles.chatContainer__settingsSubTitle}>Add and press Enter e.g. Fitness, workout, science</div>
					<div className={styles.chatContainer__commonInterestsContainer}>
						{state.commonInterestsArray.map((interest, index) => (
							<div key={`${interest}-${index}`}>
								{interest} <b onClick={() => handleRemoveInterest(index)}>X</b>
							</div>
						))}
						<input id="interestInput" placeholder="Add here" onKeyPress={handleAddInterest} />
					</div>

					<div className={styles.chatContainer__startSession}>
						<div>Want to advertise on blabla? - Read here</div>
						<button>Start session</button>
					</div>
				</div>
			);
		}

		if (state.tabIndex === 1) {
			return <div className={styles.chatContainer__myFriends}>my friends</div>;
		}
	};

	// rendering the mobile view
	const renderMobileView = () => {
		return (
			<div className={styles.chatContainer} id="chatContainer" style={{ overflowY: state.isRulesViewOpen ? "hidden" : null }}>
				{state.isRulesViewOpen && (
					<div className={styles.chatContainer__rulesView} onClick={handleToggleRules}>
						<div className={styles.chatContainer__rulesUpArrow}></div>
						<div className={styles.chatContainer__rulesScreen} onClick={handleStopRulesScreenPropagation}>
							<div className={styles.chatContainer__rulesTitle}>
								This is a <b>restricted mode</b> where the following words can’t be used while chatting (click to remove)
							</div>
							<div className={styles.chatContainer__keywordContainer}>
								{state.restrictedModeKeywordsArray.map((keyword, index) => (
									<div key={`${keyword}-${index}`} onClick={() => handleAddNewKeywordBackToRestrictedMode(index)} className={styles.chatContainer__keyword}>
										{keyword}
									</div>
								))}
							</div>
							<div className={styles.chatContainer__rulesTitle} style={{ marginTop: "20px" }}>
								You can add more <b>keywords</b> to restricted mode from below (click to add)
							</div>
							<div className={styles.chatContainer__keywordContainer} style={{ overflowX: "scroll", flexWrap: "nowrap" }}>
								{state.restrictedModeNewKeywordsArray.map((keyword, index) => (
									<div
										key={`${keyword}-${index}`}
										className={styles.chatContainer__keyword}
										onClick={() => handleAddNewKeywordToRestrictedMode(index)}
										style={{ background: "#e56b9f", padding: "10px 15px 10px 15px" }}
									>
										{keyword}
									</div>
								))}
							</div>

							<div className={styles.chatContainer__rulesTitle} style={{ marginTop: "20px" }}>
								1. BlaBla app respects and <b>encourages Freedom of speech</b>, but BlaBla will not tolerate practice of freedom of speech that will trouble/harm any other person that{" "}
								<b>includes discrimination on any basis</b> (e.g. Race, Place, religion etc) or pratices that are illegal as per the land of law
							</div>

							<div className={styles.chatContainer__rulesTitle} style={{ marginTop: "10px" }}>
								2. BlaBla app is a free to use service and does not give any garantee/warantee of software, <b>please you this service at your own risk</b>
							</div>

							<div className={styles.chatContainer__rulesTitle} style={{ marginTop: "10px" }}>
								3. BlaBla app does not in any way saves your chat logs
							</div>

							<div className={styles.chatContainer__rulesTitle} style={{ marginTop: "40px", marginBottom: "10px" }}>
								You can also enter custom keywords
							</div>
							<div className={styles.chatContainer__keywordInput}>
								<input placeholder="Enter your keyword here" id="keywordInput" />
								<div onClick={handleAddNewKeyword}>save</div>
							</div>
						</div>
					</div>
				)}
				<div className={styles.chatContainer__topbar}>
					<div className={styles.chatContainer__siteLogo}>
						<Image src={SiteLogoWhite.src} alt="blabla-siteLogo.png" width={state.isMobileView ? 140 : 200} height={state.isMobileView ? 40 : 80} />
					</div>
					<div className={styles.chatContainer__chatOptions}>
						<button onClick={handleToggleRules}>Rules</button>
						<DarkModeToggle size={100} onChange={handleToggleMode} checked={state.isDarkMode} />
					</div>
				</div>

				{state.chatMessagesArray.map((msg, index) => (
					<div className={styles.chatContainer__msgContainer} id="chatMessage" key={`${msg.msg}-${index}`} style={{ justifyContent: msg.type === "received" ? "flex-start" : "flex-end" }}>
						<div
							style={{ animation: msg.newlyAdded ? "newMessage 500ms ease-in-out" : null }}
							className={msg.type === "received" ? styles.chatContainer__receivedMsgContainer : styles.chatContainer__sentMsgContainer}
						>
							<div className={styles.chatContainer__receivedMsg}>{msg.msg}</div>
							<div className={styles.chatContainer__receivedMsgName}>
								<b>{msg.senderName}</b>, {msg.timeStamp}
							</div>
						</div>
					</div>
				))}
				{state.isSenderTyping && (
					<div className={styles.chatContainer__typingContainer}>
						<div></div>
						<div></div>
						<div></div>
					</div>
				)}

				<div className={styles.chatContainer__controls}>
					{state.isNewSessionStatus === "New" && (
						<div className={styles.chatContainer__newSessionScreen} onClick={handleChangeSessionStatus}>
							<div className={styles.chatContainer__newSessionOptions} onClick={(e) => e.stopPropagation()}>
								<div className={styles.chatContainer__newAd}>Your banner ad can be here - check out</div>
								<div className={styles.chatContainer__newTabs}>
									{state.newTabs.map((tab, index) => (
										<div
											style={{ backgroundColor: index === state.tabIndex ? "#474663" : null, color: index === state.tabIndex ? "white" : null }}
											onClick={() => handleTabChange(index)}
											key={tab}
										>
											{tab}
										</div>
									))}
								</div>
								{renderCorrectTab()}
							</div>
							<div className={styles.chatContainer__arrowDown}></div>
						</div>
					)}
					<div className={styles.chatContainer__chatAd}>
						iPhone selling for 20k, only 10 days used -
						<div className={styles.chatContainer__adAction}>
							<Link
								href={{
									pathname: "/ads",
								}}
							>
								Visit now
							</Link>
						</div>
					</div>
					<div className={styles.chatContainer__smartReply}>
						<div className={styles.chatContainer__skipNewReally} onClick={handleChangeSessionStatus}>
							{state.isNewSessionStatus}?
						</div>
						{state.smartRepliesArray.map((reply, index) => (
							<div
								style={{ pointerEvents: state.isNewSessionStatus === "New" ? "none" : null }}
								onClick={() => handleSmartReplyClick(reply)}
								className={styles.chatContainer__smartReplyItem}
								key={`${index}-${reply}`}
							>
								{reply}
							</div>
						))}
					</div>
					<div className={styles.chatContainer__input} style={{ pointerEvents: state.isNewSessionStatus === "New" ? "none" : null }}>
						{/* <div className={styles.chatContainer__skipNewReally}>Skip?</div> */}
						<div>
							<Image src={ImageIcon.src} alt="image-icon" width={25} height={25} />
						</div>
						<TextareaAutosize id="inputText" placeholder="your message here" className={styles.chatContainer__textarea} />
						<div>
							<Image onClick={handleSendClick} src={SendIcon.src} alt="send-icon" width={30} height={30} />
						</div>
					</div>
				</div>
			</div>
		);
	};

	const { isMobileView } = state;
	return <div style={{ height: "100%" }}>{isMobileView ? renderMobileView() : renderDesktopView()}</div>;
}

export default Index;

[darrachequesne]

Hi! That's quite a big code example 😄 could you please try to reduce it to the bare minimum? (and include the server logic)

You can also check the React Native example here: https://github.com/socketio/socket.io/tree/master/examples/react-native