React 18's New State Hook You've Never Heard About
Переглядів 87,464
День тому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:40 Creating The Client Side Rendering App
2:43 Creating A Simple State Manager
4:02 Connecting React To The State Manager
6:16 Syncing React With The Store
9:50 Adding Selector Support
12:19 Moving To UseSyncExternalStore
14:15 Supporting Server Side Rendering
21:24 Outroduction
#react #react18
@jherr Рік тому
Like this comment if you want to see a follow up video where I add TypeScript support with generics.
@sourishdutta9600 Рік тому
Please do.
@O_Eduardo Рік тому
That would be awesome!
@thecodecatalyst Рік тому
I hope you do it
@PhilipAlexanderHassialis Рік тому
"Yes please!"
@ytPEDROjoao Рік тому
I was thinking that I needed typescript to fully understand it, specially the selectors
@qodesmith520 Рік тому
This was amazing. What a succinct, detailed explanation of the new hook with SSR and client-only examples.
@nileshranjan3227 Рік тому
Amazing informational content, never seen such clear and detailed explanation on UKposts yet.
@PhilipAlexanderHassialis Рік тому
As usual, you demonstrate everything in a very clear and concise way which makes you really think on how the "bigger" libraries (a la RTK etc) are built and how they optimise everything around the reactivity between state and the UI. Excellent video as always! Keep 'em coming!
@adamzaczek6342 Рік тому
Hey Jack. I've been doing a lot of learning and teaching about local/global state + selector optimisations and you've done a much better job than anyone I've ever seen. Awesome video, I've shared it among developers in my company. Thanks!
@adamzaczek6342 Рік тому
Also, the new hook looks pretty neat. We're goinging to try it out.
@nimeshvaghasiya1663 Рік тому
@@adamzaczek6342 I'm using next js with .net core api, once user logged in we need User's settings data from api, so it needs to be called only once per login or hard refreshing any page, and should not call api on route change. Is there any workaround?
@JEsterCW Рік тому
Rodak w sekcji komentarzy, miło.
@herediadev Рік тому
Great video Jack! Impressively well explained! I liked the code and learning about this new hook! By the way two important design patterns there, the observer design pattern using the subscriber which adds the reactivity, that’s the purpose of the observer, react to changes and notify everything listening to, and the other one was the singleton design pattern when you needed the same initialState from the server and you added the if statement in the initialize function, very nice video! Awesome! 👍👍👍
@samyogdhital Рік тому
Amazing Sir! Keep teaching us. We really need to learn from your experience.
@MrJellekeulemans Рік тому
Awesome tutorial. You explain everything really clearly and precise.
@maximilianoInfinito Рік тому
Thankyou really clean example and clear description of what is happening. Thankyou so much!!
@suauhwang Рік тому
phenomenal explanation of stores in general, thanks !
@estebanmunchjones7946 Рік тому
thanks a lot Jack! you'r providing this masterclass for free! Highly appreciated 🙏 You have the best content on React of the entire web
@dezkareid Рік тому
This is funny because some days ago I was talking with my team about this hook XD, great job I'll share with them this video :)
@BasicallySteve23 Рік тому
Excellent breakdown! Thanks for making this!
@O_Eduardo Рік тому
That is EXACTLY what I was looking for. I made a store project pretty much closer than you did, and I was wondering myself if I was missing something and I didn't understand what syncexternalstore actually does. Thanks a lot.
@loquek Рік тому
It just makes zustand look so good o_O Thanks so much for the video!
@erikslorenz Рік тому
This is great! Was thinking about this the other day when I delved a bit into zustand
@gerrievanwyk Рік тому
Execellent video as always! Love your work and thanks for these insights!
@asadsalehumar1011 Рік тому
your explanation blew my mind. always on point!
@sahajranipa Рік тому
amazing video as always makes me fascinating while I was watching this kinda videos and enjoying the roller coaster rides.
@shafu_xyz Рік тому
High quality and succinct explanation!
@parkerAmv Рік тому
Really good explaning of a senior. thank you
@sominupadhyaya9026 Рік тому
Dude thank you so much for all the content keep the content going👍👍
@lancerdonnie Рік тому
This is a very important video for react devs to understand why and how these external libraries work
@hardikganatra2453 Рік тому
Thank you Jack , you are an amazing, Keep sharing its high quality content. God bless you Sir
@MaximSchoemaker Рік тому
Holy shit!! That demystified so many things for me about stores, subscriptions and selectors. Very empowering, cheers ^^ New React hook looks wickid too, very useful to know :) My heart goes out to your wife's recovery 💜 much love! - Maxim ✨
@jherr Рік тому
Thank you for the heartfelt thoughts. She is doing well, improving and will survive. So good news all around!
@Thorax232 Рік тому
The issue I have with stores outside the render engine is the lack of persistence. I feel like if you're doing anything within the same route, it should be context. For anything that really needs to be global, a useLocalStorage hook does the trick.
@leonidpyrlya9795 Рік тому
Love the scene transitions
@aysommer Рік тому
Real fresh and actual content. Thanks, interesting
@HiagoMM Рік тому
Amazing content, congratulations!
@ShaharHarshuv Рік тому
Custom hooks are awesome! Before watching this video I implemented a "useObservable" hook which is basically exactly what you showed but for RxJS's Observable. I guess I can refactor it to use useSyncExternalState.
@eghazaryan3335 Рік тому
Thanks very much Sir ,keep going
@elaymelis9724 Рік тому
Thanks for the share
@bythealphabet Рік тому
Awesome Jack, thanks.
@VoxyDev Рік тому
I don't even the first part when you introducing the problem, I find it much cooler than the useSyncExternalStore
@vitaliishuplat9930 Рік тому
Thanks for good quality content.
@abel090713 Рік тому
dope transition
@jr-hp7er Рік тому
This is awesome, Jack!
@afifu Рік тому
Realy great content 🙌
@mohitsurani6204 Рік тому
I just wanna learn even more now- it looks so cool o.O
@SkillTrailMalefiahs Рік тому
Very clear and concise :D :D Your are big (Y)
@robertogermanpuentesdiaz2500 Рік тому
Simply Genius👏👏
@federicomarazzani2649 Рік тому
Awsome content! Keep it up please
@juanmamani2110 Рік тому
Thanks for sharing! You always expose in a easy way to understand. Do you have online front end courses?
@jherr Рік тому
I have a playlist that takes you through both React and TypeScript on the channel. It's all free.
@sealuke2724 Рік тому
Nice contents! Keep going :)
@kingjulien1921 Рік тому
really like these more advanced react content
@Booyamakashi Рік тому
the new intro graphic is fire :D
@shlomomoller7440 Рік тому
Thanks!
@kleinforstkonig3696 Рік тому
nice info
@murhafal-msri5479 Рік тому
interesting. This is the first time I saw A store without wrapper around the components which are using it
@RishabhJain-uv7zj Рік тому
Can you make a video how you editor key bindings and how you move through code easily using keyboard.
@jongseoklee9477 Рік тому
This is such a great lecture! A question about selectors, but does the selector method mean memoization? It is likely that the amount of memory allocated to Set will increase as there is more data. dose reduce rendering and use memory?
@jherr Рік тому
The selectors in this case return numbers, so primitive types, and React checks to see if the new value does not match the old value for primitive types (same thing it does with useState and dependency arrays). I don't think there is any additional overhead here in comparison with other selector mechanisms. The set would be as large as the total number of components simultaneously watching that store. Depends on the app but a hundred of those would be on the way way high side.
@Smartercow Рік тому
Underrated UKpostsr!
@sprintwithcarlos Рік тому
Great video! Thanks Jack 🙏🏽 my prayers always for your wife
@oladayoayoola4590 Рік тому
Great tutorial! Pls what extension are you using to for autocomplete
@jherr Рік тому
GitHub Copilot
@oladayoayoola4590 Рік тому
@@jherr thanks Jack!
@EdygarOliveira Рік тому
Nice video, really good content. I’m just worried about the server part. Using a global state shouldn’t be the same as using a singleton, in the server it might even lead to crossing information from different requests. Also, the “serverInitialize” will run just for the first request as it was presented. My recommendation would be to bind the creation of the store to the request itself, to create a new store for each request, but on the client, initialize from the server.
@jherr Рік тому
You could do that. But, two things, Node is single threaded so you won't get simultaneously requests. And two, in NextJS, you could use the _app component or middleware to initialize the store between requests.
@EdygarOliveira Рік тому
@@jherr although node is single threaded, a async getServerSideProps is enough to intersperse requests. And yes, in next js that is a good solution.
@vpetryniak Рік тому
Hello, Jack. As always thank you for quality content. Can you tell me please why did you stop using pnpm for your projects? I liked it a lot and using pnpm in every project. And it is interesting to hear from you 🙂
@jherr Рік тому
Habit, or something... I think I just habitually return to yarn. Hahaha.
@mdhasanuzzaman1546 Рік тому
Every nice! May I know which auto-completion extensions you are using?
@jherr Рік тому
GitHub Copilot
@pawekoaczynski4505 Рік тому
good stuff
@ucretsiztakipci6612 Рік тому
The smell of quality came through all the way kitchen!
@mmmike3426 Рік тому
I typed out a message on your discord yesterday, two weeks without uncle Jack is a bad time!
@wateenafzal2963 Рік тому
which zsh theme do use and what config fonts u use they are nice
@Q99a Рік тому
Hi, thanks for useful content, in the RTK we still get re-render for dispatching same data, how can we stop the re-render ? I am checking the value before dispatching an action, is that right, or should I handle it inside of reducer ?
@jherr Рік тому
I'd compare the old data to the new data at the Redux level and not change out the reference to the data if the data hasn't changed. That should keep from tripping selectors that return sub-object objects or arrays. Also try, if you can, to have your selectors select all the way down to primitive types (i.e. numbers, strings or booleans.)
@exactzero Рік тому
You can use hooks inside the component's render?
@tapka2tapka Рік тому
Wow! Great job. Does it mean I should use this approach in a small projects to reduce bundle size?
@jherr Рік тому
IMHO it means that React now has even more options than Context + useState/useReducer/..., which is a good thing.
@ToshisanMotonaka Рік тому
It's awesome to see copilots recommendations and see you create the proper logic, it's very helpful in understanding that one shouldn't rely on copilot for the answers Also how do you get that neat stuff going on in your integrated vs code terminal?
@jherr Рік тому
That's Fig.
@ToshisanMotonaka Рік тому
@@jherr thank you! ✨
@PuranjayJain Рік тому
Can we use this for making a connection with the localstorage or the sessionstorage apis?
@jherr Рік тому
Sure.
@tl3119 Рік тому
mobx still have much less boilerplates to use as a store, I think I will just keep using mobx as my app's state manager. Anyway thx for your video!
@codex6634 Рік тому
Hey jack how you`re going ? do you planning any video about next js 12.3 related to nested route and layout rfc to load partially components/content like remix does ?
@jherr Рік тому
When it comes out, definitely.
@namanparashar3982 Рік тому
Awesome work! Your videos always have something which makes me love React even more!!
@TechJunkie Рік тому
@Jack Herrington how did you customize your zsh prompt ? can u share us the zsh prompt theme or code or config ?
@jherr Рік тому
At this point it’s just Fig. I was using oh-my-posh but since rebuilding my setup on a new Mac I haven’t gotten oh-my-posh going and I don’t really feel like I’m missing too much.
@tonienguix6503 Рік тому
man you are too good
@amarg26 Рік тому
@Jack Has react.js useeffect screwed due to double re rendering ? What is your opinion?
@jherr Рік тому
No, the adoption curve on React hasn't changed since 18. So I don't think it's screwed. I don't think the roll-out was great, certainly given the amount of "WTH is this!" going on. But honestly, it was right there in the docs.
@Cahnisama Рік тому
Nice Yamato poster
@jherr Рік тому
Thank you!
@nimeshvaghasiya1663 Рік тому
@JackHerrington Really like your videos, I have tried it with nextjs, it is initiating values on each page. I would like something that I can set store value on one page and get it on all other pages. lack of persistence among pages?
@jherr Рік тому
If you are doing navigation between pages in NextJS using Link, then it's SPA navigation and the state should be retained.
@nimeshvaghasiya1663 Рік тому
@@jherr Yes, I'm using Link. I'm using server side Higher Order Component over "getServerSideProps" on each page, inside each page's server props I'm using "const state = store.getState();" which first time get's empty on each route and second visit get the values.
@TheKluVerKamp Рік тому
@Jack, do you believe this new API is for state libraries creators primarily or for consumer ? I feel this is like a first step toward fixing the rehydration issue with react apps, right?
@jherr Рік тому
Maybe. I hadn't thought of it from that perspective. But yeah, if you can get all these disparate external state managers talking through the same architectural choke point then yeah, could be.
@rcarias78 Рік тому
What are the use cases for using this new hook? I ask because I saw that your rolled your own mini state management … would you need this if you used valtio or nano stores for example?
@jherr Рік тому
Nope, and you shouldn't DIY your own state manager unless you need to. The value of this is in understanding how your React app interfaces with its external store (if you have one) and that's important.
@rcarias78 Рік тому
@@jherr great. So no need to use it when using a third party state management Lib then. Keep the videos coming. I love your way of teaching. Any plans on doing some more content on SSR with react or partial hydration techniques
@unknownheartless3472 Рік тому
I don't quite get why on minute 12:05, adding the selector function fixed the rerendering of both components. Is subscribe not gonna call setState on both components regardless?
@jherr Рік тому
Yeah, ideally you select down to scalar values (strings, numbers, booleans) because those compare easily and will not force an update unless the value changes. Selecting down to arrays and objects is more problematic because they are compared by reference and depending on how you manage the store the reference may change even if the content inside the array or object doesn't change, and that would force an update when none is necessary.
@unknownheartless3472 Рік тому
@@jherr oh I completely forgot about the value compare for updates, thanks!!
@dualwan Рік тому
i love all of the topics. the problem comes when he starts to code. i think sir Jack should teach Advance React for us to understand most of the topic he is discussing.
@jherr Рік тому
I'll try to do a better job explaining as I go. But it would help to know specifically what you found hard to understand and what you would consider "advanced", because the definition of that varies widely.
@Brlitzkreig Рік тому
Your voice is like a soothing balm
@moch6459 Рік тому
To download soft soft is the download free or do you have to pay for it?
@mohitsurani6204 Рік тому
yup
@cool_scatter Рік тому
Great video, and awesome that you used Vite instead of CRA. I'm fully on the "ditch CRA" train now - Vite does everything it does but better.
@AveN7ers Рік тому
That thumbnail tho 😆
@Siddharthpandey27 Рік тому
Can you help me on how to debug recoil state management implemented project
@happygurha5062 Рік тому
Hey jack, do you think this will be good solution for global state management in real life application or there any downsides to this approch in scale
@jherr Рік тому
Scale is subjective. But unless you have some specific requirement for an odd state manager, or there are no React bindings for your state manager, then I'd use something off the shelf, probably Zustand.
@andreicojea Рік тому
Does useSyncExternalStore expect the subscribe function to return the unsubscribe function? I suppose so, otherwise it won't know how to cleanup.
@jherr Рік тому
Yes, the contract is the subscribe function returns an unsubscribe.
@andreicojea Рік тому
@@jherr nice, thank you! 👍
@danielschmid8530 Рік тому
I hate UKposts for suggesting videos with thumbnails like this. And I hate UKposts for making me not want to click a video because of said thumbnail. Especially when the video itself is nothing like the thumbnail but actually super valuable information. Loved every second of the video! I know this is just the YT algo kicking so this definitely isn't a ramble against you Jack. Unless you wanted to make this face on purpose for the thumbnail. :P I love your way of explaining stuff so I'd really love to know what you think about TypeScript/TSX for projects like this as opposed to JSX.
@jherr Рік тому
I dunno, UKposts is just reflecting us, and I click on thumbnails like this too, and sometimes the content is good, and... I wish that quality content just immediately did well. But this is just like anything else the cover sells the book, the thumbnail sells the Netflix movie, the title sells the show.... I'll be posting an update video with the TSX version next week. And it will have some fairly serious TypeScript generics in it.
@armanbulatovich7341 Рік тому
@@jherr we r waiting, thank u for information! This is great job!!!!
@andrewc8125 Рік тому
You have done many comparisons on Global State. How do you compare with other Global State Libs like Zustand or Jotai?
@jherr Рік тому
This new hook is basically an adapter between react and whatever state management model you want to run. What I implemented here was basically an atom. So it’s kind of a simple jotai or nanostate.
@andrewc8125 Рік тому
@@jherr thank you for sharing your amazing contents as always
@technikhil314 Рік тому
if I may ask What terminal and shell and prompt is that?
@jherr Рік тому
Fig.
@kkjoe2677 Рік тому
Just curious what are the use cases of creating a store object
@jherr Рік тому
I wouldn't do it. This video is about learning the internals of React so that you can understand better how these state managers work. I strongly recommend using an off the shelf state manager.
@killerdroid99 Рік тому
can you pls make a video on how to use subscriptions in tRPC?
@jherr Рік тому
You might be a winner on that one. tRPC is hot, hot, hot right now. ukposts.info/have/v-deo/jKWSmaiAfY5ipo0.html
@sergeyplotnikov5031 Рік тому
Can I replace react-redux package with this hook? Practical usage is not clear for me.
@greendsnow Рік тому
It's React 18 and Next 12... They still don't have a decent, boilerplate-free state management system. I use React only because of my TailwindUI purchase. I HATE it with all my heart.
@penna420 Рік тому
ever heard of useState, useReducer, useContext ?
@greendsnow Рік тому
@@penna420 ever heard of useEffect?
@penna420 Рік тому
@@greendsnow useEffect is not a state hook, it's a sync hook
@greendsnow Рік тому
@@penna420 Weren't you giving examples to suboptimal react hooks? Oh ok. Good luck with actions, dispatchers, wrappers and arrays...
@penna420 Рік тому
@@greendsnow You don't need actions, dispatchers or wrappers. I gave you examples of the bolerplate-free state mangament system built into react. And if you have problems with arrays you should take a step back to the basics of JS.
@toa7370 11 місяців тому
2:14 - 2:16 is this a shortcut to delete all children from html tag? or just some frames being edited out?
@jherr 11 місяців тому
Editing.
@brunoloverius5777 Рік тому
I fear I do not understand the idea behind this hook as well as everyone else. we could have created this store by creating a custom hook in which we could call usestate and adapt the code accordingly. store.getState would return the state and store.setState would use the setState function proided in the useState hook and it would trigger a rerender anyways... or am i missing something obvious? I am sorry if this question feels totally dumb, but could someone tell me what this method brings you over a classic useState? thanks, cheers :)
@jherr Рік тому
The advantage of externalized state management is that you can have subscribing components spread throughout the component tree, while maintaining efficient updates. The demonstration project here is too small to show the advantages of an external state manager versus a local useState. But it wasn't the intention of the video to prove that point, but instead to show a new mechanism for synchronizing external stores with a React App.
@brunoloverius5777 Рік тому
@@jherr I think I wached this video with the wrong mindset :) thanks for clarifying this for me!
@pb8655 Рік тому
I think I’m a bit slow, but I don't get how the selectors work. Once we add the React setState to the listeners, it should be invoked every time we call the store.setState, which would lead to a re-render. My best guess is that react doesn’t rerender because the value is the same however I imagine that’s not going to work for objects or anything that checks reference instead of value Any chance this repo is public / saved.
@jherr Рік тому
Yeah, you need to be careful with objects and arrays getting returned from selectors. If you return the reference stored within the data that's usually ok since the references don't change unless the data changes. But if your selector creates it's own object before returning it then you won't get any benefit from the selector since it will always fire since it's always a new object reference.
@glekner Рік тому
can you please share the color theme & font?
@jherr Рік тому
Night Wolf [black] and JETBrains Mono.
@borjangjorovski Рік тому
Just please let me know which theme and font you are using? Actually how about you drop the whole configuration? It is perfect.
@jherr Рік тому
Night Wolf [black] and JETBrains Mono.
@ryosukekureha4873 Рік тому
잭형님❤
@NightstalkerKK Рік тому
Im confused, you built a state manager without using any state manager (context, zustand)? Why am i using context or any other state manager to share state between components when i could just build the store you have shown in this video?
@jherr Рік тому
This is a new feature. But actually if you look at some of these state managers they are little more than this code wise, they just have more docs/testing/etc.
@NightstalkerKK Рік тому
@@jherr Ive been using what i learnt here for my state manager needs - ukposts.info/have/v-deo/haCVeqBvhHumq3U.html It just seems like what you've built here satisfies what i need 99% of my state manager to do (although with more complex data). (set a value in one component and read the latest value in another component) - I guess im finding it hard to understand "again" when i would use context api over this approach?
@jherr Рік тому
@@NightstalkerKK IMHO, I only use context for slow moving data (or data that doesn't move at all). For example, the theme data, or the currently logged in user and their JWT. Any time I'm ok with saying; "If this changes then the whole app should re-render" then I'll use a top level context provider. Does that help?
@NightstalkerKK Рік тому
@@jherr Ye it does thanks. Ive also been using context for auth and theme. But i also have another example where i use context api store. I use context api to wrap components that make up a feature e.g (users-store which wraps a users-page, users-page contains users-table, users-pagination, users-search components). The users-store is a context api store that holds the data about the current pagination values, the current search values etc, the context api store here makes sharing/displaying of the data easy.
Tips Workshop
Переглядів 21 млн
Суспільне Івано-Франківськ
Переглядів 638 тис.
Jack Herrington
Переглядів 21 тис.
MirMaxTV
Переглядів 13 тис.
MirMaxTV
Переглядів 13 тис.
Вадим Шегалов.Оккультные игры элиты
Переглядів 34 тис.
LED Screen Factory-EagerLED
Переглядів 7 млн