Previous post
8 Best React Practices to Follow
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
Redux is a popular JavaScript library for managing the state of your application. It is very common and – if you are working with React – you’ve probably already heard about it.
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
As your app grows, you can catch a lot of bugs with type-checking. For some applications, you can use JavaScript extensions like Flow or TypeScript to type-check your whole application. But even if you don’t use those, React has some built-in type-checking abilities. To run type-checking on the props for a component, you can assign the special propTypes property:
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.
There are many pain points associated with deep directory nesting in JavaScript projects. It becomes harder to write relative imports between them, or to update those imports when the files are moved. Unless you have a very compelling reason to use a deep folder structure, consider limiting yourself to a maximum of three or four nested folders within a single project. Of course, this is only a recommendation, and it may not always be relevant to your project.
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 dichoski@alite-international.com.
Share This Post
You may also like
Written by
Written by
Written by
Written by
We are all about going the extra mile. We deliver not only the expected, but the wished. We work hard to understand what the challenge is, how we can help our clients fast and in depth. Our mission is to deliver the change and transform not only the business but also the way value is created.
Make it more human, more efficient, more visionary. We work closely with our partners not only to transform but to enhance the way the run their business using technology in the most efficient and inspired way
Copyright 2020 Alite International. All Rights Reserved