React 18's New State Hook You've Never Heard About
2024 ж. 20 Мам.
87 543 Рет қаралды
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
Like this comment if you want to see a follow up video where I add TypeScript support with generics.
Please do.
That would be awesome!
I hope you do it
"Yes please!"
I was thinking that I needed typescript to fully understand it, specially the selectors
This was amazing. What a succinct, detailed explanation of the new hook with SSR and client-only examples.
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!
Amazing informational content, never seen such clear and detailed explanation on KZhead yet.
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! 👍👍👍
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!
Also, the new hook looks pretty neat. We're goinging to try it out.
@@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?
Rodak w sekcji komentarzy, miło.
Amazing Sir! Keep teaching us. We really need to learn from your experience.
Awesome tutorial. You explain everything really clearly and precise.
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 :)
phenomenal explanation of stores in general, thanks !
It just makes zustand look so good o_O Thanks so much for the video!
thanks a lot Jack! you'r providing this masterclass for free! Highly appreciated 🙏 You have the best content on React of the entire web
Thankyou really clean example and clear description of what is happening. Thankyou so much!!
your explanation blew my mind. always on point!
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.
Excellent breakdown! Thanks for making this!
This is a very important video for react devs to understand why and how these external libraries work
Execellent video as always! Love your work and thanks for these insights!
Really good explaning of a senior. thank you
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.
High quality and succinct explanation!
Thank you Jack , you are an amazing, Keep sharing its high quality content. God bless you Sir
This is great! Was thinking about this the other day when I delved a bit into zustand
Dude thank you so much for all the content keep the content going👍👍
amazing video as always makes me fascinating while I was watching this kinda videos and enjoying the roller coaster rides.
Amazing content, congratulations!
Real fresh and actual content. Thanks, interesting
Love the scene transitions
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.
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 ✨
Thank you for the heartfelt thoughts. She is doing well, improving and will survive. So good news all around!
Thanks very much Sir ,keep going
Thanks for the share
dope transition
Awesome Jack, thanks.
I don't even the first part when you introducing the problem, I find it much cooler than the useSyncExternalStore
This is awesome, Jack!
really like these more advanced react content
Simply Genius👏👏
which zsh theme do use and what config fonts u use they are nice
Awsome content! Keep it up please
Thanks for good quality content.
the new intro graphic is fire :D
Nice contents! Keep going :)
You can use hooks inside the component's render?
Realy great content 🙌
I just wanna learn even more now- it looks so cool o.O
Can you make a video how you editor key bindings and how you move through code easily using keyboard.
Thanks for sharing! You always expose in a easy way to understand. Do you have online front end courses?
I have a playlist that takes you through both React and TypeScript on the channel. It's all free.
Every nice! May I know which auto-completion extensions you are using?
GitHub Copilot
Very clear and concise :D :D Your are big (Y)
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 🙂
Habit, or something... I think I just habitually return to yarn. Hahaha.
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 ?
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.)
Thanks!
To download soft soft is the download free or do you have to pay for it?
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?
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.
@Jack Herrington how did you customize your zsh prompt ? can u share us the zsh prompt theme or code or config ?
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.
Awesome work! Your videos always have something which makes me love React even more!!
Can we use this for making a connection with the localstorage or the sessionstorage apis?
Sure.
Can I replace react-redux package with this hook? Practical usage is not clear for me.
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.
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.
@@jherr although node is single threaded, a async getServerSideProps is enough to intersperse requests. And yes, in next js that is a good solution.
@Jack Has react.js useeffect screwed due to double re rendering ? What is your opinion?
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.
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 ?
When it comes out, definitely.
@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?
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.
@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?
If you are doing navigation between pages in NextJS using Link, then it's SPA navigation and the state should be retained.
@@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.
nice info
Great tutorial! Pls what extension are you using to for autocomplete
GitHub Copilot
@@jherr thanks Jack!
Wow! Great job. Does it mean I should use this approach in a small projects to reduce bundle size?
IMHO it means that React now has even more options than Context + useState/useReducer/..., which is a good thing.
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?
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.
@@jherr oh I completely forgot about the value compare for updates, thanks!!
Can you help me on how to debug recoil state management implemented project
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?
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.
@@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
The smell of quality came through all the way kitchen!
good stuff
interesting. This is the first time I saw A store without wrapper around the components which are using it
I typed out a message on your discord yesterday, two weeks without uncle Jack is a bad time!
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?
That's Fig.
@@jherr thank you! ✨
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
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.
Great video! Thanks Jack 🙏🏽 my prayers always for your wife
I am struggling with Nextjs optimization for mobile. It's one of the famous company project and I can't figure out mobile optimization. Too much js in main thread.
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!
Underrated KZheadr!
if I may ask What terminal and shell and prompt is that?
Fig.
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 :)
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.
@@jherr I think I wached this video with the wrong mindset :) thanks for clarifying this for me!
2:14 - 2:16 is this a shortcut to delete all children from html tag? or just some frames being edited out?
Editing.
Does useSyncExternalStore expect the subscribe function to return the unsubscribe function? I suppose so, otherwise it won't know how to cleanup.
Yes, the contract is the subscribe function returns an unsubscribe.
@@jherr nice, thank you! 👍
That thumbnail tho 😆
yup
Just curious what are the use cases of creating a store object
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.
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.
ever heard of useState, useReducer, useContext ?
@@penna420 ever heard of useEffect?
@@greendsnow useEffect is not a state hook, it's a sync hook
@@penna420 Weren't you giving examples to suboptimal react hooks? Oh ok. Good luck with actions, dispatchers, wrappers and arrays...
@@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.
I've been coding for years now (self taught), but I never understood one thing from docs. When you show the react hook, there are random brackets in the args that the hook takes: hook(arg 1, arg2[, arg3]). Why is it written this way?
It indicates that the argument is optional. So variable3 is optional.
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.
Nice Yamato poster
Thank you!
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.
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.
man you are too good
What VS Code theme is this ? Never seen it before.
Night Wolf [black] and the font is JETBrains Mono.
I hate KZhead for suggesting videos with thumbnails like this. And I hate KZhead 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.
I dunno, KZhead 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.
@@jherr we r waiting, thank u for information! This is great job!!!!
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.
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.
You have done many comparisons on Global State. How do you compare with other Global State Libs like Zustand or Jotai?
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.
@@jherr thank you for sharing your amazing contents as always
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?
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.
@@jherr Ive been using what i learnt here for my state manager needs - kzhead.info/sun/gNSdds5whHerfXk/bejne.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?
@@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?
@@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.
I'm sorry but i dont know where, when and why we use it? Can yout explain it . Thanks!
At a practical level, use this hook if you are connecting to an external state store that does not provide a React hook.
Your voice is like a soothing balm