resizing window triggers maximum update depth exceeded in next js 14.0.2

[alexmondaini]

I am trying to build a real time dashboard which my components are rendered from the server every time the user visits /dashboard page. My dashboard page.tsx looks like this:

import { lusitana } from "../../ui/fonts";
import CardWrapper from "../../ui/dashboard/cards";
import { Suspense } from "react";
import { CardsSkeleton, RevenueChartSkeleton } from "@/app/ui/skeletons";
import ProductChart from "@/app/ui/dashboard/product-chart";


    export default async function Page() {
        return (
            <main>
                <h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
                    Dashboard
                </h1>
                <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
                    <Suspense fallback={<CardsSkeleton/>}>
                        <CardWrapper/>
                    </Suspense>
                </div>
                <div>
                    <Suspense>
                        <ProductChart/>
                    </Suspense>
                </div>
       
            </main>
        )
    };

And I have a product-chart which uses tremor Barchart component, which is a client component. This is my product-chart.tsx file:

import { fetchCompliantProduct } from "@/app/lib/data";
import { lusitana } from "../fonts";
import { BarChart } from "@tremor/react";


export default async function ProductChart() {
    
    const productData = await fetchCompliantProduct();

    return (
        <>
        <h3 className={`${lusitana.className}`}>
            Products end of service (EOS) grouping counts
        </h3>
        <BarChart
        data={productData}
        index="product_type"
        categories={['EOS','EOS in 6 months','EOS in 12 months','EOS in 24 months','EOS in 36 months']}
        colors={['indigo','gray','pink','green','sky']}
        stack={true}
        yAxisWidth={50}
        />
        </>
    );
};

In this file, fetchCompliantProduct() is an async function which fetches data from my database, and then pass into Barchart client component for rendering. The problem I am facing right now is that whenever I move on my window screen on the browser to diminish or increase the window , I get the following error:

    Unhandled Runtime Error
    Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
Call Stack
throwIfInfiniteUpdateLoopDetected
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26604:0)
getRootForUpdatedFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (7667:0)
enqueueConcurrentHookUpdate
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (7558:0)
dispatchSetState
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (12908:0)
eval
node_modules/recharts/es6/component/ResponsiveContainer.js (67:0)
ResizeObserver.callback
node_modules/recharts/es6/component/ResponsiveContainer.js (85:0)

Unhandled Runtime Error
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Call Stack
throwIfInfiniteUpdateLoopDetected
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26604:0)
getRootForUpdatedFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (7667:0)
enqueueConcurrentHookUpdate
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (7558:0)
dispatchSetState
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (12908:0)
e
node_modules/@tremor/react/dist/hooks/useOnWindowResize.js (1:101)

This is my data.ts which I fetch the data from db:

import prisma from "@/prisma/db";
import { Prisma } from "@prisma/client";
import { unstable_noStore as noStore } from 'next/cache';

export async function fetchCompliantProduct() {
    noStore();


    const countProduct: [{
        product_type:string,
        'EOS': number,
        'EOS in 6 months': number,
        'EOS in 12 months': number,
        'EOS in 24 months': number,
        'EOS in 36 months': number
    }]
    = await prisma.$queryRaw`
    SELECT    product_type,
            COUNT(product_type) FILTER (
            WHERE     eg_status = 'EOS'
            )::int AS "EOS",
            COUNT(product_type) FILTER (
            WHERE     eg_status = 'EOS in 6 months'
            )::int AS "EOS in 6 months",
            COUNT(product_type) FILTER (
            WHERE     eg_status = 'EOS in 12 months'
            )::int AS "EOS in 12 months",
            COUNT(product_type) FILTER (
            WHERE     eg_status = 'EOS in 24 months'
            )::int AS "EOS in 24 months",
            COUNT(product_type) FILTER (
            WHERE     eg_status = 'EOS in 36 months'
            )::int AS "EOS in 36 months"
    FROM      evergreen
    GROUP BY  product_type
    ORDER BY  product_type
    `
    return countProduct;
};

[severinlandolt]

Hi @alexmondaini, how many data points do you have in your chart when this happens?

[alexmondaini]

Hi @severinlandolt ,

An array of length 19, each element is an object/interface of size 6. Not too many data points I believe

[alexmondaini]

I am using next.js 14 app router, I've tried both ways, product-chart.tsx with use client as a client component , receiving the data as props in the function arguments or leave as a server component and fetch the data directly inside ProductChart()

[severinlandolt]

c.f. tremorlabs/tremor-raw#23

[alexmondaini]

I have noted you labeled bug , but as an issue of tremor raw, does this also apply to tremor components ? Not quite sure on how I can help you further to trace the issue.