React 18's New State Hook You've Never Heard About
HTML-код
- Опубликовано: 28 июл 2024
- 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 RUclips yet.
I don't even the first part when you introducing the problem, I find it much cooler than the useSyncExternalStore
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.
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! 👍👍👍
Amazing Sir! Keep teaching us. We really need to learn from your experience.
Awesome tutorial. You explain everything really clearly and precise.
It just makes zustand look so good o_O Thanks so much for the video!
phenomenal explanation of stores in general, thanks !
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!!
Excellent breakdown! Thanks for making this!
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 :)
This is great! Was thinking about this the other day when I delved a bit into zustand
your explanation blew my mind. always on point!
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.
amazing video as always makes me fascinating while I was watching this kinda videos and enjoying the roller coaster rides.
High quality and succinct explanation!
Execellent video as always! Love your work and thanks for these insights!
This is a very important video for react devs to understand why and how these external libraries work
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!
Really good explaning of a senior. thank you
Dude thank you so much for all the content keep the content going👍👍
Thank you Jack , you are an amazing, Keep sharing its high quality content. God bless you Sir
Love the scene transitions
Real fresh and actual content. Thanks, interesting
Very clear and concise :D :D Your are big (Y)
Thanks very much Sir ,keep going
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.
Amazing content, congratulations!
I just wanna learn even more now- it looks so cool o.O
Awesome Jack, thanks.
Thanks for the share
Thanks for good quality content.
This is awesome, Jack!
Realy great content 🙌
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.
interesting. This is the first time I saw A store without wrapper around the components which are using it
really like these more advanced react content
Nice contents! Keep going :)
dope transition
the new intro graphic is fire :D
Great video! Thanks Jack 🙏🏽 my prayers always for your wife
Awsome content! Keep it up please
Thanks!
Simply Genius👏👏
nice info
You can use hooks inside the component's render?
The smell of quality came through all the way kitchen!
good stuff
I typed out a message on your discord yesterday, two weeks without uncle Jack is a bad time!
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.
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.)
@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.
Underrated RUclipsr!
@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.
Your voice is like a soothing balm
Can you make a video how you editor key bindings and how you move through code easily using keyboard.
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.
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.
which zsh theme do use and what config fonts u use
they are nice
man you are too good
Every nice!
May I know which auto-completion extensions you are using?
GitHub Copilot
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.
Nice Yamato poster
Thank you!
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.
Can I replace react-redux package with this hook? Practical usage is not clear for me.
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! ✨
if I may ask What terminal and shell and prompt is that?
Fig.
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.
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.
Can you help me on how to debug recoil state management implemented project
@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.
That thumbnail tho 😆
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.
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! 👍
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.
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.
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!
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!!
Great tutorial! Pls what extension are you using to for autocomplete
GitHub Copilot
@@jherr thanks Jack!
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
2:14 - 2:16 is this a shortcut to delete all children from html tag? or just some frames being edited out?
Editing.
yup
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.
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.
I hate RUclips for suggesting videos with thumbnails like this. And I hate RUclips 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, RUclips 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!!!!
so now this is how we will get a new 200+ state mangers, cool
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 - ruclips.net/video/MpdFj8MEuJA/видео.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.
can you please share the color theme & font?
Night Wolf [black] and JETBrains Mono.
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.
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
Love the content, any particular reason you dont use typescript in the videos? would prefer it over plain js
Depends on what I'm trying to explain and what the emphasis should be on. But yeah, I was debating whether or not to bring TS in here. Thankfully though a lot of this is inferred.
TS in a lot of cases is unnecessary obfuscation.
Personally I prefer it being in plain JavaScript. Typescript isn't relevant to the content being taught.
This video will be too complex with Typescript specially for beginners.
I think for explaining things is better just JS, for video projects like "Twitter Clone" I would prefer TS.
@@neociber24 🤔 hmm, I don't think this video is for beginners. Basically it is simplified explanation of how redux works internally. So if you wanna learn such stuff I think you should already know typescript. But that is just my opinion
What VS Code theme is this ?
Never seen it before.
Night Wolf [black] and the font is JETBrains Mono.