Hi!
Nice article but some points should be further discussed:
4. "Always use `Fragment` over `div`" - that's not true. There are cases where some components should be wrapped in another component (for example to have flex styling). Then the `div` is necessary.
5. The example is highly misleading. The "good code" is shown in the way it does NOT make any difference to have `submitData` as a variable. It would be true if the `submitData` was created with `useCallback` in a function component, or was a class method in a class component.
7. As already mentioned by other users - this is not a best practice. It is indeed possible to organize CSS well. And it is not "far harder" if you have some knowledge of how the CSS specificity works.
12. If you use IDEs, they should organize it pretty well by default. You can also try using ESlint to ensure that the rules are followed.
Bonus best practice from me:
22. Just use ESLint and Prettier - they cover almost all the 21 practices mentioned automatically ;)
Cheers!
Krzysztof