DEV Community 👩‍💻👨‍💻

Cover image for React Just Got Even More Awesome
Dayvster 🌊
Dayvster 🌊

Posted on • Originally published at dayvster.com

React Just Got Even More Awesome

If you've worked on any react or next.js application in the past, you've probably noticed that it's very unopinionated in general, especially when it comes to how you handle async. Which played a big role in how we've fetched data in our react applications. So far we've either used useEffect, useSWR or more recently react-query. But now we're getting an exciting new feature in react that will make all things async especially data fetching a lot easier.

Introducing the use hook

More info here

Essentially, we're finally getting a native way to handle async functionallity in React. Meaning we don't really need to relly on useEffect to fetch our data we can simple create an axios fetch request and wrap it in a use hook.

For example:

export const Post = (id:string) => {
  const fetchPost = axios.get(`/api/posts/${id}`));
  const post = use(fetchPost);
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

This will fetch the post data and render it on the page. No useEffect required or any other async handling library required. 🎉

How does the use hook work

Similary to await it simply unwraps the value of a promise, meaning that any async behaviour can be wrapped in a use hook now and react will natively handle the promise for us.

Do we still need react-query then?

Yes, we do. While the use hook is a great addition to react, it's still not a replacement for react-query. The use hook is only meant to handle async behaviour, not caching or any other advanced features. So if you're looking for a more advanced data fetching library, react-query is still the way to go. However it's a step in the right direction for the react team and a welcome addition to the react ecosystem. I can't wait to see what the community does with this new feature. 🤩

Other interesting stuff of note

Unlike all other hooks the use hook appears to support conditional execution. Much like react-query's enabled option. This means that we can conditionally fetch data based on some condition. This is of course not supported by other hooks and it appears that the use hook is the only hook will support this. A cool future proposal in the RFC is that we can wrap React Context in a use hook as well. Which would allow us to use context in a more declarative way. Not sure if this will make it into the final RFC but it's an interesting idea.

Conclusion

This is by far one of the coolest upcoming features in react. I personally can not wait to use it in my next project. I'm sure we'll see a lot of interesting use cases for this new hook. If you're interested in learning more about the use hook, I highly recommend you check out the RFC. It's a very interesting read and it's a great insight into how the react team thinks about new features.

Top comments (21)

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

Also do I need this if I enable top-level awaits in webpack? Cuz I do that now that all major browsers support this.

Collapse
 
dayvster profile image
Dayvster 🌊

Top level await is awesome for sure, but as far as I know all it allows you to do is use await without wrapping it in an async function, which comes with it's own set of problems: gist.github.com/Rich-Harris/0b6f31...
outlined nicely by Rich Harris here, would recommend giving it a read it's fantastically explained.

essentially the TL;DR version of it is that if you use top level await you're essentially blocking all modules who depend on the resolution of that top level await. Which is not great. the use hook will not block anything,

But good question Jose 👍

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

Hey, thanks for the response. It turns out that the gist had an edition in February 2019 that basically states that his concerns are no longer valid since a variation B took over the previous specification. This variation B no longer blocks siblings and therefore top-level await ended up being good and nice.

Thread Thread
 
dayvster profile image
Dayvster 🌊

That is correct there was a whole V8 response to his concerns as well here: v8.dev/features/top-level-await

Was not aware they addressed his concerns since the first time I've read about it. Thanks for the clarification Jose :)

Now the only concern I have left is how supported this feature is in tools such as rollup or vite.

Thread Thread
 
webjose profile image
José Pablo Ramírez Vargas

Don't know much about those as I am primarily a .Net backend developer. I just know enough of ReactJS to keep my team aligned whenever they go nuts and start coding like crazies.

I can say, though, that top-level await seems to work nicely in ReactJS. I made for my team the wj-config package to end some configuration madness they had. Version 2 requires top-level await. So far so good.

Collapse
 
jackjones profile image
Jack Jones

When’s this coming?

Collapse
 
dayvster profile image
Dayvster 🌊

There's currently an open PR for this in react/rfcs so could be 3 days could be soon TM. Hopefully sooner than alter.

I personally hope that it's sooner rather than later.

Collapse
 
hacksore profile image
Sean Boult

yes

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

So a Suspense without UI fallback. Am I right?

Collapse
 
keithmcbrief profile image
Yuri Jew

You missed such a cool chance for a pun in your conclusion!!

Collapse
 
dayvster profile image
Dayvster 🌊

Do tell!

Collapse
 
lveillard profile image
lveillard

Would be interesting to see if we could use this to create use() versions of hooks, like apollo's useQuery, that would be easier to use conditionally.

Collapse
 
dayvster profile image
Dayvster 🌊

Basically yes.
But also I'm not so sure I'd recommend doing a custom implementation of a hook that a library already provides. Usually the stuff a library provides you is made to work with the rest of their stuff.

Collapse
 
marek profile image
Marek Zaluski • Edited on

It's an interesting addition to hook functionality, but the thing that stands out to me is the fact that this is a hook that is allowed to be called conditionally.

Hooks are normally known for not being intended to be called conditionally. The use hook introduces an exception.

Now, the RFC talks about this, and it makes a point that this is fine, because it's only going to be the one single exception, and that rather than having to remember a bunch of arbitrary exceptions, we just need to remember this single one.

I think that this nevertheless still introduces a confusing piece of knowledge that you have to remember about hooks and about the special behavior of this proposed hook.

As we pile on more and more of this kind of complexity on top of hooks, and more magical behavior, it makes me wonder: are hooks the wrong direction? Were they a mistake for React?

Collapse
 
danielpklimuntowski profile image
Daniel Klimuntowski

I really enjoyed your verbose and well-styled comment 😌

Collapse
 
rakinar2 profile image
Ar Rakin

Awesome!

Collapse
 
albertyao profile image
AlbertY

I'm personally more of a Nuxt user, but thanks for your share.

Collapse
 
amodeusr profile image
Ricardo Magalhães

In which version of React is it coming out?

Collapse
 
ranjanrnj44 profile image
ranjanrnj44

This is cool, how about using Suspense with promise wrapper?

Collapse
 
rakesh_patel profile image
Rakesh Patel

Is use hook execute on every render? Unlike useEffect hook we can decide when request will be called out

Rust language vs others

Stop by this week's meme thread!