Top 10 React mistakes every developer should avoid

1. Putting business logic in Reusable components

Most components should be as dump as possible. If you couple your business logic with UI, every time you change these UI elements, you have a risk of potential changes in business logic.

2. Using Redux to manage all the states.

Only the core logic should be managed by Redux. Most components can be managed by React hooks so that they are simple, independent, and reusable.

3. Not performing cleanup after useEffect hook.

Your code may work most of the time, but it will create performance issues later as the complexity of your code increases. It becomes very difficult to find and debug such issues.

4. Using incorrect propTypes

For eg., — A common mistake is to pass numbers or boolean as strings.

5. Importing Named Exports as Default Exports

The correct way of performing named and default export and import.

6. Invoking the function instead of passing it as a reference.

Whenever you add parenthesis next to the function name it invokes the function right away which is not always desirable.

7. Mutating objects or arrays

You should never mutate the state of a component directly, but only through setter method.

8. UseState setter function is asynchronous

Try to run this and you will see that the value of apples in the console doesn’t update. This happens because the useState setter function enqueues the update operation until the next render.

9. Using index as key values

This is probably the most common one. Never use the ‘index’ values as ‘key’ prop while rendering multiple components using the map function. You can use uuid() instead.

10. Omitting dependency array for useEffect

Even though there are completely valid cases for omitting dependency array for useEffect, doing so when its callback modifies the state might cause an infinite loop and crash your application.

If you like this, please clap and share this blog with your friends!! Thank you!!