Additional Hooks

[00:00:00]
>> I wanted to just briefly cover the other hooks that we're not gonna talk about today. One of them is useImperativeHandle. I used to cover this one, this is mostly for library authors. The example that I used to get for this is you have a huge form and you have validation on the form and you wanna highlight a input that has an error on it.

[00:00:26]
But how do you reach into a child's input and highlight their input inside of a child? You can kinda do this reverse API thing where a child can offer a method to the parent to call, that is what useImperativeHandle is for. It's basically for a child to expose functionality to a parent.

[00:00:45]
Very rare, and again, I have never used it, but if you're making a form validation library, that would be a valid reason to use useImperativeHandle. It's a really weird handshake, cuz you have to use a ref and then the parent uses a ref and passes into the child.

[00:01:02]
The child uses the ref to expose a function that exposes back to the parent, that's how it works. If you're more curious than that explanation, V7 covers this, so just hop into the V7 hooks and depth section, and I give you that example. But I've stopped covering it because I don't see people using it, and therefore I'm not gonna burden you much more than that.

[00:01:27]
UseDebugValue, this is I have a custom hook and I want to expose a debug value in the React Dev Tools. Again, mostly for libraries, not for individual people. But we had the useBreedList hook, if we wanted to expose what animal was passed in last, you could use a debug value that logs it out in the React Dev Tools.

[00:01:50]
So, again, mostly for library authors, not for app authors, but it is there if you need it. UseDeferredValue and useTransition, I'm just gonna not talk about these right now. Actually, I added a section that we go into these in depth. So for now, just know that that's coming.

[00:02:09]
useSyncExternalStore, this is exclusively for libraries. They say that no one in app world should be using this, but basically this allows things like Redux and MobX to create subscriptions internally to React. And then useInsertionEffect, this happens as opposed to layoutEffect, which happens after a component renders, useInsertionEffect happens before.

[00:02:32]
This is for CSS and JS libraries like styled-components and Emotion. Again, not for you, and I really can't fathom other than CSS, why you would wanna use it, but it is something that exists now. This is new to React 18. They actually say explicitly in the docs, if you're not doing CSS in JS, please don't use this.

[00:02:55]
So, that's why I'm telling you it exists, but ignore it. That is pretty definitively besides these two that we're about to talk to, deferredValue and Transition, all the hooks that you'll ever need to use that are the primitive ones to React. Everything else is just combining all those things together to get the functionality that you want.