how to avoid react usestate rendering duplicate?

Question

my usesate why rendering two times?

I used [] at the end of the usestate so it should render once but it fetching data two times which gives me a duplicate render.

useEffect(() => {
    const socket = io("http://localhost:3001");
    let public_key;
    if (roomID.length == 0) {
      axios
        .post(
          `${domain}/chat/publickey?is_update_key=false`,
          {},
          { withCredentials: true }
        )
        .then((res) => {
          console.log(res);
          public_key = res.data.detail;
          console.log(public_key);
          socket.emit("admin_room", public_key, socket.id);
          axios
            .get(`${domain}/chat/admin/${public_key}?page=1&items_per_page=5`, {
              withCredentials: true,
            })
            .then((res) => {
              setRoomID((prev) => [...prev, res.data]);
            });
        })
        .catch((err) => {
          console.log(err);
        });
    }

    socket.on("customer_message", (data) => {...my othessocket io code
      return () => {
      socket.disconnect();
    };
  }, []);

Hooks get called twice in non-production mode. – Mr. Polywhirl Jul 17 '23 at 16:18 — Mr. Polywhirl, Jul 17 '23 at 16:18
Why `setRoomID` takes an array? – Konrad Jul 17 '23 at 16:38 — Konrad, Jul 17 '23 at 16:38

score 0 · Answer 1 · answered Jul 17 '23 at 16:29

You are calling setRoomID() twice in the useEffect hook.

 const [roomID, setRoomID] = useState([]);

useEffect(() => {
  const socket = io("http://localhost:3001");
  let public_key;
  if (roomID.length == 0) {
    axios
      .post(
        `${domain}/chat/publickey?is_update_key=false`,
        {},
        { withCredentials: true }
      )
      .then((res) => {
        console.log(res);
        public_key = res.data.detail;
        console.log(public_key);
        socket.emit("admin_room", public_key, socket.id);
        setRoomID([public_key]);
      })
      .catch((err) => {
        console.log(err);
      });
  }

  socket.on("customer_message", (data) => {...my othessocket io code
    return () => {
      socket.disconnect();
    };
  }, []);
}, []);

score -1 · Answer 2 · answered Jul 17 '23 at 16:22

-1

if you have StrictMode turned on, it will run useEffect twice. You can turn off StrictMode but I think the proper solution is to get rid of side effects instead of turning off StrictMode. But in production build, it will not render twice. It is only a dev thing to help remove unexpected side-effects. In you app.js if you have something like this:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Remove the StrictMode wrapper. But again, the proper thing to do is solve the issue, not remove StrictMode. Hope this helps.

answered Jul 17 '23 at 16:22

SSubedi

79
1
11

I am not using StrictMode anywhere – boyenec Jul 17 '23 at 16:25
if it is not due to strict mode, then there is some side effect going on causing your component to re-render. UseEffect() is being ran once per render, but some state change maybe causing double render... look at setRoomID().. that is the only state change i see in the code you gave... – SSubedi Jul 17 '23 at 16:36

how to avoid react usestate rendering duplicate?

2 Answers2