Data handler called twice

[founderblocks-sils]

Hey, I'm using this code to reproduce the issue:

<Importer
        dataHandler={async (rows, { startIndex }) => {
          console.log(rows, startIndex);
          return;
        }}
      >
        <ImporterField
          name='test'
          label='test'
        />
      </Importer>

When importing a file with 2 lines (a heading line and a value line) I'm getting the callback called TWICE with the same data it seems.

[unframework]

Interesting, mind sharing the console.log output from this code?

[founderblocks-sils]

Let me make a more minimal reproduction with complete info. So here's the full file I'm using in my remix project:

import { deDE, Importer, ImporterField } from "react-csv-importer";
import { toast } from "react-toast";

export default function Index() {
  return (
    <main>
      <h1>Test CSV Import</h1>

      <Importer
        dataHandler={async (rows) => {
          console.log(rows);
        }}
        restartable
      >
        <ImporterField
          name='name'
          label='name'
        />
      </Importer>
    </main>
  );
}

Here's the CSV I use for testing:

test.csv

When importing the file ONCE, these are the logs:

[MeshanKhosla]

Also having this issue for both dataHandler and processChunk

[unframework]

Thanks, that should help me repro! I have a suspicion that this is React 18 related (it has a funny quirk where useEffect runs twice when mounting, by design).

I will try to fix on the weekend, but meanwhile mind checking if this persists when you build the code with NODE_ENV=production?

[founderblocks-sils]

No time to repro right now but in our production deployment it indeed doesnt seem to happen which probably supports your theory

[sheyDev]

is there a solution for this other than changing NODE_ENV? Runs twice on every run

[unframework]

I just pushed version 0.8.1 that should deal with this problem. Please let me know and re-open if the issue still persists, closing meanwhile.