Almost a decade later and simple data fetching is still an unsolved “problem” in React land.
react-query is a delightful library that has made data fetching/cacheing a breeze for me - https://tanstack.com/query/v3/docs/react/overview
In fact, the toolbox this whole HN entry is about is a great example of how React is not just a rendering engine. It wouldn’t even be necessary otherwise. Peek at the code and what you’ll see is intense use of a DSL and built-in methods provided by React, to wrap native APIs that are otherwise usable without any wrappers.
I’m also a happy user of react-query, but it uses the same underlying hooks which are a moving target.
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.
The only thing it telegraphs is that the ui.dev people built an http client hook (with opinionated features like caching) that uses cutting edge features to do things that people are already doing in React without experimental features.
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!
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.
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?
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.
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?
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?
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.
https://github.com/uidotdev/usehooks/blob/380e83fa267157832e...