only class component

can be class or functional component

only functional component

No, because error boundary component can handle only issues of children components wrapped with this error boundary component

It will work as if the whole SimpleComponent was wrapped inside of ErrorBoundary

Error that happens in the js does not affect rendering of SimpleComponent. ErrorBoundary is not needed here

Yes, it will handle the jsx inside of it

static getDerivedStateFromError() only

both static getDerivedStateFromError() and componentDidCatch()

static getDerivedStateFromError() or componentDidCatch()

componentDidCatch() only

Error: Invalid hook call... - because we cannot call custom hooks from custom hooks

Error: Invalid hook call... - because you can only call hooks at the top level

The code is ok

Infinite loop

<Button variant="outlined" sx={{ color="red"}}>

Hello Marathon

</Button>

<Button variant="outlined" sx={ color:"red"}>

Hello Marathon

</Button>

<Button variant="outlined" sx={ color:red}>

Hello Marathon

</Button>

<Button variant="outlined" sx={{ color: red }}>

Hello Marathon

</Button>

<Button variant="outlined" sx={{ color:"red"}}>

Hello Marathon

</Button>

root

styleOverrides

rootStyle

variant

style