Best practices for React
I have been working with react for a few years at Pipefy, and I have picked up on some best practices from my co-workers. In this text I would like to share some small details that have helped me write a cleaner and more maintainable code.
Tl;dr:
In this article you will find from best practices and some tips for React, to how to organize a React Class and a few React Tools.
Stateless and Functions
In reducing the complexity, it’s always important to have these in mind when creating new components:
- Start with the simplest
- Develop a single stateless function
A React component can simply be a function as long as there’s nothing interfering in its lifecycle. In other words, basically when the React component is not using any of the following functions:
- constructor()
- render()
- setState()
- componentDidCatch()
- componentDidMount()
- componentDidUpdate()
- componentWillUnmount()
- shouldComponentUpdate()
Organize the functions in a React Class
Adopting a pattern for sorting your functions in a React class is also going to help you browse large files, which in turn, allows you to anticipate where each function will be placed.
You can choose the most comfortable pattern for you. The one I like the most is:
- Constructor
- React lifecycle methods
- The others components method
- Render
Even being a simple habit adopting new work standards, we must always remain disciplined even more so if there are several developers in the project when these standards must be continuously documented and respected.
A Single component per file
This makes it easier when looking for the component in the text editor, especially whenever two file may have the same name as the component.
Use parentheses in render method when there are two or more rows.
We sometimes try to simplify a code so much that can we create situations where we can easily fall into a trap. When we are using JSX tags inside javascript, it can leave the code aesthetically confusing, and this is very common in the react render method.
You can work around this by using parentheses to define different contexts.
Keep your project updated
It is very dull to keep dependencies updated in a javascript project, but when we use the right tools, this becomes trivial. Try to use the Yarn with the command:
yarn upgrade-interactiveUse keys in lists
Everytime you use a list, don’t forget the keys. They help improve your component’s rendering performance. You can find more about that in the React Docs!
Know and Understand the Tools Available
The high popularity of React is related to its ecosystem having many tools that help the developer to increase productivity.
Here is a list of indispensable tools:
- ES6 + ES7 + ES8
- EsLint
- Prettier
- Jest + Coverage
- Flowjs
- React Dev Tools
- Redux Dev Tools
React StrictMode
Using the StrictMode is a safe way to prevent problems in a React project, as it increases the warnings in the javascript console, notifying you about:
- Side effects
- Components that use unsafe lifecycles
- Legacy and deprecated API
Knowing about these warnings helps you prepare your application for new React versions.
Adopting these little tips is up to you, none of them are mandatory, but I sincerely believe they can help you write better code.
Do you have any other tips to share with us?
😉
Did you like these tips? If you want to learn more about React, please don’t miss this article.
By the way, we are hiring…
Thanks for reading, if you want to be part of Pipefy, join our team. We want to meet you.
