Error: out of memory when trying to run create-react-app

Question

When I run npm start in chrome (create-react-app) it takes a while to load and then it crashes. the Error displays "out of memory". I cleared all my tabs and cache, and since other apps run just fine I have been able to tell the error is in the code. When I removed the Reserve_Button Component the application ran just fine. I think there may be some sort of memory leak related to SetState but I'm relatively new to React so there is not much more I can tell.

import React from "react";
import "./reserve_button.css";
// import Reserve_Form from "./Reserve_Form";
// import { connect } from "react-redux";
// import { submitreservation } from "../../Actions/index";
import Modal from "./modal";

class Button extends React.Component {
  state = {
    firstname: "",
    Lastname: "",
  };
  showmodal = {
    open: false,
  };

  // onSubmit = (formValues) => {
  //   this.props.submitreservation(formValues);
  // };

  showModal() {
    if (this.state.open) {
      return (
        <Modal
          open={this.state.open}
          onDismiss={() => this.setState({ open: false })}
          title="Modal Title"
          content="Modal Body"
          actions={<div className="ui button">Button</div>}
        />
      );
    }
  }

  render() {
    return (
      <div className="body">
        <Button
          onClick={() => this.setState({ open: !this.state.open })}
          className="neon-button"
        >
          Reserve session
        </Button>
        {this.showModal()}
      </div>
    );
  }
}
// <Reserve_Form onSubmit={this.onSubmit} />;
// export default connect(null, { submitreservation })(Button);
export default Button;

this is the Modal:

import React from "react";
import ReactDOM from "react-dom";

const Modal = (props) => {
  return ReactDOM.createPortal(
    <div onClick={props.onDismiss}>
      <div onClick={(e) => e.stopPropagation()}>
        <i onClick={props.onDismiss}></i>
        <div className="header">{props.title}</div>
        <div className="content">{props.content}</div>
        <div className="actions">{props.actions}</div>
      </div>
    </div>,
    document.querySelector("section")
  );
};
export default Modal;

there are no set class names in a CSS file for the modal but I don't think that CSS would be the source of the problem.

UPDATE: when I console log this.state.open it prints "false" like 1000 times a second

Answer 1

There is an optimization you can make to your code. Perhaps it will help fix the error: Instead of

   <Button
      onClick={() => this.setState({ open: !this.state.open })}
      className="neon-button"
   >

when relying on the previous state of a react component use the previous state to update the value. It looks something like this:

   <Button
        onClick={() => this.setState((prevState) => { open: !prevState.open })}
        className="neon-button"
   >

By doing this, we are referencing the previous state of this.state.open. This is particularly important as not all state updates happen instantaneously and so there is a possibility of referencing an older value of this.state.open in your approach.