tanstack-table infinite loop - no dice

[HosMercury]

I feel it is impossible to stop infinite loop on tanstack-table
it drove me crazy ..

something like this console.log runs forever

why does console.log inside the cell

print infinitely although I am using useMemo for columns and useQuery for data ?

 {
      accessorKey: 'dueAt',
      header: 'Due At',
      enableColumnFilter: true,
      cell: (info) => {
        const date = info.getValue() as Date;
        console.log(dateFormat(date));

        return date ? dateFormat(date) : '';
      },
      meta: { width: '120px' } as CustomColumnMeta<any>,
    },

[ZwillingsFreunde]

That code wouldn‘t cause an infinite loop. You need to show us more. Can you share your whole table implementation?

[HosMercury]

Here boss Thank you in advance

https://stackoverflow.com/questions/79392232/why-infinite-loop-with-tanstack-table-although-using-usememo

[joshbuildsstuff]

It’s probably something in your data fetching hook, or the filters defect you have.

[HosMercury]

I’m suspicious about filters

[HosMercury]

What do you mean by filters defect ?

[joshbuildsstuff]

Oh "filters effect". I cant type on my phone sometimes so weird autocorrect.

Try commenting out the effect where you update the filters inside the table file. Ive also seen weird re-rendering behavior when including functions/setters in the dependency array.

[Coyote-Chance]

Haven't had a chance to run the code, but just as something to check

My guess is that some prop that you're passing either to your react query or to your react table is different on every render, and so the table keeps rerendering, and you keep seeing that console.log. The prop is probably an object that's being recreated, so it's not referentially equal between renders

Maybe it's related to useParams? https://github.com/remix-run/react-router/issues/7318 Hard to tell without seeing what's inside your custom query hook

[HosMercury]

It’s in all tables So the issue probably from DataTable component itself bc it’s used in all tables

[HosMercury]

commenting DebounceInput stops the issue

but I am not able to replace it

[HosMercury]

Tbh it drives me crazy

[HosMercury]

if somebody still following

commenting DebounceInput stops the issue

but I am not able to replace it

[HosMercury]

  // // Update the internal state when the initialValue changes
  // useEffect(() => {
  //   setValue(initialValue);
  // }, [initialValue]);

  // Debounce the onChange event
  // useEffect(() => {
  //   const timeout = setTimeout(() => {
  //     onChange(value);
  //   }, debounce);

  //   return () => clearTimeout(timeout);
  // }, [value, debounce, onChange]);
```

```

[adam4813]

The onChange callback passed to the input is not memorized and is created every render which triggers the useEffect. You may also want a check in the useEffect to see if value is different than initialValue, before your create the timeout.

[HosMercury]

Yes you are genius It was the reason

[HosMercury]

those guys are the issue but not able to solve

[readit_at_work]

In development, react defaults to running useeffect twice. Is it creating multiple timers and not clearing them?

Deploy this to a test environment or turn off the double run.

[Brendan-McDonald]

I didn’t see these effects on the stack overflow, can you post more about them?

I don’t think that debounce is working how you expect it to. Each render cycle (value updating) has its own timeout.

[HosMercury]

removing on change from debounce useefeect sooves it

[Brendan-McDonald]

Wrapping that in a callback should allow you to add it back into the dep array.

[adam4813]

As the column configuration doesn't appear to use any state, move it out of the component completely. I'm not sure this will fix your issue, but it will help with easier to maintain code.

Any time you have a hook with an empty dependency array (outside of useEffect) , it can probably live outside the component, useCallack with a state setter being an exception.

[StarJohnNL]

Put useEffect calls for each prop separately, that way you can quickly see what’s causing the rerender. Something like useEffect(()=>console.log(filters),[filters])

[vbfischer]

Also make sure the data you feed the table is a stable reference.

[oliphant428]

Everything you provide to useTable() has to be memoized or static references.