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:
npm i && npm start
to run the appHome
tab and you will se the form.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...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!
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.
Code seems fine though.