Welcome back.
Today, we're going to start talking about debugging and its importance.
Contrary to common misconceptions,
encountering bugs and issues isn't indicative of a developer's incompetence.
Rather, it's an inherent part of the coding journey.
Every developer,
regardless of their expertise or the complexity of their project,
inevitably confronts challenges that require debugging.
Addressing these issues not only sharpens
a developer's problem, solving skills, but also nurtures resilience, patience,
and the meticulous approach to code, craftsmanship.
In essence, facing and overcoming such
hurdles is a rite of passage in the evolution of a proficient developer.
Even I have to debug applications daily, there are mistakes that I make and there
will be many mistakes that you're going to make.
The main idea here is to recognize
the mistakes that you're making, understand why you might be making them.
Today, we're going to start talking about
the tools that will help you resolve your bugs.
Let's get started.
I want to introduce you to a couple of bugs that you might see frequently
inside React Native Applications and what you could do to resolve them.
Let's get started with incorrectly
importing items and the issues that might cause.
For example, if I try to import a title
here and I accidentally misspell it and I add one more E at the end and I save this,
I'm going to get an error and it's going to say that property title doesn't exist.
It will tell me that on line 160,
so if I go here on line 160, I'm using this title that doesn't exist.
If I want to look why this doesn't exist, as I know that I have already a component
designed for it, I should go in my import and check,
did I create an import for this title when I'm trying to use it?
And boom, here you might spot that you actually misspelled this,
so you can just delete this and save it and everything will be okay.
Now, another thing that you might come across
is importing the modules incorrectly, such as font or some icon.
Here you see that we need curly braces,
and if I delete this, you will face this issue.
It says, element type is invalid.
It expected a string or a class, but got undefined.
If you see this, make sure that you have
imported them as libraries have guided you to.
Because here, this doesn't really help.
What you could also do is just open up
a browser and you can start searching for this error.
Here we have, element type is invalid,
expected a string, or a class function, but got undefined.
Here we go.
This is a Stack Overflow, which is one of the widely used websites
for any bugs or requests that you might have from fellow developers to help you.
If you see something like this, you can always go on Stack Overflow.
There's no way that somebody wouldn't have asked that question already.
Here you're going to see a bunch of answers that might help you out.
Let's see which one has the highest score.
Here, this guy says that in my case,
when using webpack, it was the difference between having the curly braces or not.
This is exactly the issue that we face here.
You see how easy it is to find your answer on Stack Overflow using Google.
If you have any issues such as this,
please make sure that you use Google to find your answers.
Now, let's get these curly braces back and start talking about other issues.
For example, you might get an error saying, cannot read a property of
undefined if you're trying to access a variable that's undefined.
For example, let's create a new constant
here and let's say that you want to access some non-existent variable.
To access that, what you use is user post, and you want to access the 10th user post,
which just doesn't exist because we have five elements inside this array.
If I save this, I'm going to get this error that I was
expecting saying that this doesn't exist because it's undefined,
and it's going to show me the line where I made this mistake.
You can just always go to that line and explore what might have gone wrong there.
Great.
This is one more bug that you might see often in your code.
Another bug that is connected to the use
effect hook is something that says maximum depth exceeded.
This usually happens when you have an infinite loop created.
How do we create infinite loop in our application?
Here we see we have a use effect which runs every time the page loads.
What if we tell this user fact
to run every time our user post rendered data changes?
If I do this and I copy this and I paste it here,
what's going to happen is that I will have this maximum depth exceeded error.
It's shown right inside this terminal.
The reason I get this, let's reload it and I'm going to get it one more time.
The reason this happens is because we
say to the user effect that, hey, run every time this data changes.
But what happens here is that once we get
in here, we change the user stories renders data.
Every time this user effect executes,
our user stories renders data is going to be changing.
It's written right on this line.
What's going to happen is that this is
going to cause infinite loop because you're trying to run this every time it
changes and every time this function runs, it will be changing.
This is called an infinite loop.
In this case, you're always going to get maximum depth exceeded.
If you do get this error, make sure to read it.
It says warning, maximum update depth exceeded.
This can happen when a component calls set
state inside use effect, but use effect either doesn't have
a dependency array or one of the dependencies changes on every render.
This error itself tells you what's wrong.
So make sure that you try to trace this
inside your application, and maybe then you're going to be able
to see that you have one more dependency that causes this and you delete this.
Great.
Now, one other item that we could discuss is unable to resolve module error.
This happens when, for example, you try to import something from
non-existent library and then you try to do something with it.
Let's say you want to
create a new constant and you do something dot here, for example, and you save this.
In this case, what's going to happen is if you open the terminal, let's reload,
you're going to see, unable to resolve module,
non-existent library, and it's going to tell you which library doesn't exist.
See, there's an arrow here and it tells you that this library doesn't exist.
If something like this happens to you,
just make sure to do NPM install so that all of your libraries are installed.
Moreover, you can also make sure that your pods are installed
and you go to IOS folder and reinstall your pods just in case
you're running on macOS and you haven't installed your pods.
Great.
This is another type of issue that you might face.
Now, let's reload our application and make
sure that we get rid of this previously caused errors.
Let's save this.
Now, I also want to introduce one other issue that you might face, which is
each child in a list should have a unique key prop.
This error usually happens when you are
trying to iterate over the items and create new elements from it.
Let's say here we have a view component.
And inside this view component, what we do is we grab user stories,
we map over each item, and then we do something with it.
Let's say that the thing that we do is create a text component and we use item.
Firstname to generate it.
If I save this, you are going to see the name from our user stories listed here.
But you're also going to see a warning
saying each child in a list should have a unique key prop.
Let's talk about this.
In React Native, every child in an array or iterator should have a unique key prop.
Here is why it's important.
React uses a reconciliation process
to determine how to most efficiently update the DOM.
When rendering a list of items,
React needs a way to identify each item in order to determine what has changed,
what needs updating, what can be deleted, and so on.
Keys provide a stable identity for each item, making this process more efficient.
When an item's key is the same before
and after a render, React knows that the underlying item is
the same and it can keep that component instance and its internal state intact.
Without keys, React can't associate an item with its previous instance.
As a result, it might need to tear down the entire list and rebuild it one more
time, even if only one item changed, which affects the performance.
This can be quite inefficient
and negatively impact your performance, especially in large lists.
So if you see this warning,
make sure that you have a unique key set to the items that you're iterating over.
Unfortunately, here we don't see exactly where our issue is, but you do know where
you might be iterating over the list, so you have to search
for that in your code and make sure that you set a unique key here.
And if I just use item ID, you're going to see that this warning will disappear.
Let me reload this and you're not going to see this anymore.
Now we can delete this.
That's it.
I think we went over most of the bugs that you might get in React Native.
Again, if you face some issues and you are
not sure how to resolve those issues, please open up Google and just google it.
Write exactly the same words that your simulator or your terminal is showing
to you and there's no way that other developer hasn't faced the same issue.
The answer is definitely going to come up on Stackoverflow, so you can look there.
Of course, you can always ask questions
in the Q&A section here, but Q&A section is not going to help you
when you're going to be working on your personal projects.
Therefore, embrace your bugs.
Don't fear them.
You can resolve any bug.
Just make sure that you look them up.
And also,
one of the biggest tips that I can give to you is definitely
look at the simulator and look at your terminal while you're writing the code.
Experience developers always doubt themselves.
They never believe that, Okay,
I'm just going to write this code and I don't need to look at the simulator.
This just does not happen.
If I'm working on something, I always have my simulator next
to my editor right here, and I make sure that every line of code
that I write is leading to the results that I expected.
If not, I don't continue writing the code until I resolve that issue.
I work on that issue.
The reason behind it is that as your code
grows, debugging your application is going to become more and more impossible.
Therefore,
make your code visible in the simulator and make sure that whenever you write
code, it leads to the results that you are expecting.
Don't just write code without checking what's happening.
Make sure that every line of code is something that you expected.
That's all for today.
This was a very important lesson.
There's no way that you can avoid debugging your applications.
If you're not going to be debugging your
applications, you're just simply not going to be a developer.
Just embrace your bugs and don't fear them.
Face them head-on and you can do anything that you set your mind to.
Thank you and I'll see you in the next video.