DEV Community

Cover image for React Advanced: Decoupling your components in the right way

React Advanced: Decoupling your components in the right way

Riccardo Tartaglia on September 24, 2023

Every developer's dream is to write less code and, if possible, make it all reusable. In React, this translates into knowing how to properly decou...
Collapse
 
starkraving profile image
Mike Ritchie

This creates a different type of dependency though, right? Each of the hooks have to return an object so that they can be destructured into a final composite object, which means you can’t have a hook that returns an array. And if two of the hooks have the same key then one will get overwritten. Still, it’s a very cool idea and I can see how useful it is. Thanks for the article!

Collapse
 
argonauta profile image
Riccardo Tartaglia

Yes, your observation is right, but using Typescript (not used in this article) can mitigate these "issues".

Thanks for your feedback.

Collapse
 
adeleke5140 profile image
Kehinde Adeleke

Thank you for writing and sharing this article. I have a question though:

  1. Do we need an external lib to compose hooks? In order to reduce bundle size and dependence on external components, can we do this ourself?

  2. While reading through your article, dependency injection kept coming to mind. Is it by any chance related to decoupling business logic from ui components?

Collapse
 
argonauta profile image
Riccardo Tartaglia
  1. You can write a simple reduce function for the hooks execution. Take a look to this: github.com/helloitsjoe/react-hooks...

  2. tl,dr; yes, dependency injection is similar to higher-order functions :)

Collapse
 
xaverb profile image
XaverB

One of the benefits of DI is decoupling. This is made possible by following “program to an interface, not imementation”. Moreover, we follow another good coding practice “dependency inversion principle”.

Great question!

Collapse
 
dvgy profile image
GAURAV YADAV • Edited

If I use useState and useEffect inside <Customer/> will it still be pure component ?

Collapse
 
argonauta profile image
Riccardo Tartaglia • Edited

Yes, if you managed only presentation logic :)

Collapse
 
nick__84343ca2422df81e0ca profile image
Nick

What if hook depend on an value from another hook ?

Collapse
 
argonauta profile image
Riccardo Tartaglia • Edited

Maybe you can compose this two hooks in a new one.

Hooks are "functions" to manage business logic in React, it's ok that one hook depends from one other, it's a problem if an hook depends from five others hooks

Collapse
 
eparrita profile image
Erick Parra

This article is about high order components HOC, the are different way to decoupling the logic like compound components, context API, etc..

Collapse
 
argonauta profile image
Riccardo Tartaglia

In reality it is the High Order Function pattern (HOC was based on the same pattern) applied to the hooks philosophy.

As you say there are many ways for decoupling your components :)

Collapse
 
cantillojo54982 profile image
Joiner

Glad to know about this.
Is this method considering the unneccessary re-render based on component tree structure?
I am not sure about this. Please let me know. Thanks

Collapse
 
argonauta profile image
Riccardo Tartaglia

This method is only a way to separate logic from UI, don't optimize re-renders in the tree structure

Collapse
 
filatovserhii profile image
Sergey Filatov

Thank you for the article. How to do without the library react-hooks-compose library?

Collapse
 
mflorida profile image
Mark M. Florida

The source is pretty short - it wouldn't be terrible to just grab that and integrate it into your project source.

github.com/helloitsjoe/react-hooks...

Collapse
 
teneko profile image
Teneko • Edited

"The source code is pretty short - it wouldn't be terrible to just grab that and integrate it into your project source [with respect to the license.]"*

Please please always look at the license and respect the effort people spent especially for Open Source projects licensed under MIT and similiar. It cannot be more demotivating providing open source code and reading someone writing "just grab the code". :s

And if there is no license, which is the case for react-hooks-compose, then you simply cannot and should not use the source code at all: opensource.stackexchange.com/a/1721.

Collapse
 
argonauta profile image
Riccardo Tartaglia

You can use a simply reduce function for the serial esecution of the hooks

Collapse
 
dreambit profile image
dreambit

what theme is used in the preview?)

Collapse
 
argonauta profile image
Riccardo Tartaglia

I've used ray.so to generate the preview :)

Collapse
 
lum3ll_96 profile image
Luca Mellano

Nice article indeed. Some big problem using Typescript.