This New React Hook Breaks All The Rules And I Love It

I feel like this should have been called "useUse" hook

Awesomeness 🎉🎉🎉

I don't really see the value of "use" when it just replaces async/await??

They should name it useUse

I didn't quite follow the Context bit at the end... does this mean you could use the "use" hook in the context to fetch data, then share it across multiple components?

Support you sir 🎉

Svelte is where it's gonna at... but this hook does look cool nonetheless.

"This New React Hook Breaks All The Rules", sums up why many devs dread front-end development. JS allows (and often encourages) so much hacky code that it becomes a nightmare to maintain. Solutions to bugs/problems often involves hunting down yet another library or version update. I'm for constant-learning but this is madness.

Doesn't use+fetch.then cause infinite network requests? It's like the useEffect without deps footgun. You have to ensure the promise it stable across renders, and can use cache() for that, before handing it use()

Weird how we still end up class based component just for ErrorBoundary

I'll stick with react-query, but will keep an eye on this little hooky

Ur awesome man

I have created the exact use case for custom hook for fetching, they could have created a concept of utils rather than hooks.

Why? Isn't it possible to put useContext in a condition right now?

I wish I was as good as you, great content you got a new sub

If I use this, this is not the only thing confusing about JS anymore.

loved !!!!

This is not exactly the same though. The Error Boundary catches *any* error, not just a network error.

May i ask how the getderivedstatefromerror trigger if we are using react redux query?

This was mind blowing!!

My question is: HOW?
The reason why hooks can't be used inside `if` statements is that they're tracked in sequence. A branch condition (or an iteration) breaks the sequence.
This is important because hooks aren't named or tied to the component instance in any way, so React needs to keep a stack in order to perform the correct action.
But if you can put `use` inside an conditional it means that's not actually tracked. So what's the secret?

Did you do already a video on useSignal? Is it also in experimental?

You’re acting like it’s simpler but you’ve added twice as much boilerplate

Great video. Thanks for taking the time to make this. Very helpful.

... So, they're basically moving the boilerplate code up to the parents and making everything more "magical" (aka confusing)

I think, its time to say good bye to React.

hooks are in general shite... like really shite... i love vue so much, its incredible.. however at work I have to use react, I don't get it, vue is so over powered compared to react..

could you reduce the size of your avatar in the latter videos?

Maybe I'm missing something here but with the original technique the 'loading' and 'error' handling were all contained in the original component. Now, with Suspense and ErrorBoundary we have pulled this logic out of the original component into the host component. So, every time we use the revised component we have to repeat this logic or, more likely, wrap it inside another component which contains just the ErrorBoundary, Suspense and revised component. Is this really an improvement? Am I just not seeing the light?

Not sure I’m a fan of this, I’d have to have a play with some real use cases (excuse the pun), but initially it looks nasty wrapping components in another two components that don’t actually render anything.

Neat, but it's just parts of react-query's useQuery. And if use() doesn't at least do what useQuery already does, why would I use use()? use use use use use.

Let me get this straight, this now performs a fetch every time the component is rendered!?

Generally I don't like functional components sans for the most simple cases. I find class components much more easy to understand, much easier to see what is happening. I think calling them functional components is a misnomer. They are anything but adhering to functional principles with their magical global state. If you're component gets a little bit more complex such a huge function gets really confusing quickly.

React in itself is a boilerplate for corporate abstraction

Or.... you just extract your default fetch routine/Error handling/Loading component stuff inside a function/custom hook, you code it once, and you reuse it everywhere, and your error handling state is still local to your component. The error boundary thing seems like a nice fallback, but not a proper way to handle errors for specific requests. All these indirections kinda goes against the principles of a declarative react component IMO.

I like everything but the error handling part. So much easier to just catch the error then wrap ur components in some weird class

Using HOC for Suspense and ErrorBoundy sounds useful.

So its not only more rows. Its also multiple files for a single fetch. In this case I dont see it as a win. Its again overengineering. It would be better if the use hook worked without the suspense and boundary.... this is kinda meh. I mean suspense & boundary does have a place but its not as straight forward. And over using it just kinda makes your code more unreadable since you cant see everything at glance.

So we just move error handling and loading state to somewhere else. Not confusing at all.

It looks nice, but it feels like React is just reinventing JavaScript that you have to write with React syntax :P

Thank you for suspense and errorBoundary.

I have no idea how it works behind the scenes but being able to run hooks conditionally? Hell yeah. I hated having to create container components that conditionally rendered just to be able to conditionally run a hook. Or doing things like passing `skip: true` to the hook that fetches gql data.

its should be 'use' to 'useFull'

useSwr is better than this

the useEffect had the url in the dependency array so it won't keep fetching the data on every render, does use do the same?

React needs something like React.errorBoundary((props, error) => <div>{error ? error : props.children}</div>), so we can catch errors using function components

so the use hook is basically react-query with less features.

What about pass cors when fetch external data
Promise/await not help if the external server don’t have cors enabled
This is for internal works

Embrace yourselves for components full of nested and conditional use hooks. Good luck PR reviewers :D .. jokes aside this looks amazing, thanks for the video man.