React app hangs and uses 300% CPU when going to a page - reactjs

Question

I just added a sign in page and component to an example react app I'm working on, but any time I navigate to the new page (localhost:3000/signin), the page hangs and looking into the Chrome task manager, starts using 300+% CPU power. Nothing is printed to the console, and nothing ever shows up on the screen.
I know this can happen when there is some sort of call loop that tries to render infinitely, but I don't see where that could be happening in the code I have.
Here is my App.js:
import React from "react";
import { Switch, Route } from "react-router-dom";
import "./App.css";
import HomePage from "./pages/homepage/homepage";
import ShopPage from "./pages/shop/shopPage";
import Header from "./components/header/header";
import SignInAndSignUpPage from "./pages/signInSignUp/signInSignUp";
function App() {
return (
<div>
<Header />
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/shop" component={ShopPage} />
<Route path="/signin" component={SignInAndSignUpPage} />
</Switch>
</div>
);
}
export default App;
my SignIn/SignUp page (sign up not implemented yet):
import React from "react";
import SignIn from "../signInSignUp/signInSignUp";
import "./signInSignUp.scss";
const SignInAndSignUpPage = () => (
<div className="sign-in-and-sign-up">
<SignIn />
</div>
);
export default SignInAndSignUpPage;
and my SignIn component:
import React from "react";
import "./sign-in.styles.scss";
class SignIn extends React.Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: ""
};
}
handleSubmit = event => {
event.preventDefault();
this.setState({ email: "", password: "" });
};
handleChange = event => {
const { value, name } = event.target;
this.setState({ [name]: value });
};
render() {
return (
<div className="sign-in">
<h2>I already have an account</h2>
<span>Sign in with your email and password</span>
<form onSubmit={this.handleSubmit}>
<input
name="email"
type="email"
onChange={this.handleChange}
value={this.state.email}
label="email"
required
/>
<input
name="password"
type="password"
value={this.state.password}
onChange={this.handleChange}
label="password"
required
/>
<input type="submit"> Sign in </input>
</form>
</div>
);
}
}
export default SignIn;
Thanks in advance.

Answer 1

I discovered that this issue was caused by a recursive import in another file. The component was importing itself by mistake, which caused infinite re-rendering. Always double-check your imports!