**Purpose**: I want to create any # of rows containing any # of checkboxes that will be handled by a useState hook.

**Problem**: Page becomes frozen / constant loading state with nothing showing. No console logs, and debugger doesn't even start. React usually will prevent endless loops of updates. But in this case it didn't get caught.

**What I've tried**:

* console.logs (nothing gets outputted)
* debugger statements (nothing
gets paused)
* Cant do much bc of frozen page.

**CODE:**

```
const CreateCheckboxes = ({ rows, cols }) => {
  const classes = useStyles()

  const [checked, setChecked] = useState({})
  const [isLoaded, setIsLoaded] = useState(false)

  //temp initializer
  let state = {};

  //configures state based on unique checkbox name.
  const handleChange = (e) => {
    const value = {
      ...checked,
      [e.target.name]: e.target.checked,
    }
    setChecked(value)
  };

  //Helper function
  const createBoxes = (row, col) => {
    let rowArr = [];

    for (let i = 0; i < row; i++) {
      let checkboxArr = []

      for (let j = 0; i < col; j++) {
        checkboxArr.push(
          <Checkbox
            name={`row-${i}-checkbox-${j}`} //unique identifier in the state.
            checked={checked[`row-${i}-checkbox-${j}`]}
            onChange={(e) => handleChange(e)}
          />
        )

        //store temp state so that react useState is given a list of initialized 'controlled' states.
        //react deosnt like undefined states.
        state[`row-${i}-checkbox-${j}`] = false;
      }

      rowArr.push(
        <div className={classes.row}>
          <Typography>{`Sound ${i}`}</Typography>
          {/* JSX array */}
          {checkboxArr}
        </div>
      )
    }

    // JSX array
    return rowArr
  }

  //output as a jsx array of 'x row divs' contiaining 'y checkboxes'
  const sequenceData = createBoxes(rows, cols)

  useEffect(() => {
    setChecked(state)
    setIsLoaded(true)
  }, [])

  return isLoaded && (
    <>
      {sequenceData}
    </>
  );
}

```