React has become a very popular tool that is mandatory for web development. It is most often the first tool used to learn how to create pages/websites. A little later Many developers move on to other more interesting frameworks such as Svelte or Vue. But before moving on to something more, you need to learn more about React.
There are plenty of resources to explore this, literally thousands. You can choose between books, blogs, tutorials, and even a podcast 100% dedicated to React. You can even just go to YouTube and see a variety of videos. If you do not need to learn and you are just looking for specialists in this field, then we recommend contacting dedicated reactjs programmers.
React is evolving every year, so using its official documentation as the source of all information is the best idea.
But with newbies to web development, and even developers with over 4 years of experience, you might find that they somehow still have bad practices when writing their components or structuring their design patterns and hierarchies, not to mention their data flow.
It seems that learning React is very easy, the hardest part is when you need to structure a group of components or organize the logic of an archipelago of components that interact with each other. Therefore, it is worth studying in more detail a few basic practices.
React practices
Let’s move on to the most important information of the article, about the main practices that are often used during React development,
1. Create more custom hooks
Once you find that you have written the same logic for 2 components, create a custom hook.
This has countless benefits, among which is the creation of a reusable logic framework that becomes your ally in speeding up as a developer as you can use it across projects over time. It even evolves with you as you improve, and creating your custom hooks is a great way to become a reusable library creator.
2. UseState is always for local cases, not global ones
It’s as simple as it reads. UseState is for component use only. The global state must enter the component via props. Any changes to the global state should happen through callbacks/methods that are also provided by props or some tool that exposes them as Redux actions, leaving useStates for local copies.
It’s also worth saying that if your application needs a global state, you should take the time to use a tool to manage it. Currently, there are many options. From the most popular (Redux) to the simplest (Context), server-side rendering avoids this administration entirely.
3. Your CSS goes in the same JS
This point is very “self-confident”, that is, somewhat controversial. Remember that in the developing world there are always many ways to get a good result, some methods are more efficient and others are easier.
If your project grows, .css/.scss files will not be supported. It doesn’t matter how many good practices you have in your nomenclature. In the long run, no one is going to read those classes again to change, reuse, or update them. There is always a tendency to create new ones, replace them or rewrite them, even if there is already one that does the same thing. This is because CSS is very hard to read and even harder to understand, especially if you didn’t write it, and even worse if it’s indented (like sass or less), which causes your stylesheets to repeat the same thing over and over. . This adds a lot of extra weight that you don’t need in your application.
CSS in JS having styles in the same component is resilient, in addition to playing very well with the philosophy of isolating a component that has everything in the same domain/scope. React has already done this with JSX, so why not do it with CSS?
A similar alternative to this are libraries that allow you to use CSS without converting it to JavaScript and are also very popular and easy to use and have a huge community that loves them, like Tailwind and ChakraUI.
If you want the development process to be more efficient and smooth, then we recommend using our techniques to get a good result. If you want to get to know more about all the practices, then we recommend you to read https://fireart.studio/blog/react-best-practices/.
