Check out React 18's useExternalStore hook with TypeScript and generics
2024 ж. 20 Мам.
21 693 Рет қаралды
Code: github.com/jherr/syncexternal...
👉 Practical Module Federation Book: module-federation.myshopify.c...
👉 No BS TS (The Book): no-bs-ts.myshopify.com/
👉 I'm a host on the React Round-Up podcast: devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
👉 VS Code theme and font? Night Wolf [black] and JETBrains Mono
0:00 Introduction
1:00 Project Recap
9:02 Typescript Setup
11:24 Converting The Store
13:24 Converting The Components
15:40 Removing Context
18:55 Moving useStore to the Store
21:19 Typescript Generics 101
26:30 Making useStore Generic
27:11 Making The Whole Store Generic
28:33 Deriving The Store Type
29:15 Outroduction
#react18 #useExternalStore
You're making a big difference in many people's lives by providing this valuable content at no cost. Thank you, truly.
Thanks! I'm definitely starting to feel that. It's an honor.
indeed, I only recently start consuming this amazing content. And unlike other web related content out there, the takeaway here is just informational/facts that can be found in the docs, it actually teach you how to think and reason and why.
Thank you Jack for producing such an amazing quality content. I'm positive your teachings alone will kick-start the careers of many new developers. Perfect narration. Explanations are on point. Every sentence gives the right information, so we the mortals can chew on and be able to follow through. So glad i found your channel. Its pure gold!
Pure gold. You are making TS so approachable...
Thank you for making this. I've been waiting for the tutorials to just start doing everything in TypeScript - that's what we all are writing anyway.
Thanks Man, I really appreciate your efforts to make these conceptual video and other analysis videos.
Learning so much from your channel, thank you Jack Herrington!! 🙌 Absolutely love Typescript 🥳
Thank you very much Sir for such a golden content. Really appreciate the work you're doing! I feel motivated by watching your videos.
Great breakdown of generic types!
Thanks for this awesome tutorial
Thanks for another great video! Learn and have fun with Jack
My first comment on the tech channel! I'm also a big fan of React and TypeScript.Though I've seen a lot of your videos from when the channel has very few views It's the first time I commented! Always awesome content gives me and everyone tons of value without any cost. The view is incrementing quickly. I'm not surprised because you desired it, Sir!
I love Typescript! Redux on NodeJS does not come with useSelector because it's a React thing, so I made my own and it works soooo good. No more fighting to get data in a background task that doesn't originate from a request. I don't care how much people hate on redux, I love it, I'll happily take the hit of boilerplating because it JUST works 😁
Another banger. Thanks Jack!
Such a nice Content to mid-senior level engineers 😁 totally worth it🔥
thank you ❤
Grand master 🔥🖤
No I have no better way to expain it especially the Generics. It's a good idea to start from JS and convert to TS. It'll help both in understanding it better and appreciating the reliablility of code after adding TypeScript. And ... ... I love those utility types :)
I agree, always GET IT WORKING first, then worry about the types.
Thank You very much for this info-tutorial. One request, using an external json object used as value in multi-step multi page form.
Love to get pinned from you sir! Definitely recommend my colleagues about this channel lately!
LOVELY!!! Great to see doing things in Typescript. Question: when importing the 'type', do we have to do `import { type ValueStore } from ...`? Can't we directly do `import { ValueStore } from ...`?
You can. Adding the type is slightly more explicit. Totally optional though.
Great, thanks for the reply. Hoping to see more Typescript videos 🙂
@@jherr Don't you need the import with type since you export using type: export type ValueStore = ... ?
Please give a video of nx nestjs and nextjs app deployed on vercel .its help for us.
How did you do this cool text highlighting in beginning? Is it a VS code plugin that can do this? 🙂
There is none. That's custom code I made for the videos that does that work. And it's not in VS Code.
@@jherr understood. Looks very cool! Thanks for putting all this effort in. 👍
@@TypeScriptTV thanks. i need to make the workflow easier. i think the result it pretty good and makes complex code paths a little easier to understand.
Can you please do a video on Qwik Js?
Can you create a tutorial series about developing a small web framework from scratch with Vite(something like Astro)
note to self: utility type -> deriving a type -> ReturnType . Oof!
Man can u react basic to advanced tutorial ,your all content so much advanced level
Pls where can I find it?
kzhead.info/channel/PLNqp92_EXZBJ4CBroxVBJEpAXoz1g-naZ.html
{Sigh}, and I used to think "x = x + 1" would do it, for a counter on a web page ;(
thanks, you forgot to upload code to git
Whoops. Fixed. Thanks for the heads up.
First viewer 🎉
I know.. that background its fake :)
This react shit going into infinity unnecessary! You need one year of time to just try every React Hook. If React continue to develop bullshit, will became as Angular. Every framework will die when developers cant keep track of it! This is easy solvable in plain react using context, but, look, another hook! I code in React almost 5 years, and this really starts to bothering me!
They did not remove useContext, you can still do your way. That's just easier and more optimized.
have you given up yet, I only use react because of Shopify framework called Polaris, but it got so restrictive lately, that I'm starting to think to rewrite everything in Svelte.