#Component seem to run code twice on each open

6 messages · Page 1 of 1 (latest)

quartz heron
#

Component seem to run code twice on each open

#

Update: I have a useVisibleTask in dbSettingsView, that runs a function that is found in the component. Is it right that the whole component's code gets run again when running one function in useVisibleTask? Or is this a bug

viral schooner
#

please show the code. Normally the render doesn't run again, unless you're referencing signals

quartz heron
#

Sure!

What do you mean by referencing signals, in the html or in the function underneath?

export default component$(() => {

  const databaseChosen = useSignal(false);
  const dbListEmpty = useSignal(false);

  const databases = useStore({ array : [] as DbModel[] });
  const currDbData = useContext(DbOpenContext);
  var mainDbData = useStore({ "data": {} as DbModel });

  
  const loadDb = $(() => {

    const clientDbList = new ClientDbList(() => {

      var list:DbModel[] = [];

      clientDbList.getDbs(list, () => {

        if (list.length == 0) {
          dbListEmpty.value = true;
        }

        databases.array = list;

        list.forEach(dbData => {

          if (dbData[Col_DbID] == currDbData.dbId.value) {
            mainDbData.data = dbData;
            databaseChosen.value = true;
          }
        });

        const databaseList = document.getElementById("databaseList");
        initScrollFaders(databaseList);
      });
    });
  });

  ... Other code ...


  console.log("DB SETTINGS");

  useVisibleTask$(() => {

    loadDb(); 

    // If I comment loadDb() out, the 
    // console.log above fires only once.
    // Only client side.
    // The reason for loading database client-side
    // is because I'm using IndexedDB
  });
  

  return (
    <>
        ... lots of code :) ...
    </>
  )
}
viral schooner
#

Hmm. Note that you should await the loadDb call.

Are you sure you're not using any signals/stores in the render body? And that all calculations with signals used in the returned template are using only one signal?

quartz heron
#

I do use signals to render stuff in the returned html, if that is what you mean. E.g:

{ dbListEmpty.value && 
  <h3 style="color: darkgray; margin:auto 10px;">
    {"<-- Add a new project here"}
  </h3>
}

and store:

{ databases.array.map((dbData : DbModel) => (
    <div style="display:flex;" key={dbData[Col_DbID]}>
      ... 
    </div>
  ))
}

So is the signals the cause for the js / ts re-running in the component function? Like the console.log("DB SETTINGS"); in the first example?