UseEffect would run more than one time in ReactJS [duplicate]

Question

The useEffect would run more than once for some reason (usually twice) and would print my message twice (or more). I have tried multiple solutions even with useMontainEffect but the result is always the same. Any solutions?

import './App.css';
import io from 'socket.io-client'
import { useEffect, useRef, useState } from 'react'
import React from 'react';
import ReactDOM from "react-dom/client";


const socket = io.connect("http://localhost:3001");

function App() {
  const [message, setMessage] = useState("");
  const [state, setState] = useState([]);
  const [chat, setChat] = useState([]);
  const socketRef = useRef();
  const sendMessage = () => {
    socket.emit("send_message", { message });
  };

  const renderChat = () => {
    return (
        chat.map(msg => {
            return (
                <h3>{msg.message['message']}</h3>
            )
        })
    )
}


useEffect(() => {
  socket.on("receive_message", message => {
    setChat(prevState => [...prevState, {message}]);
  });
}, [socket])


  return (
    <div className="App">
      <input placeholder="Message..." onChange={(event) => {
        setMessage(event.target.value);}}
        />
      <button onClick={sendMessage}>Send Message</button>
      <h1>Message:</h1>
      {renderChat()}
    </div>
  );
}

export default App;

Does this answer your question? React Hooks: useEffect() is called twice even if an empty array is used as an argument — Konrad
– Konrad, Commented Sep 27, 2022 at 18:20
Its caused due to the Strict Mode. Disable it and try again. — Nirmal Kumar
– Nirmal Kumar, Commented Sep 27, 2022 at 18:21
@NirmalKumar disabling the Strict Mode is exactly what you shouldn't do — Konrad
– Konrad, Commented Sep 27, 2022 at 18:24

aziz punjani · Accepted Answer · 2022-09-27 18:26:55Z

1

In strict mode the component will be mounted, unmounted, then re-mounted. You can add a cleanup function. The double invocation however is expected.

useEffect(() => {
  const listener = message => {
    setChat(prevState => [...prevState, {message}]);
  };
  socket.on("receive_message", listener);
  return () => socket.off('receive_message', listener);
}, [socket])

answered Sep 27, 2022 at 18:26

aziz punjani

25.8k9 gold badges49 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Youssouf Oumar Over a year ago

Aziz's answer is correct. To complete it, you can visit stackoverflow.com/a/72238236/15288641.

lucky · Accepted Answer · 2022-09-27 18:58:19Z

-1

If u want to check, U can turn off the strict mode and check exactly how many times the useEffect call back function runs

Note : but don't always turn off the strict mode because

--> strict mode is actually because if we forgot any cleanup function in useEffect , ui behaves differently

--> with that only we came to know that we did something mistake

--> strict mode is present in only development mode, it won't be in production mode

answered Sep 27, 2022 at 18:58

lucky

311 silver badge8 bronze badges

Collectives™ on Stack Overflow

UseEffect would run more than one time in ReactJS [duplicate]

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related