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...
For further actions, you may consider blocking this person and/or reporting abuse
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!
Yes, your observation is right, but using Typescript (not used in this article) can mitigate these "issues".
Thanks for your feedback.
Thank you for writing and sharing this article. I have a question though:
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?
While reading through your article, dependency injection kept coming to mind. Is it by any chance related to decoupling business logic from ui components?
You can write a simple reduce function for the hooks execution. Take a look to this: github.com/helloitsjoe/react-hooks...
tl,dr; yes, dependency injection is similar to higher-order functions :)
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!
If I use useState and useEffect inside
<Customer/>will it still be pure component ?Yes, if you managed only presentation logic :)
What if hook depend on an value from another hook ?
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
This article is about high order components HOC, the are different way to decoupling the logic like compound components, context API, etc..
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 :)
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
This method is only a way to separate logic from UI, don't optimize re-renders in the tree structure
Thank you for the article. How to do without the library react-hooks-compose library?
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...
"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.
You can use a simply reduce function for the serial esecution of the hooks
what theme is used in the preview?)
I've used ray.so to generate the preview :)
Nice article indeed. Some big problem using Typescript.