REACT - Hook make infinite loop

While the component code you posted is still incomplete (CSVsource is undefined, there's no return), I think the problem is visible now:

You're running handleReadRemoteFile(CSVsource) on every render (because you're calling it directly). When the file is read, you are setting parsedCsvData, which (because state updates and prop updates trigger a rerender) renders the component again, triggering handleReadRemoteFile once again...

So what's the solution?

Data fetching is a classical example of using the useEffect hook. The following code should do what you want

const { readRemoteFile } = usePapaParse(); const [parsedCsvData, setParsedCsvData] = useState([]); useEffect(()=>{ readRemoteFile(CSVSource, { complete: results => setParsedCsvData(results.data); }); }, [CSVsource]); // rerun this whenever CSVSource changes. 

Please read up on the useEffect hook in the React docs.

Note: there's one problem with the code I posted above. When the component is unmounted while the CSV is still loading, you will get an error "state update on unmounted component" as soon as the loading finished. To mitigate this, use the return function of useEffect in combination with a local variable.

So the final code looks like this:

useEffect(()=>{ let stillMounted = true; readRemoteFile(CSVSource, { complete: results => { if(!stillMounted) return; // prevent update on unmounted component setParsedCsvData(results.data); } }); return ()=>stillMounted = false; // this function is ran before the effect is ran again and on unmount }, [CSVsource]);