React is arguably one of the most used Frameworks out there today and everyday people are opting this framework for its UI first approach. It's safe to say that the React Library and the whole ecosystem has matured over the years and is still growing. So here are some practices that you can opt and avoid while getting comfortable in the React bubble.
Code readability is something that every developer should take care of and importing everything in order can help a lot with this. Usually its a good practice to import in the following order:
Always wrap a component in parentheses if it crosses more than one line.
To reduce the amount of lines in your code, you can opt for Ternary operators if the condition involves two values.
The best practice would be to keep the logic inside the renderer to a bare minimum and avoid defining a function in there as well.
In order to save the Virtual DOM from creating unnecessary nodes, always go for a Fragment instead of Div. Just remove
<div> and you’re left with a fragment i.e <>
Avoid the use of DOM component prop names when you have to pass props between as these names might not be expected by the others.
#7. Memo ++
To help the compiler avoid unnecessary rendering, you can go with
React.PureComponent. It will drastically improve the overall performance of your application.
For a nice and clean code, try using template literals for large strings. It can also reduce the string concentration in your code.
So this wraps up my personal picks for the best Practices for beginners starting out with React Framework. Let me know your favorites!