React App - Page unresponsive

Question

Page Unresponsive in Chrome

My React app was working perfectly fine. I did a yarn start and relaunched to continue working on the layout and got the above response. I researched the problem but can't seem to get clear directions whether this is a debugging issue with my chrome or react app. I did go into chrome extensions and enabled "Allow access to URLs" under React development tools. Did anyone face a similar problem or advice on what steps to take?

Thank you!

Answer 1

I know it's an old question but I just want to write what helped me in case somebody else is experiencing the same problem.

I had created an infinite loop and had basically nested the parent component in the parent component a couple of times instead of the child component, I initially wanted to nest. Corrected it and the app works just fine.

Answer 2

You need to trace your code by looking at the last code you wrote before the error came up and delete that code, restart Your text editor, and terminal. I had the same issue the problem that caused it was adding a styling a Footer component in JSX. But the page loads when I delete the component

import React, { Component } from 'react'

export class Footer extends Component {
    render() {
        return (
            <Footer>
                Footer
            </Footer>
        )
    }
}

export default Footer;

Answer 3

My app crashed because I created a component that didn't exist in html. After coding the <header> html component module successfully, I accidentally created an html element component called <hero> which doesn't exist in html. This crashed my React app with no clear error. Check your newly added html tags.

Answer 4

In my case i accidentally added z-index:-10 to the page and i can't click on any buttons or links, check if your page has any negative z-index values.

Answer 5

In my case I was using same name of a component and a function. for example,

1 import { TableContainer, TableHead, TableCell, TableRow,} from '@mui/material';

2 const Table = () => {
3 return (
4  <TableContainer>
5   <Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
6      <TableHead>
7        <TableRow>
8         <TableCell>Dessert (100g serving)</TableCell>
9         <TableCell align="right">Calories</TableCell>
10         <TableCell align="right">Fat&nbsp;(g)</TableCell>
11         <TableCell align="right">Carbs&nbsp;(g)</TableCell>
12         <TableCell align="right">Protein&nbsp;(g)</TableCell>
13       </TableRow>
14     </TableHead>
15    </Table>
16    </TableContainer>
 )
}

As you can see on line number 2 and 5 I have the same name. It was causing the error so I changed the name of the function.