20 Do's and Don'ts of React in 2020
Mubbashir Mustafa
Posted on September 16, 2020
Disclaimer: Highly opinionated!!
- Use hooks and functional components
- 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!)
- Leave Container/Component pattern (read update by Dan Abramov)
- Prefer vanilla JS over libraries like lodash, moment etc. (whenever possible) - it's more of a JS tip in general ;)
- 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
- Use Material UI or Antd for your UI needs
- Start using styled components - will make your life easier (btw it integrates nicely with Material UI/Antd)
- Don't be obsessed with render count (but it doesn't mean you shouldn't be mindful of unnecessary renders)
- Instead of Formik, see if you can write custom hooks and handle your forms using that (or use React Hook form)
- 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
- Use Next.js for server-side rendering and Gatsby for static websites
- Use index based import/exports
- Use some styling/linting library (like airbnb-styling-guide) as a base and introduce changes that make sense within your team
- Comment only when necessary (your components should be self-explanatory
- Avoid unnecessary logging, use Error Boundaries and try to use
console.error
for errors - Prefer render props over HOCs (read more)
- 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! - Keep components concise and clean and make sure they follow SRP
- If you use
useCallback
a lot please read this first - 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)
💖 💪 🙅 🚩
Mubbashir Mustafa
Posted on September 16, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.