4 simple ways to start achieving DRY in React

The DRY definition

The DRY principle is a simple concept, stands for "DON'T REPEAT YOURSELF". This concept has aims simplify the development with reusing block of codes throughout your application.

Advantages

Make it easier to maintain. By reusing functions, it is less difficult to change the logic. We only need to make changes in one place, and the entire application will update accordiling.

Make it easier to read. The codebase will be less redundancy, so the reading is more fluid.

However, be sure the functions and abstractions will facilite your life. Functions and abstractions that not can be reusing will be a shot in your foot (as we said in Brazil, when you do something that is harmful to yourself).

The opposite of DRY

The opposite of DRY is WET, right ? So, WET can standfor "We Enjoy Typing", "Write Every Time" or "Waste Everyone’s Time". When rewrite the same things in different modules, we are not reusing anything, only copying and pasting the same logic.

Therefore, the code will be a mess. The difficulty of reading the code increases, maintenance becomes much harder. Imagine if the logic need to change, you would need to rewriter in throughout the intire codebase because you did not follow de DRY principle.

So, you need to stay DRY, not WET.

4 simple ways to start achieving DRY in React

Start with the obvius, make Components

Components are the core of React. Components are designed for reuse in your application. A good component can be reuse a cross your basecode, facilitating maintenance and the readbility.

Again, make sure that your component can be reused, otherwise,your application will several similar components that cannot be reused.

Custom hooks

Instead of repeating the same hook in all your new components, create a custom hook and optimize your time! I Here you get an ideia of how create a custom hook. Check it out.

Helpers functions

Helpers functions are a way to reuse common tasks that arise in a development. For exemple, maybe you need a function that transforms a date format. It is a common task that any developer mighty need use. So, create a function and export for all can use.

Styling Components

Styling with ".css" is a simple way to duplicate a lot of styling logic throughout your codebase, for exemple. So, we have many ways to reduce duplication. One of these is to use styling libraries, such as Tailwind CSS, and create a proper theme to decrease CSS logic redundancy.

Conclusion

The DRY principle is a simple concept, but it is not always easy to apply in real life. Normally, an application has many developers, so we need clear rules that everyone can follow to create an ecosystem that is easier to maintain. So, what do yout think about DRY ?

Comments and tips are welcome. See you soon.