Problems/bugs with use React useState in big Variable length and f7.router menu links (stop work)

I noticed that in framework7 version: 7.0.9 what could be a react useState bug with the same f7.router

Special note because no error output occurs, just the routing links stop working from the moment the useState is loaded

I managed to work around it for my needs by splitting the processing, but it would be good to check if the limit is the useState or the execution time of f7.router, I explain:

I had some issues/bugs with using useState and found that there is a size limit to the data you use in the function to set or update the variable.

OBS: My code is working fine to simulate it calling through Framework7 base interface menu with menus calling through router links;

Link in GutHub: Problems/bugs with use React useState in big Variable length and f7.router menu links (stop work) · Issue #4109 · framework7io/framework7 · GitHub

import React, { useEffect, useState } from "react";
import {  f7, f7ready }  from "framework7-react";

import { default as SeriesLoad } from "./SeriesLoad";

export default () => {
  const  [fontes, setFontes] = useState([]);

  const loadAllState = async () => {
    try {
      const data = await SeriesLoad({
        table: "paramters",
        filter: { ID: "indicators" },

      console.log({ data: data });

      if (Array.isArray(data)) {
        if (data.length > 0) {

           console.log({ "DATA[0]": JSON.stringify(data[0]).length });
           console.log({ "DATA[0].F": JSON.stringify(data[0].F).length });
          /* setFontes(data[0]);  // Array 1821 bytes (BUG)
              WORKING BUT INTERFERE IN TIME LOAD AND router not work more 

          setFontes(data[0].F); //  Array 136 bytes (WORKING FINE)
    } catch (error) {
      console.log({ error: error });

  useEffect(() => {
    f7ready( async () => { 
      await loadAllState();   // async & await Help in time to wait get data from api
  }, []);

  if (fontes !== undefined && fontes !== null) {
    console.log({ Dados: fontes });
    return (
       <List accordionList accordionOpposite style={{ marginTop: "0px" }}>
          {, f) => {
            if (f > 0) {
              return (
                  onClick={() => {
                      fonte: f,
                      legenda: fonte,
                  <AccordionContent id={`fonte-de-dados-${f}`}>
                    <Navbar bgColor="#8e8e93ss">
                      <NavLeft style={{ marginLeft: "10px" }}>
                        <Icon material="topic" />
                      <NavRight style={{ marginRight: "20px" }}>
                        <Link onClick={() => AdcionarSeries({ fonte: f, legenda: fonte, parametros: parametros })}>
                          <Icon material="add" />
                    <Block id={`series-${f}`} className="series-fontes">
                      <p>Nenuma série adicionada</p>
  } else {
    console.log({ ERRORLOAD: data });

Code sample to ** import ./SeriesLoad.jsx**

export default async (query) => {
  return [
      ID: "indicadores",
      F: ["SOURCE", "Accommodation Means", "Road Stations", "Aerfoirt", "ISS", "WILL", "IMAT-SP", "SP Highways", "Museums-Institutions", "Freastal CITanna"],
      T: [
        "Gearal Hotels",
        "Weekend Hotels",
        "Budget Hotels",
        "Luxury Hotels",
        "Super Luxury Hotels",
        "Midscale Hotels",
        "Found Bar",
        "Guarulhos Náisiúnta",
        "Guarulhos Idirnáisiúnta",
        "Viracopos Náisiúnta",
        "Viracopos Idirnáisiúnta",
        "Fernão Dias - Mairiporã (Arteris)",
        "Régis Bittencourt - São Lourenço da Serra (Arteris)",
        "Anhanguera - Turkeys (CCR)",
        "Bandeirantes - Caieiras (CCR)",
        "Castelo Branco - Barueri (CCR)",
        "Uachtarán Dutra - Arujá (CCR)",
        "Régis Bittencourt - P13 (external)(CCR)",
        "Raposo Tavares P10 node 11 (idirmheánach seachtrach node)(CCR)",
        "Anchieta - Riacho Grande (ECORODOVIAS)",
        "Ayrton Senna - Itaquaquecetuba (ECORODOVIAS)",
        "Imircigh - Piratininga (ECORODOVIAS)",
        "House of Rose",
        "Guilherme de Almeida House",
        "Casa Mario de Andrade",
        "Catavento Museum",
        "Football Music",
        "Músaem na nImirceach",
        "Músaem Afra Brasaíle",
        "Músaem Arte Sacra",
        "Músaem da Casa Brasileira",
        "Agus Sound Image Museum (agus MIS Experience from November)",
        "Palace of the Arts",
        "Pinacoteca do Estado (agus Pinacoteca Station)",
        "Cuimhneachán of the Resistance",
        "SP Movers",
        "National Tourists",
        "International Tourists",
      me: [
        "Cánachas Occupation",
        "Average Daily",
        "Group 13 - Tourism",
        "Group 17",
        "Iomlán of the City",
        "Reputation Tascaire",
        "Weighted Index",
        "Monthly Variation",
        "Annual Variation",
        "Number of Léirmheasanna",
        "Light Countryside",
        "Heavy Tráchtála",
      Y: ["YEAR", "Add i to 2000"],
      M: ["MONTH", "The month as a number (0-11)"],
      V: ["VALUE", "Values with 2 decimal places"],
      ID: "task",

no bug.
array max length is 4,294,967,295 items (a lot).
array.length and bytes are two different things

you just mixed Array with Object
but everything is ok
here => wonderful-bas-b6om4w

1 Like