8 ms·

UseHooks – A Collection of Server Component Safe React Hooks

179 points by benadam11 3y ago

1rtyuiop 3y ago
The landing page has 'useFetch' in the list but they're actually in the experimental branch. I personally think they should be removed from the landing page or somehow marked to let the users know they're only available at the experimental release.
tylermcginnis 3y ago
Hi everyone! You old heads may remember the original usehooks. It was built when hooks were first released in 2019. We just rebuilt it from scratch, added about 40 more hooks, made it compliant with Server Components, and launched it as a standalone lib. Hope you all enjoy!
- morley 3y ago
  Are all the hooks on the site made by ui.dev? It'd be great if each hook linked to the Github code for that hook, as the first thing I thought of was (a) what is the hook doing, and (b) is it easier to adapt my existing hook and reduce the number of dependencies I have to track?
  - benadam11 3y ago
    https://github.com/uidotdev/usehooks/blob/main/index.js https://github.com/uidotdev/usehooks/blob/main/index.js
  - tylermcginnis 3y ago
    Good feedback. Yes they're all up on Github – https://github.com/uidotdev/usehooks https://github.com/uidotdev/usehooks
    - psnehanshu 3y ago
      I haven't tried the package yet, but at first glance it is missing the .d.ts file. Is this package type safe?
    - jackdh 3y ago
      Left another main comment, however you may not see it, where is useLocalStorage implementation for example?
- tuukkah 3y ago
  I see "MIT" in package.json - could you add a proper license file to the repo?
  - tylermcginnis 3y ago
    Missed that. Thank you. https://github.com/uidotdev/usehooks/blob/main/LICENSE https://github.com/uidotdev/usehooks/blob/main/LICENSE
- benatkin 3y ago
  Was this inspired at all by VueUse? After the windicss/tailwind and Remix/Next.js scuffles it's become clear that it's good to get acknowledgement. Either way, I hope it's as well documented and well maintained as VueUse. That has been pretty sweet. I wanted something like it for React a few months ago and useHooks was the closest thing I found but not nearly as good. Hopefully this relaunch will be.
  - tylermcginnis 3y ago
    I've never heard of VueUse (though I'm sure it's great). The original useHooks was released in January of 2019.
    - benatkin 3y ago
      Yeah, I figured useHooks was created without knowing about VueUse, but thought the useHooks maintainer(s) might have become aware of it sense then. It makes sense, because though the code is heading in the direction of VueUse in terms of being maintained and well rounded, the structure of useHooks is quite a bit different. VueUse has the code alongside the Markdown: https://github.com/vueuse/vueuse/tree/main/packages/integrations/useFuse https://github.com/vueuse/vueuse/tree/main/packages/integrat...
ecuaflo 3y ago
I think it's great to have a repo of all the hooks, but I wonder if implementing each from scratch is the right approach. For example, there is an exceptional useDebounce package [0] that handles many more cases than the simplified one on UseHooks, and I think it could be even more useful to highlight exceptional work that has already been done and maintained in the community rather than in-housing everything. I also think there is more potential in that approach to further React as a whole as the community converges on agreed-upon utilities that become so integral to the way people write and discuss code they make it into the core library. [0] https://github.com/xnimorz/use-debounce https://github.com/xnimorz/use-debounce
- tylermcginnis 3y ago
  That's good feedback. Thank you.
- andix 3y ago
  I don’t want to pull in one package for every little piece of functionality. I prefer a package, that includes a bigger set of hooks that I can use. For example like date-fns for date/time.
  - debarshri 3y ago
    I agree with you. We will actually start playing around with use hooks. One package that has multiple utilities maintained by one entity is great. When you have multiple dependencies from multiple entities in your code, the surface area for supply chain attack is larger.
    - andix 3y ago
      It's not just about supply chain attacks. It's also about convenience and practicality. After a few months or years there will be some major dependency version updates to do, and often there is some manual work associated with that. Maybe reading changelogs and documentation, or checking if the package is still maintained and looking for alternatives. Doing that for 5 packages is reasonable, doing it for 20 or 30 packages is a liability.
ricardobeat 3y ago
How telling is it that a basic core function like useFetch has a warning that it “depends on React’s experimental useEffectEvent”? Almost a decade later and simple data fetching is still an unsolved “problem” in React land.
- ketzo 3y ago
  It’s not “unsolved” - it’s just mostly left to the massive number of third-party data-fetching solutions built on top of React.
- Vinnl 3y ago
  The problem of data fetching is basically the problem of caching, famously one of the two hardest problems in computer science.
  - shmde 3y ago
    Whats the other one ?
    - toddmatthews 3y ago
      naming things
    - whatsdoom 3y ago
      naming things and off-by-one errors
- toddmatthews 3y ago
  react is a rendering engine, not a framework; there is no opinionated way to fetch data. react-query is a delightful library that has made data fetching/cacheing a breeze for me - https://tanstack.com/query/v3/docs/react/overview https://tanstack.com/query/v3/docs/react/overview
  - flagrant_taco 3y ago
    This may very well change. I won't be surprised to see react have to become more opinionated about days fetching now that they are dancing between client and server with some form of an rpc. For performance and security I could see them pushing for all data loading to be done on the server, complete with helpers and server-only hooks for fetching and streaming data from the server.
paulgb 3y ago
Nicely done! Dumb question, but as someone who is aware of server components but hasn't used it, what makes a hook “server component safe”? I assume it doesn't necessarily mean that you can use it on the server (e.g. useMouse), but that if you use it it will not break server-side rendering or complain about a DOM diff?
- terandle 3y ago
  Not a dumb question. I think calling any hooks server component safe is going to mislead and add confusion to a lot of developers for this very new tech. Hooks are not allowed in server components. This library is SSR safe which has been a concern since before server components were ever a thing.
  - tylermcginnis 3y ago
    Yeah it's [poor phrasing](https://twitter.com/tylermcginnis/status/1663648010558132224 https://twitter.com/tylermcginnis/status/1663648010558132224) on our part. How it's being interpreted vs how I thought it would be interpreted are different. We'll update it.
    - technion 3y ago
      I don't blame you for this. The React team recently talking about "React Server Components" as though most React users are running it on NodeJS backends and introducing magic "use client" strings is putting everyone in a confused position and I don't think there's a good phrasing for you.
      - egeozcan 3y ago
        Something like "compatible for server-side rendering in non react server components" :) And people suggest juniors to start on the front-end because it's less complicated...
        5Qn8mNbc2FNCiVV 3y ago
sattoshi 3y ago
I don’t understand why this should be distributed as a package of many hooks. Unless if a hook is unusually complicated, I much rather copy-paste it into my code. You should really share the implementations of each of them on the website. I don’t want to pull in 100 hooks just because I don’t want to write 1 from scratch.
- tylermcginnis 3y ago
  Copy/pasting is fine. You do you. https://github.com/uidotdev/usehooks/blob/main/index.js https://github.com/uidotdev/usehooks/blob/main/index.js
  - sattoshi 3y ago
    I understand the source is available. I’m saying I would enjoy seeing the source on the website as I browse it. Much easier to search up on Google that way.
    - ipaddr 3y ago
      You realize that is a website you can browse. Having it on another domain doesn't make your search easier on google.
  - zdragnar 3y ago
    Actually, the repository has an MIT license. You can't copy/paste them without also including the license file.
- technion 3y ago
  I think that boat has sailed with javascript. I don't understand why leftpad is a module but much of the community disagrees with me on that.
- jackhsu 3y ago
  I like how TailwindUI does it. Provides nice examples/source code and easy to copy/paste
bottlepalm 3y ago
How do these compare with the current heavyweight library? https://github.com/streamich/react-use https://github.com/streamich/react-use
- tylermcginnis 3y ago
  From what I've been able to tell, that lib is unmaintained and one of the original authors left and created this – https://github.com/react-hookz/web https://github.com/react-hookz/web. A lot of older hook libs "break the rules" of React by doing some weird stuff like silencing useEffects deps array, reading refs in render, etc. We tried to avoid that so useHooks will be future proof.
stephen123 3y ago
Nice, thank you. It was only the other day I was copy and pasting from the old site. Looking forward to installing the lib and deleting some code.
- tylermcginnis 3y ago
  That old site was rough . Hopefully this one is a much better experience for you.
klysm 3y ago
I strongly dislike having to think about the color of functions while I’m programming. I want the type system to know
- bagol 3y ago
  Are you referring to this https://journal.stuffwithstuff.com/2015/02/01/what-color-is-your-function/ https://journal.stuffwithstuff.com/2015/02/01/what-color-is-...?
  - klysm 3y ago
    Yeah vaguely
jackdh 3y ago
I don't know if I'm being silly, but I'm trying to find the source behind useLocalStorage https://usehooks.com/uselocalstorage https://usehooks.com/uselocalstorage On their main website Nada, within the github, searching for it only turns up the docs implementation and not the actual source?
- runald 3y ago
  looks like it's in the experimental branch https://github.com/uidotdev/usehooks/blob/experimental/index.js#L792 https://github.com/uidotdev/usehooks/blob/experimental/index...
- kyelewis 3y ago
  It’s in the experimental branch - https://github.com/uidotdev/usehooks/blob/d7483140ee803826c30681506aa1b1dc339f1398/index.js#L792 https://github.com/uidotdev/usehooks/blob/d7483140ee803826c3...
nsonha 3y ago
I saw `useDebounce` and thought "what the hell does debounce have anything to do with react render cycle?". When I check the code, `useDebounce` does... I don't even know what it does, delayed set state? https://github.com/uidotdev/usehooks/blob/380e83fa267157832e9a312b8dd9847e0e6a0f65/index.js#L225 https://github.com/uidotdev/usehooks/blob/380e83fa267157832e...
- emi2k01 3y ago
  If you have state that changes too quickly (like the value of an input field), then you can use `useDebounce` to derive a state that only changes every `n` milliseconds.
barryonions 3y ago
Does this work with React-Native? Hard to tell from a quick scan

179 points by benadam11 3y ago

The landing page has 'useFetch' in the list but they're actually in the experimental branch. I personally think they should be removed from the landing page or somehow marked to let the users know they're only available at the experimental release.

tylermcginnis 3y ago

Hi everyone! You old heads may remember the original usehooks. It was built when hooks were first released in 2019. We just rebuilt it from scratch, added about 40 more hooks, made it compliant with Server Components, and launched it as a standalone lib. Hope you all enjoy!

morley 3y ago
Are all the hooks on the site made by ui.dev? It'd be great if each hook linked to the Github code for that hook, as the first thing I thought of was (a) what is the hook doing, and (b) is it easier to adapt my existing hook and reduce the number of dependencies I have to track?
- benadam11 3y ago
  https://github.com/uidotdev/usehooks/blob/main/index.js https://github.com/uidotdev/usehooks/blob/main/index.js
- tylermcginnis 3y ago
  Good feedback. Yes they're all up on Github – https://github.com/uidotdev/usehooks https://github.com/uidotdev/usehooks
  - psnehanshu 3y ago
    I haven't tried the package yet, but at first glance it is missing the .d.ts file. Is this package type safe?
  - jackdh 3y ago
    Left another main comment, however you may not see it, where is useLocalStorage implementation for example?
tuukkah 3y ago
I see "MIT" in package.json - could you add a proper license file to the repo?
- tylermcginnis 3y ago
  Missed that. Thank you. https://github.com/uidotdev/usehooks/blob/main/LICENSE https://github.com/uidotdev/usehooks/blob/main/LICENSE
benatkin 3y ago
Was this inspired at all by VueUse? After the windicss/tailwind and Remix/Next.js scuffles it's become clear that it's good to get acknowledgement. Either way, I hope it's as well documented and well maintained as VueUse. That has been pretty sweet. I wanted something like it for React a few months ago and useHooks was the closest thing I found but not nearly as good. Hopefully this relaunch will be.
- tylermcginnis 3y ago
  I've never heard of VueUse (though I'm sure it's great). The original useHooks was released in January of 2019.
  - benatkin 3y ago
    Yeah, I figured useHooks was created without knowing about VueUse, but thought the useHooks maintainer(s) might have become aware of it sense then. It makes sense, because though the code is heading in the direction of VueUse in terms of being maintained and well rounded, the structure of useHooks is quite a bit different. VueUse has the code alongside the Markdown: https://github.com/vueuse/vueuse/tree/main/packages/integrations/useFuse https://github.com/vueuse/vueuse/tree/main/packages/integrat...

ecuaflo 3y ago

I think it's great to have a repo of all the hooks, but I wonder if implementing each from scratch is the right approach. For example, there is an exceptional useDebounce package [0] that handles many more cases than the simplified one on UseHooks, and I think it could be even more useful to highlight exceptional work that has already been done and maintained in the community rather than in-housing everything. I also think there is more potential in that approach to further React as a whole as the community converges on agreed-upon utilities that become so integral to the way people write and discuss code they make it into the core library. [0] https://github.com/xnimorz/use-debounce https://github.com/xnimorz/use-debounce

tylermcginnis 3y ago
That's good feedback. Thank you.
andix 3y ago
I don’t want to pull in one package for every little piece of functionality. I prefer a package, that includes a bigger set of hooks that I can use. For example like date-fns for date/time.
- debarshri 3y ago
  I agree with you. We will actually start playing around with use hooks. One package that has multiple utilities maintained by one entity is great. When you have multiple dependencies from multiple entities in your code, the surface area for supply chain attack is larger.
  - andix 3y ago
    It's not just about supply chain attacks. It's also about convenience and practicality. After a few months or years there will be some major dependency version updates to do, and often there is some manual work associated with that. Maybe reading changelogs and documentation, or checking if the package is still maintained and looking for alternatives. Doing that for 5 packages is reasonable, doing it for 20 or 30 packages is a liability.

ricardobeat 3y ago

How telling is it that a basic core function like useFetch has a warning that it “depends on React’s experimental useEffectEvent”? Almost a decade later and simple data fetching is still an unsolved “problem” in React land.

ketzo 3y ago
It’s not “unsolved” - it’s just mostly left to the massive number of third-party data-fetching solutions built on top of React.
Vinnl 3y ago
The problem of data fetching is basically the problem of caching, famously one of the two hardest problems in computer science.
- shmde 3y ago
  Whats the other one ?
  - toddmatthews 3y ago
    naming things
  - whatsdoom 3y ago
    naming things and off-by-one errors
toddmatthews 3y ago
react is a rendering engine, not a framework; there is no opinionated way to fetch data. react-query is a delightful library that has made data fetching/cacheing a breeze for me - https://tanstack.com/query/v3/docs/react/overview https://tanstack.com/query/v3/docs/react/overview
- flagrant_taco 3y ago
  This may very well change. I won't be surprised to see react have to become more opinionated about days fetching now that they are dancing between client and server with some form of an rpc. For performance and security I could see them pushing for all data loading to be done on the server, complete with helpers and server-only hooks for fetching and streaming data from the server.

paulgb 3y ago

Nicely done! Dumb question, but as someone who is aware of server components but hasn't used it, what makes a hook “server component safe”? I assume it doesn't necessarily mean that you can use it on the server (e.g. useMouse), but that if you use it it will not break server-side rendering or complain about a DOM diff?

terandle 3y ago
Not a dumb question. I think calling any hooks server component safe is going to mislead and add confusion to a lot of developers for this very new tech. Hooks are not allowed in server components. This library is SSR safe which has been a concern since before server components were ever a thing.
- tylermcginnis 3y ago
  Yeah it's [poor phrasing](https://twitter.com/tylermcginnis/status/1663648010558132224 https://twitter.com/tylermcginnis/status/1663648010558132224) on our part. How it's being interpreted vs how I thought it would be interpreted are different. We'll update it.
  - technion 3y ago
    I don't blame you for this. The React team recently talking about "React Server Components" as though most React users are running it on NodeJS backends and introducing magic "use client" strings is putting everyone in a confused position and I don't think there's a good phrasing for you.
    - egeozcan 3y ago
      Something like "compatible for server-side rendering in non react server components" :) And people suggest juniors to start on the front-end because it's less complicated...
      - 5Qn8mNbc2FNCiVV 3y ago

sattoshi 3y ago

I don’t understand why this should be distributed as a package of many hooks. Unless if a hook is unusually complicated, I much rather copy-paste it into my code. You should really share the implementations of each of them on the website. I don’t want to pull in 100 hooks just because I don’t want to write 1 from scratch.

tylermcginnis 3y ago
Copy/pasting is fine. You do you. https://github.com/uidotdev/usehooks/blob/main/index.js https://github.com/uidotdev/usehooks/blob/main/index.js
- sattoshi 3y ago
  I understand the source is available. I’m saying I would enjoy seeing the source on the website as I browse it. Much easier to search up on Google that way.
  - ipaddr 3y ago
    You realize that is a website you can browse. Having it on another domain doesn't make your search easier on google.
- zdragnar 3y ago
  Actually, the repository has an MIT license. You can't copy/paste them without also including the license file.
technion 3y ago
I think that boat has sailed with javascript. I don't understand why leftpad is a module but much of the community disagrees with me on that.
jackhsu 3y ago
I like how TailwindUI does it. Provides nice examples/source code and easy to copy/paste

bottlepalm 3y ago

How do these compare with the current heavyweight library? https://github.com/streamich/react-use https://github.com/streamich/react-use

tylermcginnis 3y ago
From what I've been able to tell, that lib is unmaintained and one of the original authors left and created this – https://github.com/react-hookz/web https://github.com/react-hookz/web. A lot of older hook libs "break the rules" of React by doing some weird stuff like silencing useEffects deps array, reading refs in render, etc. We tried to avoid that so useHooks will be future proof.

stephen123 3y ago

Nice, thank you. It was only the other day I was copy and pasting from the old site. Looking forward to installing the lib and deleting some code.

tylermcginnis 3y ago
That old site was rough . Hopefully this one is a much better experience for you.

klysm 3y ago

I strongly dislike having to think about the color of functions while I’m programming. I want the type system to know

bagol 3y ago
Are you referring to this https://journal.stuffwithstuff.com/2015/02/01/what-color-is-your-function/ https://journal.stuffwithstuff.com/2015/02/01/what-color-is-...?
- klysm 3y ago
  Yeah vaguely

jackdh 3y ago

I don't know if I'm being silly, but I'm trying to find the source behind useLocalStorage https://usehooks.com/uselocalstorage https://usehooks.com/uselocalstorage On their main website Nada, within the github, searching for it only turns up the docs implementation and not the actual source?

runald 3y ago
looks like it's in the experimental branch https://github.com/uidotdev/usehooks/blob/experimental/index.js#L792 https://github.com/uidotdev/usehooks/blob/experimental/index...
kyelewis 3y ago
It’s in the experimental branch - https://github.com/uidotdev/usehooks/blob/d7483140ee803826c30681506aa1b1dc339f1398/index.js#L792 https://github.com/uidotdev/usehooks/blob/d7483140ee803826c3...

nsonha 3y ago

I saw `useDebounce` and thought "what the hell does debounce have anything to do with react render cycle?". When I check the code, `useDebounce` does... I don't even know what it does, delayed set state? https://github.com/uidotdev/usehooks/blob/380e83fa267157832e9a312b8dd9847e0e6a0f65/index.js#L225 https://github.com/uidotdev/usehooks/blob/380e83fa267157832e...

emi2k01 3y ago
If you have state that changes too quickly (like the value of an input field), then you can use `useDebounce` to derive a state that only changes every `n` milliseconds.

barryonions 3y ago

Does this work with React-Native? Hard to tell from a quick scan