React just announced a new feature: Hooks. It's a brand new set of APIs that enables powerful new ways to share stateful logic between components, ...
For further actions, you may consider blocking this person and/or reporting abuse
So adding class lifecycle events to functional components? Why not just use a class?
The beauty of the functional components is that immediately you know there's ZERO state in here. It's just rendering markup based on input.
Now there's more to look out for given this
hookthing. I don't like it.Immediate explorations I've seen have dramatically cut the number of lines for implementation. One example I saw cut 130 lines down to 15. These APIs also enable new behaviors not achievable with classes (extracting reusable stateful logic), as well as letting you consolidate related logic so it's not all intermingled with unrelated functionality.
To be honest you can extract reusable state logic by using abstract classes for example but rather for some small logic and I wouldn't go too far with that because it can quickly end up with ugly non-readable composition.
Also, I hate classes because you can quickly end up with a mess (lots of unrelated things in componentDidMount, componentWillUnmount, having the same state in multiple classes etc). Hooks are a really great improvement (for readability and composition).
Inheriting from a custom class is considered an antipattern in React, so while it works on a technical level I wouldn't say it's a viable option. All the downsides of mixins without any benefits over other ways of composing functionality.
Hooks are a beauty alternative to renderprops or hoc. Reusing logic without JSX in the middle. Of course they don't reinvent another lifecycle and they reuse the existent one.
Components are now more atomic, with a separation of concerns.
At the beginning I didn't like so much until I realized that is possible to generate a custom hooks. IMO here is where is all the power.
I do agree here for
useState. I can see some of the other hooks being very useful though. EspeciallyuseEffectanduseCallback...Agreed, I never felt a need for this.
This is genuinely such a great step for React
How can everyone write about hooks without a word about testing them? Not just this author -- even the Facebook documentation says nothing about testing them.
Shouldn't every code example START with a test before a line of application code is even written? If tests are an afterthought or left out completely in the tutorials, how do you think the average developer will treat them? Maybe as an afterthought or left out completely?
Maybe you could take the lead on this?
Hooks are an implementation detail, if used within a component. I specifically try to write UI tests that manipulate the DOM and verify that callbacks were called correctly (what I view as the inputs and outputs of a UI--
react-testing-libraryis excellent for this), so whether I use hooks or something else the tests would be the same. Indeed, I'd consider it a faulty test if I had to dramatically change my strategy by adding hooks.As for writing tests for custom hooks, that is definitely new and valuable, but seems beyond the scope of an API overview. If you'd like to try it out and write up your experience with it, I'm sure it would be valuable.
So would you disagree with this example:
medium.com/@MimiLiou77/testing-rea...
(Only one I've found.)
There is actually very little on best practices unless one goes off and takes something like the frontend masters courses. Personally, I think tests should always be discussed, even if to say what you've said above.
So you don't use mocks to mock out the implementation?
Mocking modules makes tests more fragile, I try to mock as little as is feasible when testing. Ideally I'd only use mocks for functions that I pass in, and I'd use those more as "spies" to make sure they're called correctly.
That seems like a solid testing example of a custom hook, as a unit test.
I'm only mocking my own functions. I never mock libraries. I figure they should work fine.
I will give this some thought. Thanks for the responses.
Thank you for the comprehensive coverage in an easily digestible format there, Carl.
I am unable to find
useAPIin the Hook API Reference.Was it discussed only at React Conf?
Oops, corrected!
Hi Carl, good article. I have been using react hooks to build a predictable state container which reimplements redux's api and concepts. I am trying to get feedbacks on it. would you take a look at github.com/iusehooks/redhooks ? Thanks
Thanks for the article, very well written!
Just a small note - in the
useMemoexample, I think you meant to passtransformedDatato theTablecomponent and not the originaldata.Oh, just the article I was looking for. I felt so out of the loop when I opened Twitter today. 🙈