1 00:00:00,340 --> 00:00:04,105 To code along with me download the project files with this workshop then open and 2 00:00:04,105 --> 00:00:05,588 run the files with each video. 3 00:00:05,588 --> 00:00:09,460 I'm using Atom as my text editor, but you can use your preferred text editor. 4 00:00:09,460 --> 00:00:14,228 One of the biggest changes in React 16 is how react handles JavaScript errors. 5 00:00:14,228 --> 00:00:18,180 Normally a JavaScript error inside a component like an uncaught type error for 6 00:00:18,180 --> 00:00:20,710 instance, will break the entire app. 7 00:00:20,710 --> 00:00:25,800 For example, this simple app component renders a StudentForm component 8 00:00:25,800 --> 00:00:31,380 that accepts the name in the input field and displays the name below. 9 00:00:31,380 --> 00:00:35,440 Inside the StudentForm component, the reset button the reset button next to 10 00:00:35,440 --> 00:00:41,530 the field has an onClick event that sets the student state to null. 11 00:00:41,530 --> 00:00:46,990 And as you can see the name property is dis-structured from student here. 12 00:00:46,990 --> 00:00:50,220 So when you click the reset button, setting student null, 13 00:00:50,220 --> 00:00:52,120 throws an uncaught type error. 14 00:00:52,120 --> 00:00:54,470 That says, Cannot read property name of null, 15 00:00:54,470 --> 00:00:58,680 because it can't access the name property on null, and this crashes the app. 16 00:00:58,680 --> 00:01:02,630 If you have a look at the elements panel in your browser's Dev Tools, 17 00:01:02,630 --> 00:01:06,290 you will see no elements rendered inside the root of the app. 18 00:01:06,290 --> 00:01:11,675 React unmounts the entire app so nothing displays in the browser. 19 00:01:11,675 --> 00:01:16,025 A JavaScript error and a part of the UI shouldn't break the whole app like this. 20 00:01:16,025 --> 00:01:20,455 So in React 16, error handling was improved to avoid these 21 00:01:20,455 --> 00:01:24,415 types of situations where run time errors during rendering breaks your app. 22 00:01:24,415 --> 00:01:26,985 It proves a built in solution for 23 00:01:26,985 --> 00:01:32,460 handling errors gracefully with a new life cycle method called componentDidCatch(). 24 00:01:32,460 --> 00:01:37,010 This life cycle hook gets triggered whenever a child component render or 25 00:01:37,010 --> 00:01:39,240 life cycle method throw an error. 26 00:01:39,240 --> 00:01:43,390 When an error occurs, componentDidCatch catches the error and 27 00:01:43,390 --> 00:01:47,910 instead of crashing the entire app, the app continues to run as normal displaying 28 00:01:47,910 --> 00:01:50,800 all the UI except for the faulty component. 29 00:01:50,800 --> 00:01:54,600 You can even display a fallback UI to replace the component that crashed. 30 00:01:54,600 --> 00:01:55,670 Let me show you how it works. 31 00:01:55,670 --> 00:02:01,385 I'll start by initializing a hasError state in the app component. 32 00:02:01,385 --> 00:02:06,250 I'll set it to false by default. 33 00:02:07,270 --> 00:02:12,350 Then I will use componentDidCatch 34 00:02:12,350 --> 00:02:17,960 to call setState and set the hasError state to true. 35 00:02:21,540 --> 00:02:26,055 So, if any child component of App, like studentForm, throws an error, 36 00:02:26,055 --> 00:02:31,150 componentDidCatch will catch the error and set hasError to true. 37 00:02:32,260 --> 00:02:33,930 Now in the render function, 38 00:02:33,930 --> 00:02:38,350 I'll use conditional rendering to return fallback content in the event of an error. 39 00:02:39,450 --> 00:02:43,707 I'll write, if the hasError state is true, 40 00:02:46,561 --> 00:02:51,163 Return an h1 with the text, 41 00:02:51,163 --> 00:02:55,769 No!, something went wrong. 42 00:02:59,250 --> 00:03:06,172 Else, when there are no errors, return the regular UI with the StudentForm component. 43 00:03:15,182 --> 00:03:20,970 Back in the app, I'll click the button to produce the error inside student form. 44 00:03:20,970 --> 00:03:24,620 Now in development mode you'll briefly see the fall back content just before React 45 00:03:24,620 --> 00:03:28,030 displays the usual development errors or error overlay. 46 00:03:28,030 --> 00:03:30,010 However, if the app is running in production, 47 00:03:30,010 --> 00:03:32,300 it will keep displaying the fallback content. 48 00:03:32,300 --> 00:03:36,844 In this case, I can close the error overlay to see the fallback UI and 49 00:03:36,844 --> 00:03:42,046 there we see the, Something went wrong heading, instead of a blank screen. 50 00:03:43,991 --> 00:03:45,671 And in the Elements panel, 51 00:03:45,671 --> 00:03:49,330 you can see the content being rendered inside the root div.