With so many topics in software development and so many types of needs, best practices become more complex than they seem, but they have a simple side: they are guidelines in the making, pursuing the best ways to do something.
Best Practices in React
Below, we’ll look at 7 general best practices that will help guide your decision-making in React.
1. Design simple, reusable, single-responsibility Components
React is very flexible and developers can create components based on their imagination, but when that flexibility gets out of hand, it starts to play against the engineering principles applied to code.
Before you release code, consider the functional needs you need to meet and break the problem down into multiple responsibilities.
Then, associate those functions with the responsible component. Each component should be wrapped in a single function and use its own methods to do its part.
Keep in mind that your component will be reusable in the future, so make it understandable, intuitive, and easy to evolve.
2. Identify similarities, rewrite code and be more concise
Don’t repeat code. As the code grows with new features, the programmer must constantly identify patterns that allow him to simplify instructions.
Algorithmic thinking and knowledge of the languages are important tools to avoid repeating your code.
3. Structure your folders neatly so that anyone can understand the project
Try to have all the files related to a component in the same folder, named in an understandable way according to its responsibility in the code.
Also, you need to think about your project being ready for any developer to understand the relationship of the components by looking at the folder structure and associating it with the project interface.
Thinking about Atomic design ( Design Systems: Atomic Design ) helps to structure the components in an orderly and hierarchical way.
4. Use React Hooks
The latest versions of React (starting with React 16.8 Hooks: 90% more concise code ) introduced the concept of React Hooks, which makes it easier to manage state within components in an organized way. They also help to design stateless, function-based components, which, being super efficient, can eventually replace the need for stateful, class-based components.
To optimize your code, remember to tell React to skip applying an effect (with the useEffect hook) if some value hasn’t changed. To do this, pass an array as the second argument to useEffect.
5. Locate the states, variables and functions according to the context
As a developer, you constantly have to think about questions like: Whose functional responsibility is it? What general component orchestrates the main states of the app? Is my code self-explanatory and accurate enough to know where each functionality is?
All of these questions are what help answer the context problems of variables, states, and methods.
6. Import what is necessary and name the components appropriately
The performance and maintainability of the code depend on the development decisions that are made from the beginning of the code design. Think of the minimum you need for the component to perform its function and only import what you use.
For the naming, keep in mind: camelCase when naming variables, objects or functions (e.g.: “const footerItems=[ ]”), PascalCase when naming constructors or classes (e.g.: “class FooterHome extends React.Component{ }”).
7. Constantly check and resolve console warnings
When you run your local React project, you will see warnings in the console at runtime as you develop your code.
These warnings do not prevent the application from continuing to run because they are not errors yet, but they reflect that your code is prone to future errors.
If they don’t go unnoticed by the developer and warnings are constantly addressed, you’ll have cleaner, more professional, more performant, and more maintainable code.
In software development, there are many ways to solve problems, but only a few encompass the solution to the need in context and overcome the barriers of time so that they continue to grow in the future.
You’ll grow as a developer all the time if you never stop pursuing the best way to do things.
