React 18's New State Hook You've Never Heard About

[@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.

[@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.

[@VoxyDev]

I don't even the first part when you introducing the problem, I find it much cooler than the useSyncExternalStore

[@lancerdonnie]

This is a very important video for react devs to understand why and how these external libraries work

[@loquek]

It just makes zustand look so good o_O Thanks so much for the video!

[@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.

[@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! 👍👍👍

[@nileshranjan3227]

Amazing informational content, never seen such clear and detailed explanation on KZbin yet.

[@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.

[@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 :)

[@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

[@samyogdhital]

Amazing Sir! Keep teaching us. We really need to learn from your experience.

[@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.

[@asadsalehumar1011]

your explanation blew my mind. always on point!

[@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!!

[@sahajranipa]

amazing video as always makes me fascinating while I was watching this kinda videos and enjoying the roller coaster rides.

[@suauhwang]

phenomenal explanation of stores in general, thanks !

[@guiiimkt]

Please disable copilot during tutorials/code-along. It's very distracting

[@shafu_xyz]

High quality and succinct explanation!

[@parkerAmv]

Really good explaning of a senior. thank you

[@erikslorenz]

This is great! Was thinking about this the other day when I delved a bit into zustand

[@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.

[@mdhasanuzzaman1546]

Every nice! May I know which auto-completion extensions you are using?

[@jherr]

GitHub Copilot

[@ucretsiztakipci6612]

The smell of quality came through all the way kitchen!

[@BasicallySteve23]

Excellent breakdown! Thanks for making this!

[@Booyamakashi]

the new intro graphic is fire :D

[@leonidpyrlya9795]

Love the scene transitions

[@aysommer]

Real fresh and actual content. Thanks, interesting

[@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.

[@sprintwithcarlos]

Great video! Thanks Jack 🙏🏽 my prayers always for your wife

[@mmmikem]

I typed out a message on your discord yesterday, two weeks without uncle Jack is a bad time!

[@kingjulien1921]

really like these more advanced react content

[@murhafal-msri5479]

interesting. This is the first time I saw A store without wrapper around the components which are using it

[@Brlitzkreig]

Your voice is like a soothing balm

[@gerrievanwyk]

Execellent video as always! Love your work and thanks for these insights!

[@hardikganatra2453]

Thank you Jack , you are an amazing, Keep sharing its high quality content. God bless you Sir

[@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.

[@mohitsurani6204]

I just wanna learn even more now- it looks so cool o.O

[@abel090713]

dope transition

[@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.

[@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.

[@jr-hp7er]

This is awesome, Jack!

[@sominupadhyaya9026]

Dude thank you so much for all the content keep the content going👍👍

[@jlndev1017]

Love the content, any particular reason you dont use typescript in the videos? would prefer it over plain js

[@jherr]

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.

[@Booyamakashi]

TS in a lot of cases is unnecessary obfuscation.

[@anthonylarson6198]

Personally I prefer it being in plain JavaScript. Typescript isn't relevant to the content being taught.

[@neociber24]

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.

[@vpetryniak]

@@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

[@SkillTrailMalefiahs]

Very clear and concise :D :D Your are big (Y)

[@afifu]

Realy great content 🙌

[@Smartercow]

Underrated KZbinr!

[@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! ✨

[@danielschmid8530]

I hate KZbin for suggesting videos with thumbnails like this. And I hate KZbin 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, KZbin 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!!!!

[@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.

[@AndrewKassis]

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?

[@jherr]

It indicates that the argument is optional. So variable3 is optional.

[@HiagoMM]

Amazing content, congratulations!

[@nparashar150]

Awesome work! Your videos always have something which makes me love React even more!!

[@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.

[@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.

[@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.

[@bythealphabet]

Awesome Jack, thanks.

[@vitaliishuplat9930]

Thanks for good quality content.

[@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.

[@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.)

[@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!!

[@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.

[@robertogermanpuentesdiaz2500]

Simply Genius👏👏

[@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 - kzbin.info/www/bejne/g6HHd51ugqqogKM 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.

[@Cahnisama]

Nice Yamato poster

[@jherr]

Thank you!

[@RishabhJain-uv7zj]

Can you make a video how you editor key bindings and how you move through code easily using keyboard.

[@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!

[@eghazaryan3335]

Thanks very much Sir ,keep going

[@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.

[@thaigia6759]

I'm sorry but i dont know where, when and why we use it? Can yout explain it . Thanks!

[@jherr]

At a practical level, use this hook if you are connecting to an external state store that does not provide a React hook.

[@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

[@elaymelis9724]

Thanks for the share

[@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.

[@AveN7ers]

That thumbnail tho 😆

[@federicomarazzani2649]

Awsome content! Keep it up please

[@wateenafzal2963]

which zsh theme do use and what config fonts u use they are nice

[@sergeyplotnikov5031]

Can I replace react-redux package with this hook? Practical usage is not clear for me.

[@SereneBibleScriptures]

Great tutorial! Pls what extension are you using to for autocomplete

[@jherr]

GitHub Copilot

[@SereneBibleScriptures]

@@jherr thanks Jack!

[@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

[@tonienguix6503]

man you are too good

[@sealuke2724]

Nice contents! Keep going :)

[@ibrahimmohammed3484]

so now this is how we will get a new 200+ state mangers, cool

[@rkingham3181]

Can I suggest to please turn your Auto Complete (CoPilot?) off when you do this amazing videos? I can get you at least 4 reasons why that is quite distracting for someone who is trying to follow and truly understand every step. Thank you for the videos

[@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! 👍

[@heyyrudyy404]

What VS Code theme is this ? Never seen it before.

[@jherr]

Night Wolf [black] and the font is JETBrains Mono.

[@technikhil314]

if I may ask What terminal and shell and prompt is that?

[@jherr]

Fig.

[@exactzero]

You can use hooks inside the component's render?

[@moch6459]

To download soft soft is the download free or do you have to pay for it?

[@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.

[@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.

[@rrawla]

Thanks!

[@jherr]

Wowzers! Thank you!

[@PuranjayJain]

Can we use this for making a connection with the localstorage or the sessionstorage apis?

[@jherr]

Sure.

[@codedusting]

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.

[@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.

[@heyyrudyy404]

One problem with software industry is that, we look at tools before looking at problems.

[@pawekoaczynski4505]

good stuff