reactjsgoogle-chrome

React freeze Chrome problem in a simple form


I have a simple React + TS + react-router-dom App created like this:

npx create-react-app my-app --template typescript
npm install react-router-dom
npm install --save-dev @types/react-router-dom
npm start

There I have a simple component with a form:

import React, { useState } from "react";

export const Home = () => {
  const [name, setName] = useState("asd");
  const [email, setEmail] = useState("asd15@aa.aa");
  const [password, setPassword] = useState("asdasdasd");

  const [signedUp, setSignedUp] = useState(false);

  const handleRegister = async () => {
    try {
      const config = {
        method: "GET",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
        },
      };
      const url = "https://jsonplaceholder.typicode.com";
      const response = await fetch(url, config);
      if (response.ok) {
        console.log("ok", response);
      } else {
        throw new Error(response.statusText);
      }

      setSignedUp(true);
    } catch (e) {
      console.error("register error", e);
    }
  };

  if (signedUp) {
    return (
      <>
        <button
          style={{ padding: 500 }}
          onClick={() => {
            setSignedUp(false);
          }}
        >
          go back
        </button>
      </>
    );
  }

  return (
    <div id="sign-up-container">
      <div id="sign-up-wrapper">
        <div className="section">
          <input value={name} onChange={(e) => setName(e.target.value)} />
        </div>

        <div className="section">
          <input value={email} onChange={(e) => setEmail(e.target.value)} />
        </div>

        <div className="section">
          <input
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            type="password"
          />
        </div>

        <div className="section">
          <button onClick={handleRegister}>Sign Up</button>
        </div>
      </div>
    </div>
  );
};

The problem is, in Chrome, when certain actions are performed the app freezes completely. No shortcuts work (even cmd+R, opt+cmd+j (for opening console), right mouse button doesn't work, only cmd+w for closing the tab), so I have to close the tab and reopen it to unfreeze the app.

How to reproduce:

  1. clone this repo https://github.com/karol-bisztyga/react-repro
  2. enter the root folder, do npm i && npm start to run the app
  3. enter the Home tab and you will se the form.
  4. Now, when you click the Sign Up button, the form dissapears and another button go back shows up. This doesn't really do anything so you can do it multiple times, it's ok, and this will not freeze, but...
  5. If you modify the first input value, say add another asd to it and the you press the Sign Up button, it freezes and you cannot do anything.

Weird thing is that it will only behave like this when all the elements are there, so there's a password filed, you have to modify the first field, there's a fetch call when the button is clicked.

If you for example remove the password field or remove the fetch call, it will not freeze.

Also, I checked and it doesn't freeze on Safari.

I ran out of ideas what may be wrong with this, any ideas would be highly appreaciated!


Solution

  • All of your code looks fine from the standpoint of not freezing up. I Put it in a playground and it works fine, I think maybe a chrome browser popup or something freezing your computer. Look for any popups in your chrome toolbar maybe. It seems like maybe an auto fill, or a passwords not secure popup.

    https://playcode.io/2271645

    Code seems fine though.