React JS multi-inputs with asynchronous data validation and race condition

I don't think you need useEffect for this. You can just listen to the paste event on your inputs, run your API call, and respond accordingly. I included a minimal verifiable example. It is a proof of concept but you can change the boundaries and responsibilities of the components in your real app. Run the code and paste each word into input to see the state changes reflected in the output.

function App() {
  const [state, setState] = React.useState({
    "gorilla": "pending",
    "broccoli": "pending",
    "cage": "pending",
    "motorcycle": "pending"
  })
  const expect = expected => actual =>
    setState(s => ({...s, [expected]: expected == actual }))
  return <div>
    <p>gorilla spaceship cage bike</p>
    <ValidateInput valid={state.gorilla} validate={expect("gorilla")} />
    <ValidateInput valid={state.broccoli} validate={expect("broccoli")} />
    <ValidateInput valid={state.cage} validate={expect("cage")} />
    <ValidateInput valid={state.motorcycle} validate={expect("motorcycle")} />
    <pre>{JSON.stringify(state)}</pre>
  </div>
}

function ValidateInput({ valid, validate }) {
  function onPaste(event) {
    const pasted = event.clipboardData.getData("text/plain")
    someApiCall(pasted).then(validate).catch(console.error)
  }
  return <input className={String(valid)} onPaste={onPaste} />
}

function someApiCall(v) {
  return new Promise(r => setTimeout(r, Math.random() * 6000, v))
}

ReactDOM.render(<App/>, document.querySelector("#app"))

input { display: block; outline: 0; }
input.true { border-color: green; }
input.false { border-color: red; }
pre { padding: 0.5rem; background-color: #ffc; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

The author of the this post here, As @Drew Reese mentioned, to solve my problem, I need to trigger the requests per per-input. I've already accepted the answer of that Author as it solved my problem, but here is my own solution and also a little bit more explanation (don't hesitate to correct me in the comments and I'll amend my answer if anything I say is wrong as I've just started React 1 week ago).

First of, let's explain the title: asynchronous data validation and race condition.

To be concise, as JS is a single-threaded language, we cannot really have a race condition. However, using async functions we can have what looks like a race condition because the same data can be changed by 2 different calls in an asynchronous way.

Basically, here, what I consider could be interpreted as a race condition is if the user type a letter in one input (that will trigger async call 1a) and then quickly after he types another letter in the same input (that will trigger async call 1b), what I don't want after both the async calls are done is to have the result of async call 1a instead of async call 1b (the latest request made).

To avoid this situation, we can just handle per-input request and use a flag (here canceled = True) to prevent this kind of situation. Why it works? Because JS is single-threaded so before making the async call we can simply set a flag variable.

However, useEffect is triggered at each render (and a render, among other things, is triggered each time we mutate a variable defined by useState). To avoid entering the useEffect call for each input, we can specify a parameter (here: inputUrl) so that only the useEffect associated to the ValidInput element for which the url was changed is triggered.

Another place where this kind of race condition problem can occur is in setData, because setData is asynchronous in React. To prevent that we need to use the lambda operator together with setData, this ensures that, we always use the previous state as input (here: updateInputs((previousInputs) => {... where updateInputs points to the setData function defined by the useState)

If we put everything together, we have something that works quite well.

Notes:

• Here, I have added if (allInputs.map((e) => e.url).every((e) => e === null)) in the code, it is just for the template version to avoid calling useEffect for all the inputs at the first render
• I could have not used useEffect but using useEffect make it much easier to avoid the kind of race condition problem just by using a flag (called a clean-up function here)
• I have added some code to add an input and delete any input as well.
• I'm not a pro so maybe there are other things that can be done better

the code:

import "./styles.css";
import React, { useEffect, useState } from "react";

export default function MyComponent(props) {
  const [data, setData] = useState(
    Array.from({ length: 5 }, () => {
      return { isValid: 0, url: null };
    })
  );
  const addEntry = () => {
    setData([
      ...data,
      {
        isValid: 0,
        url: null
      }
    ]);
  };
  const processData = data.map((datum, index) => {
    return (
      <ValidInput
        key={index}
        allInputs={data}
        updateInputs={setData}
        index={index}
      />
    );
  });
  return (
    <div>
      <div>{processData}</div>
      <div>
        <button onClick={addEntry}>ADD</button>
      </div>
      <div>{JSON.stringify({ data })}</div>
    </div>
  );
}

const ValidInput = ({ allInputs, updateInputs, index }) => {
  const inputUrl = allInputs[index].url;
  let delay = 10000;
  useEffect(() => {
    // Needed only for this template because the promise here
    // is mocked by a setTimeout that will be trigger on the first render
    if (allInputs.map((e) => e.url).every((e) => e === null)) {
      return;
    }
    let canceled = true;
    new Promise((resolve) => {
      delay /= 2;
      setTimeout(() => resolve("done"), delay);
    }).then((e) => {
      if (canceled) {
        updateInputs((previousInputs) => {
          const updatedInputs = [...previousInputs];
          updatedInputs[index] = {
            ...updatedInputs[index],
            isValid: updatedInputs[index].isValid ^ 1
          };
          return updatedInputs;
        });
      }
    });
    return () => {
      canceled = false;
    };
  }, [inputUrl]);
  const onChange = (e) => {
    updateInputs((previousInputs) => {
      const updatedInputs = [...previousInputs];
      updatedInputs[index] = {
        ...updatedInputs[index],
        url: e.target.value
      };
      return updatedInputs;
    });
  };
  const removeEntry = (index) => {
    updateInputs((previousInputs) => {
      return previousInputs.filter((_, idx) => idx !== index);
    });
  };
  return (
    <div key={index}>
      <input
        type="text"
        onChange={(e) => onChange(e)}
        value={inputUrl != null ? inputUrl : ""}
      />
      <button onClick={() => removeEntry(index)}>DEL</button>
    </div>
  );
};

And here is the sandbox.