From 2 weeks ago, I was searching in an open source project to do my first open source contribution ever. And as I checked the app.jsx file, I felt like there was something wrong, this file was a little bit bigger than it should be for that size of project. I scrolled down and saw...... function for array shuffling. hmmmmm. what about making it a utility to decrease the code lines, and improve the maintainability of the file. and that is what brought this blog post to here.

Note: it hasn't been reviewed yet, but I will complete that post now

What Are The Helpers & Utilities?

basically, helper or utility is a piece of logic that performs a specific operation in different parts of the program. Although it is a little bit an opinion-based thing, but:

utility

is (a piece of logic that performs a specific operation in different parts of the program) but it has more generic purposes like it is not about a specific part of the program, so if I want to take that utility somewhere else, that will not change the the output. for example, array shuffling function. If I want to copy this function and paste it in even another application it should not be a problem at all.

helper

is (a piece of logic that performs a specific operation in different parts of the program) but it is more focused in the application you create. It is usually created to serve a specific part of the application, a specific component. for example, I created a function that should add a new note in a book object whenever some button is clicked. this function receives 3 parameters (the object that contains the notes, and the new note).

so this question is for you: if I copy that function and paste it to another application, will it work as a utility? ..... yes, if you added the proper 2 arguments it will perform that operation, but the function is about a specific feature I needed in my app, it doesn't return a shuffled array whenever you add array to it, but it performs some functionality whenever you provide the same case that it has been created for. It doesn't make its work wherever you put, but you can still use it in different application with the same feature.

although that long talk about them, but it is still something can change from environment to another.

Okay, let's take a deep breath and go for the next headline

How To Use Them Consciously

okay, to make the most out of these options, we have 3 steps.

1 - create a function in your component to perform what you need using the component/file data

2 - check what is the data you use in it(variables, elements, any kind of data you use in the function) and make that data as parameters for that function

3 - move this function into utilities/helpers folder

and here you go, export it, and import it wherever you need and give it the data that you used before moving it

Conclusion

Again, although that the difference between utilities and helpers is not a clear rule, but just the general idea of it is useful to use in your application to improve code readability, maintainability, and DRY(Don't Repeat Yourself).

This the end of this article, let's get back to work