[GH-ISSUE #188] New socket connected x30-200 times after receiving 4 items #89

New issue

Closed

opened 2026-05-23 08:30:02 -06:00 by gitea-mirror · 2 comments

gitea-mirror commented

2026-05-23 08:30:02 -06:00

Owner

Originally created by @meaningg on GitHub (Dec 12, 2022).
Original GitHub issue: https://github.com/appy-one/acebase/issues/188

When receiving data from a remote server made on acebase-server to the frontend made on acebase-client new sockets start constantly connecting and it comes up to two hundred in a couple of seconds
upd: This happens when the page is refreshed and blocks other actions with the database, such as adding new items

Code:

import styles from "../styles/Home.module.scss";
import { useState } from "react";
import { AceBaseClient } from "acebase-client";
export default function Home() {
  const [newPostModalIsOpen, setNewPostModalIsOpen] = useState(false);
  const [postsIsLoading, setPostsIsLoading] = useState(true);
  const [posts, setPosts] = useState([]);
  const db = new AceBaseClient({
    host: "localhost",
    port: 5757,
    dbname: "mydb",
    https: false,
  });

  function getPostsList() {
    db.ref("postsTest")
      .get()
      .then((snap) => {
        const posts = [];
        const data = snap.val();
        for (let i in data) {
          posts.push(data[i]);
        }
        setPosts(posts);
        setPostsIsLoading(false);
      });
  }
  getPostsList();

  const handleSubmit = (event) => {
    event.preventDefault();

    db.ref("postsTest")
      .push({
        title: "Test",
        text: "test test test yo",
      })
      .then((postRef) => {
        setNewPostModalIsOpen(false);
      });
  };

(Probably my mistake here somewhere, but I can't figure out where :))

Originally created by @meaningg on GitHub (Dec 12, 2022). Original GitHub issue: https://github.com/appy-one/acebase/issues/188 When receiving data from a remote server made on acebase-server to the frontend made on acebase-client new sockets start constantly connecting and it comes up to two hundred in a couple of seconds upd: This happens when the page is refreshed and blocks other actions with the database, such as adding new items ![image](https://user-images.githubusercontent.com/61989272/206988004-5fd134c8-4ce3-4714-9ed7-2c2ca24f6a10.png) Code: ```jsx import styles from "../styles/Home.module.scss"; import { useState } from "react"; import { AceBaseClient } from "acebase-client"; export default function Home() { const [newPostModalIsOpen, setNewPostModalIsOpen] = useState(false); const [postsIsLoading, setPostsIsLoading] = useState(true); const [posts, setPosts] = useState([]); const db = new AceBaseClient({ host: "localhost", port: 5757, dbname: "mydb", https: false, }); function getPostsList() { db.ref("postsTest") .get() .then((snap) => { const posts = []; const data = snap.val(); for (let i in data) { posts.push(data[i]); } setPosts(posts); setPostsIsLoading(false); }); } getPostsList(); const handleSubmit = (event) => { event.preventDefault(); db.ref("postsTest") .push({ title: "Test", text: "test test test yo", }) .then((postRef) => { setNewPostModalIsOpen(false); }); }; ``` (Probably my mistake here somewhere, but I can't figure out where :))

gitea-mirror closed this issue

2026-05-23 08:30:03 -06:00

gitea-mirror commented

2026-05-23 08:30:05 -06:00

Author

Owner

@appy-one commented on GitHub (Dec 12, 2022):

I don't have any experience with React, but I reckon the db code is now triggered to run each redraw cycle

@appy-one commented on GitHub (Dec 12, 2022): I don't have any experience with React, but I reckon the db code is now triggered to run each redraw cycle

gitea-mirror commented

2026-05-23 08:30:05 -06:00

Author

Owner

@meaningg commented on GitHub (Dec 12, 2022):

Yes, it did create a new connection for each rendering. I managed to fix it by throwing the initialization of the database and the initial list to useEffect

useEffect(() => {
    return () => {
      const db = new AceBaseClient({
        host: "localhost",
        port: 5757,
        dbname: "mydb",
        https: false,
      });
      setDb(db);
      getPostsList(db);
    };
  }, []);

  function getPostsList(db) {
    db.ref("postsTest")
      .get()
      .then((snap) => {
        const posts = [];
        const data = snap.val();
        for (let i in data) {
          posts.push(data[i]);
        }
        setPosts(posts);
        setPostsIsLoading(false);
      });
  }

@meaningg commented on GitHub (Dec 12, 2022): Yes, it did create a new connection for each rendering. I managed to fix it by throwing the initialization of the database and the initial list to useEffect ```jsx useEffect(() => { return () => { const db = new AceBaseClient({ host: "localhost", port: 5757, dbname: "mydb", https: false, }); setDb(db); getPostsList(db); }; }, []); function getPostsList(db) { db.ref("postsTest") .get() .then((snap) => { const posts = []; const data = snap.val(); for (let i in data) { posts.push(data[i]); } setPosts(posts); setPostsIsLoading(false); }); } ```