For the past five years, React has been rapidly increasing in its popularity and by the beginning of 2018, it became more popular than jQuery – at least in terms of Google searches.
However, we will not be comparing tools in terms of their demand in the search engines; but, that gives us a clear understanding that the React’s library is definitely popular. Since it’s been released, React has completely changed the way we build our user interface.
If you are working with React, you should follow some basic practices because React is a relatively young library actively developed by Facebook and contributors from around the world. There are next-to-none established conventions to speak of, and those that exist come from Facebook – such as its component structure or state, props and context distinctions.
Today we will take this topic head-on and explore some of our most fundamental best practices:
1. Keep component creation to a minimum
You can always improve the reusability of components, by sticking to the rule of one function = one component. This means that you should skip trying to build a new component for a function if there already exists one for that function.
By reusing not only will you keep up with consistency, but you will also contribute to the community.
On the other hand, if a component becomes large or difficult to maintain, it’s better to break it up into a few smaller components.
For example, you can even go further and create a Button component that can handle icons. Then, each time you need a button, you’ll have a component to use. Making it more modular will allow you to cover many cases with the same piece of code. The best way is to aim somewhere in the middle. Your components should be abstract enough, yet not overly complex.
You can further expand this button component by adding icons, borders, custom CSS and whatever else you can think of.
2. Use a linter
Linting is a process where we run a program that analyses code for potential errors.
Mostly, we use it for language-related issues. But it can also fix many other issues automatically – particularly code style. Using a linter in your React code will help you keep your code relatively error- and bug-free.
3. The code should be testable
The code you write should be easily and quickly testable. It’s a good practice to name your test files identically to the source files with a ‘.test’ suffix. It’ll then be a lot easier to find the files you’ve tested.
You can use Cypress.io, and or JEST to test your React code.
4. DRY your code
A common rule for all code is to keep it as brief as possible.
You can achieve this by inspecting the code for patterns. If you find any, it’s possible you are repeating some code and there’s scope to eliminate duplication. A bit of rewriting might make it more concise.
This relies on the reusability principle in React. Let’s say you want to add multiple buttons that contain icons. So, instead of adding the markup for each button, you can simply use the Button component that we made earlier. You could even go further by mapping everything into an array.
5. Use more robust managers to manage application state, such as Redux
For those of you who have no idea what an application state is: it is like a global object which holds information that you use for various purposes later in the app (e.g. making decisions on which components to render and when, rendering the stored data etc).
Big applications have big application states so managing them gets more and more inconvenient as your app grows.
That’s why we need state management libraries like Redux.
One of the patterns that Redux follows is called “Single Source of Truth” – which means we have only one place (called Store) where we store the only state for the whole application.
In other words, one app – one store – one state.
6. Use defaultProps and propTypes
7. File structure
React doesn’t have preferences on how you should put files into folders. That being said, there are a few common approaches popular in the ecosystem you may want to consider.
- Grouping by features or routes – one common way to structure projects is to locate CSS, JS, and tests together inside folders grouped by feature or route.
- Grouping by file type – another popular way to structure projects is to group similar files together, for example:
8. Use stateful function-based components by starting to use React Hooks
Hooks are easier to work with and to test (as separated functions from React components*). Also, they make the code look cleaner and easier to read — a related logic can be tightly coupled in a custom hook. A code that uses hooks is easily readable and has fewer lines of code.
You can also define several separated lifecycle methods instead of having all in one method (so you can split componentDidMount() logic with ease).
Somehow include an embedded link here: https://twitter.com/prchdk/status/1056960391543062528
With this, you can visually see how hooks simplify the code and make it shorter.
We hope this article shed some light on React’s best practices and patterns that are very popular in 2020! If you have any questions, feel free to send me an email on firstname.lastname@example.org.