at about 7:00 + you were tallking about: "what if there were thousands of items on an E-Com website". I guess, it is a good idea to pass an array to a HOC, which will wrap each item with an Error Boundary. just came to my mind
In getDerivedDromError you change the state just returning it in an object, don't you have to use setState to change any state, or this is another way to do it?
I've noticed that if you change the if(this.hasError ){} to if(this.state.hasError){} you would be able to see the specific Joker Error along with the other real heroes without interfering Batman and Superman's Hero tags or the App page itself even when the ErrorBoundary tag is not separated to each Hero tag. Any thoughts about this case?
I am not getting the errors displayed in the UI like in the video at 2:40, 5:22 and 8:53. For me it only shows a white screen, and the only way to see errors is by going to the console. Did anyone else come across this problem? Do you know how to get the error UI to display?
great explanation , one thing though how is it possible to update State hasError to true inside getDerivedStateFromError() as we saw in previous video that we should use the setState() method and also this method cannot be used here as it's static, could you please clarify how it works simply by setting the hasError to true. TIA
@@parthbhoir3730 In above comments mention the exact answer,already we know getDeriveStateFromProps not able to access this.setState,due to static,so only here directly changed
I have a question, You said we can only change a state inside the setState method, but here you are changing the state inside the getDerivedStateFromError method why?
When I passed throw new Error('Not a Hero'). The error message is displayed in the console but not in the UI Screen. Can anyone help me in this to solve this issue?
i am not sure but inside getDerivedStateFromError() we change the state without this.setSate(). So how it goes as you earlier told that for the state to change we have to use setState method..please help me in explaining this. Thanks
Dinesh Pabbi we can change the state without this.setstate as well, but it won’t re-render the component in the UI. so in this case our requirement is to change the state not to rerender the component. Hope this will help.!!
But the confusion is where to put error boundary, should all components need to be wrapped by error boundary and one other things do we need to write specific error boundary for each components? anybody knows help me ,,,,
Uncaught Invariant Violation: Objects are not valid as a React child If you get this error, you probably try to render the error message but you try to render the error object. You need to render error.message.
4:00 code for boundary error
6:45 why the error boundary important?
9:18: catthe the error of an eventhandler
10:45 summary
A really clear and concise explanation of the subject!
Beautiful, just beautiful. My tip my hat to you. You’re young, and your brilliant. I’ve learnt a lot from you, and I hope you go places. Regards
You Explain this topic in a very clear and easy manner
Simple explanation always better to understand the basic concept of some advanced features like this and you did it great. Thank you so much :)
thanks for explaining that in dev mode, the error will still be shown. this really got me stuck
this is beyond decent understanding. thanks!
at about 7:00 + you were tallking about: "what if there were thousands of items on an E-Com website". I guess, it is a good idea to pass an array to a HOC, which will wrap each item with an Error Boundary. just came to my mind
yeah it can be an optimal solution
Genius
9:55 Summary
Your way of talking and voice really matches with brackeys
I never learned so much like in this videos Thank u
Joker is a hero in his own story.
In getDerivedDromError you change the state just returning it in an object, don't you have to use setState to change any state, or this is another way to do it?
Just like getDerivedStateFromProps , here too cannot use this.setState inside it as it is a static method. The object that you return sets the state.
@@pawanrk4818 Why can't we use this.setState inside static method?
@@bhupeshbhatt4334 because static methods do not have access to this keyword.
I understand both, Error Boundary and joker is hero.
Wow...for me mits clear...really amazing..thanks sir love you the tutorails.....
I've noticed that if you change the
if(this.hasError ){} to if(this.state.hasError){}
you would be able to see the specific Joker Error along with the other real heroes
without interfering Batman and Superman's Hero tags or the App page itself
even when the ErrorBoundary tag is not separated to each Hero tag.
Any thoughts about this case?
Love your videos, thanks for the time-saving edits!
Thank you very much, very clear and on point.
Great explanation for a very important feature !!!
Awesome explanation
Batman, Superman and something went wrong 🤣🤣
Great explanation . Thank you!
thank you for the explanation 🙏🙏
In react 17.0.2, error is only showing on console not on the webpage in development mode.
Yea bruh 🙂
perfect explanation! thank you very much!!
Awesome explaination.
What extension you used to write "===" like that in if condition of Hero.js line:4
Go to "Settings" search for Font and in "Font Ligatures" set "editor.fontLigatures": true
I am not getting the errors displayed in the UI like in the video at 2:40, 5:22 and 8:53.
For me it only shows a white screen, and the only way to see errors is by going to the console. Did anyone else come across this problem? Do you know how to get the error UI to display?
Thank you very much, man!
Useful topic!
how to get === triple equalto sign?
Very Helpful Video
great explanation , one thing though how is it possible to update State hasError to true inside getDerivedStateFromError() as we saw in previous video that we should use the setState() method and also this method cannot be used here as it's static, could you please clarify how it works simply by setting the hasError to true. TIA
Same Doubt ??
@@parthbhoir3730 In above comments mention the exact answer,already we know getDeriveStateFromProps not able to access this.setState,due to static,so only here directly changed
One issue: When to use getDerivedStateFromError() and when to use componentDidCatch() ?
getDirevedStateFromError is used to render a fallback UI whenever error occurs.
componentDidCatch is used to log the error information in the console.
@@alexanderborisov1828 Thanks alot man :)
thank you very much, very well explained! you have a new subscriber ;)
Perfectionist 👌
In the ErrorBoundry component how can we directly change the state property hasError without using the setState method?
Joker is a hero though..
Nice and waiting for advanced and react native tut
Thanks
I have a question, You said we can only change a state inside the setState method, but here you are changing the state inside the getDerivedStateFromError method why?
amazing
Great video! thank you
What is the setting that make the application production mode?
When I passed throw new Error('Not a Hero'). The error message is displayed in the console but not in the UI Screen. Can anyone help me in this to solve this issue?
I am facing the same issue. Were you able to figure out why the error doesn't show up in the UI?
this entire course need to be updated with latest react 8 things mostly things are in class-based component
There is no substitute for error boundaries in functional components, it's only class based
💗💗💗
Why hero component is function component? Why not class component. is there any limitation in error boundary.
What is the vscode shortkey to change to become instantly?
Prettier VSCode Extension
can you provide an example , how can i use error boundaries while using router for routing as it is creating issue for me
What about doing this with functional components?
im getting an API and I got an Error, I can't get a particular image. What I want to do is to not show that image. Is there any way to do that?
can we use just a try catch
can you make it catch warnings too? im getting a warning i really need to debug
How to use the componentDidCatch for error
When you say react shows complete error in development mode, How does React knows a particular website loads from Develop instance or Prod Instance.
i am not sure but inside getDerivedStateFromError() we change the state without this.setSate(). So how it goes as you earlier told that for the state to change we have to use setState method..please help me in explaining this. Thanks
I am confused about the same ! @codevolution Please clarify??
Dinesh Pabbi we can change the state without this.setstate as well, but it won’t re-render the component in the UI. so in this case our requirement is to change the state not to rerender the component. Hope this will help.!!
mamta gupta thank you so much!
Awesome
Ooo Not cool...Joker was MY Hero!
You mean Villian.
How to use boundaries with react router? Is there any way to avoid all this boilerplate?
even i am looking for this answer , if you have any example please suggest
But the confusion is where to put error boundary, should all components need to be wrapped by error boundary and one other things do we need to write specific error boundary for each components? anybody knows help me ,,,,
what is fallback ui?
why I did not get an error without an error boundery?
Uncaught Invariant Violation: Objects are not valid as a React child
If you get this error, you probably try to render the error message but you try to render the error object. You need to render error.message.
How exactly are we gonna render error.message?
@@JS-ih2lx error is an object with the property message.
Do console.log(error.message) then you will see the error
@@abdous-i8s Thanksl! Got you.
I am getting an error saying you cannot just return {heroName}.....Can anyone help me out?
are you using any extension for react snippets, if yes can you name it
ES7 React/Redux/GraphQL/React-Native snippets
@@RahulKumar-wu1dv how that equal he writes I had seen before but forgot now I mean in if else
this error page design not coming
why using class component?
Only Class components have error boundaries...
How to support old browser version? Im open in firefox 49 and get error const initialization, but my code works fine on chrome
You should search for Babel + Webpack.
Hello Alc Sandr Reebak
does anyone have this code
Could somone tell me how to make that = sign in 2:07 in between jokerName and 'Joker'
its actually 3 = sign (===)
While(true){
document.write("awesome tutorial");
}
I wanted to print infinite times so
In errorBoundary you have written this .props.children what is children here?
children means property. means inner components.(tsgs)
static getDerivedStateFromError() {
return {
hasError: true
}
}
why didnt use setState to change hasError value ?
because static methods do not have access to this keyword so we simply return the object.
Thank you sir
Awesome explanation.Thank you!
Great explanation . Thank you!