React : Handle multiple browser(s), browser tabs to restrict duplicate operations

#1 Data duplication MUST be restricted at the server side.

• I would recommend some cache like node-cache. Node-cache will having scalability issues, so better to go with redis. (The logic should be smt. like: If the form has submited with the user_id, or with form_id, you can create a cache for that, and if you proceed it, store it in the db, other case throws an error. On the other browser you must validate before the submit if the unique_id neither in the cache nor in the db. If exists, you can throws an error in the nr.2 browser.

#2 If you want to disable the button, you have to use websockets

If you're looking for a client-only solution, here is a great article about sharing state between browser tabs. The limitation is that it won't work on different browsers/machines.

The best way to handle this from a UI/UX perspective is to use validation. If User A clicks submit, then User B clicks submit from a different browser or tab, an error should be displayed to User B indicating that "This action has already taken place".

That being said, what you are trying to achieve is possible.

One way is by using a WebSocket. A WebSocket is a persistent connection between the client and server, that allows bi-directional communication.

The page with the submit button in your React app would be a "subscriber" to some websocket channel. When the submit button is clicked for the first time(it doesn't matter from where), a message can be "published" from a WebSocket server to ALL subscribers, regardless of the browser or tab being used.

Basically, you would add an onMessage handler in your React app where you can disable the submit button when a specific message is received.

I don't know what tech you are using on the server side, but for a WebSocket server, there are many options out there. For the React app, there is react-websocket which is straight-forward to use.

you can do it in client-side

const Form = () => {
  const [buttonDisabled, setButtonDisable] = useState(false);

  // first tab fire
  const onSubmit = () => {
    .
    .
    .
    localStorage.setItem("formSubmited", "true");
  };

  useEffect(() => {
    const disableButton = (e) => {
      if (e.storageArea.formSubmited) {
        setButtonDisable(true);
      }
    };
    // second tab fire
    window.addEventListener("storage", disableButton);
    return () => {
      window.removeEventListener("storage", disableButton);
    };
  }, []);
 .
 .
 .
};