What are the most common mistakes when creating custom components in React?

In my previous organisation I introduced hooks back in 2018-19, and eventually the entire organisation moved from class based components to functional components (backed by React hooks). Back then we were witnessing a steep rise in Functional Programming over OOP. This changing trend brought our focus on functional programming making our code: 1. Easier to read and test 2. Less code 3. Performance boost for functional component By using hooks we saw about 9.6 –12.08% reduction in the chunk size, and shifting to functional components made it possible for us to write clearer and more manageable code.

It is really important to use right naming structure not just for your components but for your files as well. You should also consider your code as a love letter to the next developer who would inherit it after you, which means the code structure, naming and modularity should be such that it should be really easy to understand by any new developer!

This is very subjective when you are already using typescript in your project you don't need to worry about prop types. In plain js it would give some safety so make sure to add it.

The idea is to use a prop checking mechanism that ensures prop validation, add/remove each prop will always make you check the schema of the prop. This will make sense when the component grows exponentially and you don't have to manage things. Either to use propTypes or Typescript, anything can work. But usage is necessary to make a component isolated and detachable so that whenever any other dev can easily get to know the required props to use it

Esto es importante. Puedes usar como Key el valor de la propiedad "id" que tenga la respuesta que estás iterando. En caso de que no exista, puedes utilizar un valor de la respuesta que sea único. Por ejemplo: en un listado de usuarios, el campo email debería ser único. Ese valor puede ser la "key" de los items que estás renderizando.

In the past, I noticed that many people, including myself in my initial project, used numbers from a list to identify items. However, I've learned that in React, a programming tool for building websites, this method can cause problems. It can lead to unnecessary work for the computer, like setting up and taking down things more often than needed. Also, it can make the website behave unpredictably, especially when the order of items changes.

Keys are the important parameter which helps react knows the identity of any node inside the array/list. It helps react in the reconciliation (diffing algo in react for rendering) process. Also understanding diffing algo will ensure the usage of keys and what keys to be passed. Below are some examples - 1. If the list/array is static and not going to change substantially, then index can be used here. 2. If the list is dynamic and it can be changed, including positions and everything, then we should always pass a prop which is unique for that item, like I'd, ImageUrl or anything, which ensures the uniqueness of that item. For non array/list items we don't really need keys, as those have always unique and react knows it.

Reusability of code is one of the most important aspects of most new age frameworks and libraries, React is no different and the team has provided us with enough tools to make sure we write code once and invoke it at different places instead of write the same piece of code again. Using custom hooks is one of the ways you can make sure that your piece of code is reusable. You wouldn’t want to make same changes at multiple places which could cause issues if the changes are missed to be added somewhere where it was needed.

Hooks separates the logical part from the components so that the same logic/buisness flow can be used in some other part of the projects. Let's take an example - If you are showing the user offline/online in browser, so here need to interact with some of the browser webApis. Now if the same logic needs to be added in the other part of the page/component the it will be repeated and later on if you need to add some changes specifically to that part then, both places we need to update, that considerably a heavy maintenance and it can increase the coverage of tests. To mitigate this kind of scenario, hooks can be used here to avoid component bloats and promote SRP(single responsibility principle) and DRY considerably.