No BS TS #23 - Typescript/React - Custom Hooks

Let's delve deeper into React to see how to build and type our own custom hooks.

00:00 Introduction
00:32 Cleanup
01:25 Creating useTodos
03:01 useCallback
04:52 Using useTodos
08:04 Outroduction

👉 What's my theme? Night Wolf [dark blue]
👉 What's that font? MonoLisa

💢 Watch our other videos:

Thank you for watching this video, click the "SUBSCRIBE" button to stay connected with this channel.

#typescript #NoBSTS #react

[mattmarkus]

Great video. @ 6:25 you add the AddToDo dependency, but why would a function change during the execution of the program? Just seems odd. Or is that simply to satisfy the es lint rule? Or am I misunderstanding a key concept. I understand a value changing but not a function that you write once and compile.

[kettenbach]

Another banger. 🙌 Let's do some testing. Testing custom hooks can be a bit challenging. Would love to see some strongly typed jest. 😀☝️

[cool_scatter]

could you have referenced Todo[text] and Todo[id] in useTodos instead of string and number, to make it a little more DRY? also could you have taken Todo[text][] instead of Todo[] as the default so the end user didn’t have to care about the id/done value?

[miklosnemeth]

Wow, great topic. While watching what you are doing, this is at least 30 years old topic: abstracting out chunks of random code into reusable manageable components. This was and still is the heart of object oriented programming with classes and encapsulation. Before hooks this kind of custom component was possible with classes in React too. Arent these hooks are just reinventing the wheel? Classes are well established standard in JavaScript/TypeScript, these hooks look cool and fancy but honestly totally weird to mimic something classes would be meant to be used. With hooks functional components are not stateless any more why not just simply using classes instead of this esoteric hook machinery?

[adigunolamide]

What is the difference between using a global state and writing your own custom hook and use as a global state?

[geneartista]

why is there a need to wrap every function with a usecallback sir, thank you

[jordan_.]

I know this isn't the main topic of this video but I'm struggling to understand how the "useTodos" "initialState" parameter is modifying the state of the actual todos? It doesn't have an action type and there is no instruction in the function that deals with this argument. The only clear way I can see to add todos is to use the dispatch function. Sorry, custom hooks just confuse me!

I just realised you set initialState as the "seed type" which seems like the dependency array of the useReducer. I'm still confused lol