20 Do's and Don'ts of React in 2020

Disclaimer: Highly opinionated!!

1. Use hooks and functional components
2. Use context for state management (introduce redux or other flux based state management systems only when you feel it's really necessary, and not because you read somewhere that you couldn't make complex apps without redux/mobx!)
3. Leave Container/Component pattern (read update by Dan Abramov)
4. Prefer vanilla JS over libraries like lodash, moment etc. (whenever possible) - it's more of a JS tip in general ;)
5. If you are using GraphQL based apis then instead of introducing service layer, try to use apollo hooks (if you are using apollo client) and incorporate data fetching in your components - for relay see this
6. Use Material UI or Antd for your UI needs
7. Start using styled components - will make your life easier (btw it integrates nicely with Material UI/Antd)
8. Don't be obsessed with render count (but it doesn't mean you shouldn't be mindful of unnecessary renders)
9. Instead of Formik, see if you can write custom hooks and handle your forms using that (or use React Hook form)
10. Use Typescript (should have been #1!) - but please just don't add "any" everywhere like my previous team used to do - it defeats the purpose
11. Use Next.js for server-side rendering and Gatsby for static websites
12. Use index based import/exports
13. Use some styling/linting library (like airbnb-styling-guide) as a base and introduce changes that make sense within your team
14. Comment only when necessary (your components should be self-explanatory
15. Avoid unnecessary logging, use Error Boundaries and try to use console.error for errors
16. Prefer render props over HOCs (read more)
17. Keep useEffect block separated based on dependencies (if they are independent) and try to have all your useEffect blocks just before your JSX (return method) and sort them based on number of dependencies - it really makes your code looks clean!
18. Keep components concise and clean and make sure they follow SRP
19. If you use useCallback a lot please read this first
20. Use React.lazy and Suspense for the entry point of a component

** Not directly related to React but please stop abusing firebase!! (make sure your architecture is well thought of and can be scaled when your business grows)