WEBVTT 00:00:00.000 --> 00:00:00.820 Welcome back. 00:00:00.850 --> 00:00:04.840 Today, we're going to start talking about debugging and its importance. 00:00:04.920 --> 00:00:07.100 Contrary to common misconceptions, 00:00:07.130 --> 00:00:12.700 encountering bugs and issues isn't indicative of a developer's incompetence. 00:00:12.730 --> 00:00:15.780 Rather, it's an inherent part of the coding journey. 00:00:15.810 --> 00:00:16.680 Every developer, 00:00:16.710 --> 00:00:20.460 regardless of their expertise or the complexity of their project, 00:00:20.490 --> 00:00:24.180 inevitably confronts challenges that require debugging. 00:00:24.210 --> 00:00:26.920 Addressing these issues not only sharpens 00:00:26.950 --> 00:00:32.400 a developer's problem, solving skills, but also nurtures resilience, patience, 00:00:32.430 --> 00:00:35.860 and the meticulous approach to code, craftsmanship. 00:00:35.880 --> 00:00:37.760 In essence, facing and overcoming such 00:00:37.790 --> 00:00:41.900 hurdles is a rite of passage in the evolution of a proficient developer. 00:00:41.930 --> 00:00:47.040 Even I have to debug applications daily, there are mistakes that I make and there 00:00:47.070 --> 00:00:49.620 will be many mistakes that you're going to make. 00:00:49.650 --> 00:00:51.840 The main idea here is to recognize 00:00:51.870 --> 00:00:55.640 the mistakes that you're making, understand why you might be making them. 00:00:55.640 --> 00:00:57.600 Today, we're going to start talking about 00:00:57.630 --> 00:01:01.900 the tools that will help you resolve your bugs. 00:01:01.930 --> 00:01:03.660 Let's get started. 00:01:03.680 --> 00:01:08.160 I want to introduce you to a couple of bugs that you might see frequently 00:01:08.190 --> 00:01:13.180 inside React Native Applications and what you could do to resolve them. 00:01:13.210 --> 00:01:15.360 Let's get started with incorrectly 00:01:15.390 --> 00:01:19.620 importing items and the issues that might cause. 00:01:19.650 --> 00:01:21.800 For example, if I try to import a title 00:01:21.830 --> 00:01:29.100 here and I accidentally misspell it and I add one more E at the end and I save this, 00:01:29.130 --> 00:01:33.490 I'm going to get an error and it's going to say that property title doesn't exist. 00:01:33.520 --> 00:01:36.140 It will tell me that on line 160, 00:01:36.170 --> 00:01:42.490 so if I go here on line 160, I'm using this title that doesn't exist. 00:01:42.520 --> 00:01:48.040 If I want to look why this doesn't exist, as I know that I have already a component 00:01:48.070 --> 00:01:52.290 designed for it, I should go in my import and check, 00:01:52.320 --> 00:01:56.570 did I create an import for this title when I'm trying to use it? 00:01:56.600 --> 00:02:00.880 And boom, here you might spot that you actually misspelled this, 00:02:00.910 --> 00:02:05.850 so you can just delete this and save it and everything will be okay. 00:02:05.880 --> 00:02:09.840 Now, another thing that you might come across 00:02:09.870 --> 00:02:14.420 is importing the modules incorrectly, such as font or some icon. 00:02:14.450 --> 00:02:16.400 Here you see that we need curly braces, 00:02:16.430 --> 00:02:19.860 and if I delete this, you will face this issue. 00:02:19.890 --> 00:02:22.380 It says, element type is invalid. 00:02:22.410 --> 00:02:25.860 It expected a string or a class, but got undefined. 00:02:25.890 --> 00:02:28.680 If you see this, make sure that you have 00:02:28.710 --> 00:02:31.500 imported them as libraries have guided you to. 00:02:31.530 --> 00:02:34.420 Because here, this doesn't really help. 00:02:34.450 --> 00:02:38.100 What you could also do is just open up 00:02:38.130 --> 00:02:41.580 a browser and you can start searching for this error. 00:02:41.610 --> 00:02:45.460 Here we have, element type is invalid, 00:02:45.490 --> 00:02:49.400 expected a string, or a class function, but got undefined. 00:02:49.430 --> 00:02:50.340 Here we go. 00:02:50.370 --> 00:02:54.860 This is a Stack Overflow, which is one of the widely used websites 00:02:54.890 --> 00:03:00.420 for any bugs or requests that you might have from fellow developers to help you. 00:03:00.450 --> 00:03:04.380 If you see something like this, you can always go on Stack Overflow. 00:03:04.410 --> 00:03:08.260 There's no way that somebody wouldn't have asked that question already. 00:03:08.290 --> 00:03:13.540 Here you're going to see a bunch of answers that might help you out. 00:03:13.570 --> 00:03:16.380 Let's see which one has the highest score. 00:03:16.410 --> 00:03:19.200 Here, this guy says that in my case, 00:03:19.230 --> 00:03:24.980 when using webpack, it was the difference between having the curly braces or not. 00:03:25.010 --> 00:03:27.560 This is exactly the issue that we face here. 00:03:27.590 --> 00:03:32.420 You see how easy it is to find your answer on Stack Overflow using Google. 00:03:32.450 --> 00:03:34.660 If you have any issues such as this, 00:03:34.690 --> 00:03:39.020 please make sure that you use Google to find your answers. 00:03:39.050 --> 00:03:44.140 Now, let's get these curly braces back and start talking about other issues. 00:03:44.170 --> 00:03:48.980 For example, you might get an error saying, cannot read a property of 00:03:49.010 --> 00:03:53.000 undefined if you're trying to access a variable that's undefined. 00:03:53.000 --> 00:03:54.800 For example, let's create a new constant 00:03:54.830 --> 00:03:59.800 here and let's say that you want to access some non-existent variable. 00:03:59.830 --> 00:04:07.360 To access that, what you use is user post, and you want to access the 10th user post, 00:04:07.390 --> 00:04:11.220 which just doesn't exist because we have five elements inside this array. 00:04:11.250 --> 00:04:14.610 If I save this, I'm going to get this error that I was 00:04:14.640 --> 00:04:19.660 expecting saying that this doesn't exist because it's undefined, 00:04:19.690 --> 00:04:23.420 and it's going to show me the line where I made this mistake. 00:04:23.450 --> 00:04:28.260 You can just always go to that line and explore what might have gone wrong there. 00:04:28.280 --> 00:04:28.560 Great. 00:04:28.590 --> 00:04:32.420 This is one more bug that you might see often in your code. 00:04:32.450 --> 00:04:35.480 Another bug that is connected to the use 00:04:35.510 --> 00:04:39.700 effect hook is something that says maximum depth exceeded. 00:04:39.720 --> 00:04:43.140 This usually happens when you have an infinite loop created. 00:04:43.160 --> 00:04:47.100 How do we create infinite loop in our application? 00:04:47.130 --> 00:04:52.600 Here we see we have a use effect which runs every time the page loads. 00:04:52.720 --> 00:04:55.300 What if we tell this user fact 00:04:55.330 --> 00:04:59.840 to run every time our user post rendered data changes? 00:04:59.860 --> 00:05:04.420 If I do this and I copy this and I paste it here, 00:05:04.450 --> 00:05:08.600 what's going to happen is that I will have this maximum depth exceeded error. 00:05:08.630 --> 00:05:11.220 It's shown right inside this terminal. 00:05:11.250 --> 00:05:15.860 The reason I get this, let's reload it and I'm going to get it one more time. 00:05:15.890 --> 00:05:18.460 The reason this happens is because we 00:05:18.480 --> 00:05:23.700 say to the user effect that, hey, run every time this data changes. 00:05:23.720 --> 00:05:25.800 But what happens here is that once we get 00:05:25.830 --> 00:05:30.540 in here, we change the user stories renders data. 00:05:30.570 --> 00:05:34.180 Every time this user effect executes, 00:05:34.210 --> 00:05:37.700 our user stories renders data is going to be changing. 00:05:37.730 --> 00:05:39.540 It's written right on this line. 00:05:39.560 --> 00:05:41.440 What's going to happen is that this is 00:05:41.440 --> 00:05:44.940 going to cause infinite loop because you're trying to run this every time it 00:05:44.970 --> 00:05:48.700 changes and every time this function runs, it will be changing. 00:05:48.730 --> 00:05:50.980 This is called an infinite loop. 00:05:51.010 --> 00:05:54.660 In this case, you're always going to get maximum depth exceeded. 00:05:54.690 --> 00:05:57.760 If you do get this error, make sure to read it. 00:05:57.790 --> 00:06:00.900 It says warning, maximum update depth exceeded. 00:06:00.920 --> 00:06:03.060 This can happen when a component calls set 00:06:03.090 --> 00:06:06.840 state inside use effect, but use effect either doesn't have 00:06:06.860 --> 00:06:11.180 a dependency array or one of the dependencies changes on every render. 00:06:11.210 --> 00:06:14.600 This error itself tells you what's wrong. 00:06:14.630 --> 00:06:18.100 So make sure that you try to trace this 00:06:18.130 --> 00:06:21.560 inside your application, and maybe then you're going to be able 00:06:21.590 --> 00:06:26.220 to see that you have one more dependency that causes this and you delete this. 00:06:26.250 --> 00:06:26.920 Great. 00:06:26.950 --> 00:06:33.500 Now, one other item that we could discuss is unable to resolve module error. 00:06:33.530 --> 00:06:38.460 This happens when, for example, you try to import something from 00:06:38.480 --> 00:06:43.780 non-existent library and then you try to do something with it. 00:06:43.800 --> 00:06:46.300 Let's say you want to 00:06:46.330 --> 00:06:53.860 create a new constant and you do something dot here, for example, and you save this. 00:06:53.890 --> 00:06:59.540 In this case, what's going to happen is if you open the terminal, let's reload, 00:06:59.570 --> 00:07:02.180 you're going to see, unable to resolve module, 00:07:02.210 --> 00:07:07.060 non-existent library, and it's going to tell you which library doesn't exist. 00:07:07.090 --> 00:07:11.100 See, there's an arrow here and it tells you that this library doesn't exist. 00:07:11.120 --> 00:07:12.980 If something like this happens to you, 00:07:13.010 --> 00:07:18.860 just make sure to do NPM install so that all of your libraries are installed. 00:07:18.890 --> 00:07:23.380 Moreover, you can also make sure that your pods are installed 00:07:23.410 --> 00:07:28.300 and you go to IOS folder and reinstall your pods just in case 00:07:28.330 --> 00:07:33.460 you're running on macOS and you haven't installed your pods. 00:07:33.480 --> 00:07:33.880 Great. 00:07:33.910 --> 00:07:36.700 This is another type of issue that you might face. 00:07:36.730 --> 00:07:39.060 Now, let's reload our application and make 00:07:39.090 --> 00:07:42.700 sure that we get rid of this previously caused errors. 00:07:42.730 --> 00:07:43.900 Let's save this. 00:07:43.920 --> 00:07:49.660 Now, I also want to introduce one other issue that you might face, which is 00:07:49.690 --> 00:07:53.220 each child in a list should have a unique key prop. 00:07:53.250 --> 00:07:56.400 This error usually happens when you are 00:07:56.420 --> 00:08:00.700 trying to iterate over the items and create new elements from it. 00:08:00.730 --> 00:08:04.620 Let's say here we have a view component. 00:08:04.650 --> 00:08:09.460 And inside this view component, what we do is we grab user stories, 00:08:09.480 --> 00:08:15.120 we map over each item, and then we do something with it. 00:08:15.800 --> 00:08:22.020 Let's say that the thing that we do is create a text component and we use item. 00:08:22.040 --> 00:08:24.060 Firstname to generate it. 00:08:24.090 --> 00:08:29.740 If I save this, you are going to see the name from our user stories listed here. 00:08:29.770 --> 00:08:31.900 But you're also going to see a warning 00:08:31.920 --> 00:08:35.860 saying each child in a list should have a unique key prop. 00:08:35.890 --> 00:08:37.740 Let's talk about this. 00:08:37.770 --> 00:08:43.860 In React Native, every child in an array or iterator should have a unique key prop. 00:08:43.890 --> 00:08:46.140 Here is why it's important. 00:08:46.170 --> 00:08:48.700 React uses a reconciliation process 00:08:48.730 --> 00:08:52.220 to determine how to most efficiently update the DOM. 00:08:52.250 --> 00:08:54.780 When rendering a list of items, 00:08:54.810 --> 00:09:00.220 React needs a way to identify each item in order to determine what has changed, 00:09:00.250 --> 00:09:04.220 what needs updating, what can be deleted, and so on. 00:09:04.250 --> 00:09:09.580 Keys provide a stable identity for each item, making this process more efficient. 00:09:09.610 --> 00:09:12.040 When an item's key is the same before 00:09:12.060 --> 00:09:16.280 and after a render, React knows that the underlying item is 00:09:16.310 --> 00:09:21.940 the same and it can keep that component instance and its internal state intact. 00:09:21.970 --> 00:09:27.380 Without keys, React can't associate an item with its previous instance. 00:09:27.410 --> 00:09:33.160 As a result, it might need to tear down the entire list and rebuild it one more 00:09:33.190 --> 00:09:38.580 time, even if only one item changed, which affects the performance. 00:09:38.610 --> 00:09:40.160 This can be quite inefficient 00:09:40.190 --> 00:09:44.740 and negatively impact your performance, especially in large lists. 00:09:44.770 --> 00:09:46.980 So if you see this warning, 00:09:47.010 --> 00:09:54.180 make sure that you have a unique key set to the items that you're iterating over. 00:09:54.200 --> 00:09:59.860 Unfortunately, here we don't see exactly where our issue is, but you do know where 00:09:59.890 --> 00:10:03.700 you might be iterating over the list, so you have to search 00:10:03.730 --> 00:10:08.260 for that in your code and make sure that you set a unique key here. 00:10:08.290 --> 00:10:13.460 And if I just use item ID, you're going to see that this warning will disappear. 00:10:13.490 --> 00:10:17.140 Let me reload this and you're not going to see this anymore. 00:10:17.170 --> 00:10:20.200 Now we can delete this. 00:10:20.240 --> 00:10:21.360 That's it. 00:10:21.390 --> 00:10:26.340 I think we went over most of the bugs that you might get in React Native. 00:10:26.370 --> 00:10:28.880 Again, if you face some issues and you are 00:10:28.910 --> 00:10:34.780 not sure how to resolve those issues, please open up Google and just google it. 00:10:34.810 --> 00:10:39.420 Write exactly the same words that your simulator or your terminal is showing 00:10:39.440 --> 00:10:45.140 to you and there's no way that other developer hasn't faced the same issue. 00:10:45.170 --> 00:10:50.300 The answer is definitely going to come up on Stackoverflow, so you can look there. 00:10:50.320 --> 00:10:52.360 Of course, you can always ask questions 00:10:52.390 --> 00:10:57.580 in the Q&A section here, but Q&A section is not going to help you 00:10:57.600 --> 00:10:59.900 when you're going to be working on your personal projects. 00:10:59.930 --> 00:11:02.260 Therefore, embrace your bugs. 00:11:02.290 --> 00:11:03.500 Don't fear them. 00:11:03.530 --> 00:11:05.860 You can resolve any bug. 00:11:05.890 --> 00:11:08.840 Just make sure that you look them up. 00:11:08.870 --> 00:11:09.940 And also, 00:11:09.970 --> 00:11:14.340 one of the biggest tips that I can give to you is definitely 00:11:14.370 --> 00:11:19.340 look at the simulator and look at your terminal while you're writing the code. 00:11:19.370 --> 00:11:22.660 Experience developers always doubt themselves. 00:11:22.690 --> 00:11:24.880 They never believe that, Okay, 00:11:24.880 --> 00:11:28.600 I'm just going to write this code and I don't need to look at the simulator. 00:11:28.630 --> 00:11:30.580 This just does not happen. 00:11:30.610 --> 00:11:33.800 If I'm working on something, I always have my simulator next 00:11:33.830 --> 00:11:37.920 to my editor right here, and I make sure that every line of code 00:11:37.950 --> 00:11:43.280 that I write is leading to the results that I expected. 00:11:43.310 --> 00:11:48.100 If not, I don't continue writing the code until I resolve that issue. 00:11:48.130 --> 00:11:49.740 I work on that issue. 00:11:49.770 --> 00:11:52.720 The reason behind it is that as your code 00:11:52.750 --> 00:11:58.280 grows, debugging your application is going to become more and more impossible. 00:11:58.280 --> 00:11:59.140 Therefore, 00:11:59.170 --> 00:12:05.260 make your code visible in the simulator and make sure that whenever you write 00:12:05.290 --> 00:12:09.140 code, it leads to the results that you are expecting. 00:12:09.170 --> 00:12:12.140 Don't just write code without checking what's happening. 00:12:12.170 --> 00:12:17.020 Make sure that every line of code is something that you expected. 00:12:17.050 --> 00:12:19.180 That's all for today. 00:12:19.210 --> 00:12:21.660 This was a very important lesson. 00:12:21.690 --> 00:12:25.220 There's no way that you can avoid debugging your applications. 00:12:25.240 --> 00:12:27.120 If you're not going to be debugging your 00:12:27.150 --> 00:12:30.820 applications, you're just simply not going to be a developer. 00:12:30.850 --> 00:12:34.780 Just embrace your bugs and don't fear them. 00:12:34.810 --> 00:12:39.500 Face them head-on and you can do anything that you set your mind to. 00:12:39.520 --> 00:12:41.640 Thank you and I'll see you in the next video.