How to Write Unreusable React Components in 4 Easy Steps!
There are too many articles about how to write reusable React components. Why don’t we try something different? While reusable and clean components can speed up the development as a team, a genius developer like you can do everything alone and make the code only understandable by yourself. Yes, You can do it!
If the above is not crazy enough for you or even you agree with it, then this article is for YOU! Check out the 4 easy steps to write unreusable components from below:
1. Make It Huge
Don’t make it big, make it HUGE! It would be best if you can write the whole application in one single component, then there will be no need for it to be reusable.
Big components are unreusable because they are complex and specific. For a component to be reusable, it has to be general rather than specific to fit other parts of the code. Smaller components are easier to be written general than big ones as they usually are simpler and carry less logic.
If you ever wonder how small components can be, look at your favourite component libraries or Material-UI. The building blocks of great frontend applications are components as small as a button. They reflect a pattern that keeps repeating in the design. To find them out and make them into components ready to be reused is what other developers want to do, but not you! You love to violate the DRY principle and you are proud of it!
Avoid breaking down the huge components into small pieces at all costs!
2. Add (a lot of) Business Logics to It
What is better than a big component? A big component with a lot of business logic (and intertwined like spaghetti)! Clean coders like to keep everything small, so small that they do only one thing. Presentation is one thing and business logic is also one thing. While business logic might sound a bit too vague, let’s consider different states and API calls in your giant component.
Developers aimed to write reusable code will separate the presentational components from those whose sole purpose is to store and manipulate the data. They believe that a button with the ability to accept logic from its parents or wrappers can be used at more places than a button created only to call the API that you have hardcoded. They might be correct in some senses but you know from your deepest heart that being reusable makes development easier and thus less challenging for you!
Always crowd components with lots of states, API calls, data manipulating logics, anything you can think of!
3. Give It An Enigmatic Name
Have you ever looked into a variable name without having a clue what is it? That is the feeling I want you to remember and reproduce in your code! While other developers work very hard to give a name that is both descriptive and concise, you just don’t care! You know that “Data” is the best name for any variable and nothing sounds better than “Content” as a component name.
A magic name can make other developers stay away from a reusable component. No matter how well written the implementation is, if the name suggests it is written by someone who doesn’t care about communication, no adventurous developers would want to touch it and let alone use it.
So make the names only understandable to you and leave your team a puzzle to solve!
4. Hide It Somewhere In the Code
This is the step you don’t want to come to. If unfortunately, you failed with the above-mentioned, then the last step is to hide it somewhere deep in the code. You can save a presentational component in a file for saving hooks or interfaces. You can create a separate file for it but put it somewhere irrelevant as you put StyledButton.jsx in the folder saving redux slices. Just leave it messy!
A component can be reusable by itself but hard to be discovered and thus little developers realize its existence. Actually, it is not uncommon for two developers to build the same component with the same feature as no one knows about it. If you want to prevent code reuse, you should really make an effort to hide the components you created.
However, modern text editors can be your enemies. They allow other developers to trace the location of your component with a single click. But no worries, most developers are too busy to refactor your code. They will leave it there and let it rot.
There are many ways you can take to make a component unreusable. They are beginner-friendly and not difficult to learn. The spirit behind writing an unreusable component is not to care about others. Just be yourself! Write code that only you understand and only you will use!
P.S: Apply the four steps at your own risk…
