The most common errors in React

Errors, those annoying messages that comes to you whenever you are expecting some successful results.

First of all, let's be honest! No one writes a code without errors, because no one writes perfect code, and we're happy that React helps us out in revealing those Bugs.

However, what is important is how to react (lowercase r xd) to these errors. Coming across them, searching them on Google and fixing your code based on other's experiences is one way.

Another way — and perhaps, a better one — is to understand the issue and why does it happen in the first place.

In this post, we will go over some of the most common React error messages and maybe how to fix them ?

Alright list some of them :

• Warning: Each child in a list should have a unique key prop. (Actually this is a warning not an error but it is famous)

  When creating a list in the UI from an array with JSX, you should add a key prop to each child and to any of its’ children, for example : [el, el, el].map(e=>{e}).    React uses the key prop create a relationship between the component and the DOM element. The library uses this relationship to determine whether or not the component should be re-rendered.

   It is not recommended to use the index of the array as the key prop if you know the array will not be static. If the key is an index, reordering an item in the array changes it. Then React will get confused and re-render the incorrect element.

   Keys do not have to be unique globally. They just need to be unique across sibling elements.

• Adjacent JSX elements must be wrapped in an enclosing tag.

• Objects are not valid as a React child / Functions are not valid as a React child.

• Too many re-renders. React limits the number of renders to prevent an infinite loop.

• Prevent usage of Array index in keys.

Final thoughts :

Coming across errors during development is an inevitable part of the process, no matter the amount of experience you have. However, the way you handle these error messages is also indicative of your ability as a React developer. To do so properly, it’s necessary to understand these errors and know why they’re happening.

Error boundaries : For a better understanding of react errors visit this website Error Boundaries.