Learning is a never-ending journey, as a developer you must learn to un-learn and re-learn new things every day. It should be a norm as developers to search google for best practices so we can write clean, scalable, and maintainable code and also be productive. In this article I will show you 10 react do's and don'ts, to help you start building optimizable production-ready applications when using react.
NOTE: These are my personal preference from my 5years of writing react, I hope these help you become a better react developer or javascript engineer in general.
📚What you will learn
The DOs
- Use TypeSctript
- Use a query library
- Learn to make custom hooks
- Learn to get used to dependency arrays
- Use functional components over class components
- Use Next.js for server-side rendering and Gatsby for static websites
The DON'Ts
- Don't use React Fragment
- Don’t make your own UI library
- Don’t ignore useCallback or useMemo
- Don’t use Redux just because you think you have to
The DOs
🎯Use TypeSctript
Use Typescript when building your react app, it helps you make more robust, reliable, and easy to maintain applications. So why are you not using TS in your react app? it has saved me so many times from run-time errors and I have only been using it for a year now. TypeScript is absolutely worth using in your react app.
🎯Use a query library
Speaking of query libraries I highly recommend you use them. Use something like React-Query, SWR - these are fantastic query libraries that do more than just fetching, they give you a lot right out of the box. They allow fetching, caching, or re-fetching data in real-time, and re-fresh on an interval. They also have useMutation that makes it possible to do post requests and is super simple. My strong recommendation to you is to use them if you want to access any API.
🎯Learn to make custom hooks
Do learn to make and use your own custom hooks. Custom hooks are collections of hooks gathered together as a function that accomplishes a specific task.
🎯Learn to get used to dependency arrays
Learn to love dependency arrays, at least deal with them, or don't hate them quite so much 😊. So dependency arrays are the arrays at the end of useEffect, useCallback, and useMemo, and they tell react when a useEffect should run if any of the items in that dependency array change then your useEffect will re-run, and useEffect is the one that gives people more grief.
Here are some rules to help you
- Rule #1 Add anything you read from that array
- Rule #2 Check what you write in the dependency array
- Rule #3 Don't disable the lint-rule
🎯Use functional components over class components
Don't use class components, but if you are still using class components or you are new to React, I highly recommend starting with the functional component. Let me give you some reasons.
Functional Components are the future of React, take a look at their documentation site where is really hard to find a class component, even on their new beta site is nearly impossible to find a class component, why does it make sense?
Functional Component has a better state mechanism than class-based components. Functional components use hooks and those hooks create reactive state management baked right in to react. Using useState and useReducer you can declare your state, and then using useEffect and useCallback and useMemo you react to changes in the state. Those 5 little hooks can create an amazing ecosystem of super awesome hooks. There are hooks for calling an API, for doing external state management, for CSS, Animations, and everything you can think of has a hook. You won't get access to any of that if you are using class components.
Is harder to build applications with functional components and hooks, there's a deeper learning curve, so if you start it is pretty easy to fall back to class-based components if you find yourself on a project that uses them.
If you are just starting out and you are currently learning class-based components, I highly recommend using functional-based components.
🎯Use Next.js for server-side rendering
I will highly recommend you use Next.js instead of pure react. If you are concerned about the SEO in your application then go with next.js. Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config is needed.
The DON'Ts
🎯Don't use React Fragment
Don't use React Fragment, This causes increased DOM depth causing DOM manipulation slower.
🎯Don’t make your own UI library
Here is the one that's so dear to my heart, Don't build your own UI library, react has an amazing ecosystem of UI libraries, there is MaterialUI, Bootstrap, Auntd, Tailwind, ChakraUI, and Mantine. These are fantastic UI libraries that come out of the box with most of the components you will be needing, plus they are scalable, themeable, and internationalizable. They have great documentation and a whole user community around them that make it very easy to use them. Most importantly some of these libraries, particularly MateriaUI come with templates for a lot of designers' favorite tools like Figma. There's a Figma template for material-UI and it is great at what it does, it allows designers to specify the UI for a component by just dragging and dropping it, and those mockups are exact. I think is just a much better way to communicate with the design team and the development team. You will lose all these if you build your own UI library.
🎯Don’t ignore useCallback or useMemo
Don't ignore useCallback or useMemo. Some advice that went around about how useCallback and useMemo impact the performance of a react app, but that is not 100% true. Yes, they are vital to the reactive state management for react, and when used properly to retain referential identity, it can be a performance enhancement to your react app. Let's take a look at the two hooks and their few use case.
- useMemo: is used if you are computing an array or an object because those are maintained by reference and you want to maintain that referential identity.
- useCallback: is used in two cases. 1. is where you want to keep your callback function from being stale. and 2. is when you want to retain the referential identity of those callbacks.
🎯Don’t use Redux just because you think you have to
When you are thinking about building out your applications and you are thinking about choosing your state management model, my recommendation to you is to start with React state management (Context and Hooks) and see how far that can take you, they may actually be enough. If not enough then go for API requests and use query libraries like React-Query, and SWR. These are strong state management with their caches that might be enough, with a combination of React-Context plus React-Query, and SWR. If you're doing forms then use form libraries like React-Hook-Form or Formik which also maintain state. The combination of all these hooks might be enough for a state management system for your application. But if that doesn't do it then you can use Redux or ReduxToolKit.
Conclusion
How did I do? did I get your own Dos? did I get your own Don'ts? Please let me know in the comments section below. I'll had like to know what dos and don'ts you have to pass on to other react developers like myself.😊