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

Поделиться
HTML-код
  • Опубликовано: 16 дек 2024

Комментарии • 244

  • @jherr
    @jherr  2 года назад +259

    Like this comment if you want to see a follow up video where I add TypeScript support with generics.

  • @qodesmith520
    @qodesmith520 2 года назад +26

    This was amazing. What a succinct, detailed explanation of the new hook with SSR and client-only examples.

  • @MaximSchoemaker
    @MaximSchoemaker 2 года назад +4

    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
      @jherr  2 года назад +2

      Thank you for the heartfelt thoughts. She is doing well, improving and will survive. So good news all around!

  • @PhilipAlexanderHassialis
    @PhilipAlexanderHassialis 2 года назад +9

    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
    @adamzaczek6342 2 года назад +28

    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
      @adamzaczek6342 2 года назад +1

      Also, the new hook looks pretty neat. We're goinging to try it out.

    • @nimeshvaghasiya1663
      @nimeshvaghasiya1663 2 года назад

      @@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
      @JEsterCW 2 года назад

      Rodak w sekcji komentarzy, miło.

  • @loquek
    @loquek 2 года назад +5

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

  • @VoxyDev
    @VoxyDev 2 года назад +1

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

  • @nileshranjan3227
    @nileshranjan3227 2 года назад +3

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

  • @asadsalehumar1011
    @asadsalehumar1011 2 года назад +2

    your explanation blew my mind. always on point!

  • @lancerdonnie
    @lancerdonnie 2 года назад +1

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

  • @herediadev
    @herediadev 2 года назад +3

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

  • @dezkareid
    @dezkareid 2 года назад +3

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

  • @MrJellekeulemans
    @MrJellekeulemans 2 года назад +1

    Awesome tutorial. You explain everything really clearly and precise.

  • @parkerAmv
    @parkerAmv 2 года назад +1

    Really good explaning of a senior. thank you

  • @suauhwang
    @suauhwang 2 года назад +1

    phenomenal explanation of stores in general, thanks !

  • @maximilianoInfinito
    @maximilianoInfinito 2 года назад

    Thankyou really clean example and clear description of what is happening. Thankyou so much!!

  • @shafu_xyz
    @shafu_xyz 2 года назад +1

    High quality and succinct explanation!

  • @ShaharHarshuv
    @ShaharHarshuv Год назад +1

    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.

  • @samyogdhital
    @samyogdhital 2 года назад +3

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

  • @leonidpyrlya9795
    @leonidpyrlya9795 2 года назад +1

    Love the scene transitions

  • @unknownheartless3472
    @unknownheartless3472 2 года назад +1

    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
      @jherr  2 года назад +1

      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
      @unknownheartless3472 2 года назад

      @@jherr oh I completely forgot about the value compare for updates, thanks!!

  • @sahajranipa
    @sahajranipa 2 года назад +1

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

  • @BasicallySteve23
    @BasicallySteve23 2 года назад +1

    Excellent breakdown! Thanks for making this!

  • @rrawla
    @rrawla 2 года назад +1

    Thanks!

    • @jherr
      @jherr  2 года назад

      Wowzers! Thank you!

  • @Thorax232
    @Thorax232 2 года назад +3

    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.

  • @Booyamakashi
    @Booyamakashi 2 года назад +1

    the new intro graphic is fire :D

  • @estebanmunchjones7946
    @estebanmunchjones7946 2 года назад +1

    thanks a lot Jack! you'r providing this masterclass for free!
    Highly appreciated 🙏
    You have the best content on React of the entire web

  • @nparashar150
    @nparashar150 2 года назад +2

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

  • @O_Eduardo
    @O_Eduardo 2 года назад

    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.

  • @kingjulien1921
    @kingjulien1921 2 года назад +1

    really like these more advanced react content

  • @aysommer
    @aysommer 2 года назад +1

    Real fresh and actual content. Thanks, interesting

  • @erikslorenz
    @erikslorenz 2 года назад

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

  • @jr-hp7er
    @jr-hp7er 2 года назад +1

    This is awesome, Jack!

  • @SkillTrailMalefiahs
    @SkillTrailMalefiahs 2 года назад +1

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

  • @ucretsiztakipci6612
    @ucretsiztakipci6612 2 года назад +1

    The smell of quality came through all the way kitchen!

  • @sprintwithcarlos
    @sprintwithcarlos 2 года назад +1

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

  • @gerrievanwyk
    @gerrievanwyk 2 года назад

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

  • @mdhasanuzzaman1546
    @mdhasanuzzaman1546 2 года назад +2

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

    • @jherr
      @jherr  2 года назад +1

      GitHub Copilot

  • @mohitsurani6204
    @mohitsurani6204 2 года назад +1

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

  • @murhafal-msri5479
    @murhafal-msri5479 Год назад +1

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

  • @bythealphabet
    @bythealphabet 2 года назад +1

    Awesome Jack, thanks.

  • @hardikganatra2453
    @hardikganatra2453 2 года назад +1

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

  • @guiiimkt
    @guiiimkt 2 года назад +88

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

  • @abel090713
    @abel090713 2 года назад +1

    dope transition

  • @robertogermanpuentesdiaz2500
    @robertogermanpuentesdiaz2500 2 года назад +1

    Simply Genius👏👏

  • @HiagoMM
    @HiagoMM 2 года назад +1

    Amazing content, congratulations!

  • @EdygarOliveira
    @EdygarOliveira 2 года назад +2

    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
      @jherr  2 года назад

      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
      @EdygarOliveira 2 года назад +2

      @@jherr although node is single threaded, a async getServerSideProps is enough to intersperse requests.
      And yes, in next js that is a good solution.

  • @eghazaryan3335
    @eghazaryan3335 2 года назад +1

    Thanks very much Sir ,keep going

  • @jlndev1017
    @jlndev1017 2 года назад +27

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

    • @jherr
      @jherr  2 года назад +8

      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
      @Booyamakashi 2 года назад +8

      TS in a lot of cases is unnecessary obfuscation.

    • @anthonylarson6198
      @anthonylarson6198 2 года назад +13

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

    • @neociber24
      @neociber24 2 года назад +5

      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
      @vpetryniak 2 года назад +4

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

  • @Brlitzkreig
    @Brlitzkreig 2 года назад +1

    Your voice is like a soothing balm

  • @sominupadhyaya9026
    @sominupadhyaya9026 2 года назад +1

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

  • @ToshisanMotonaka
    @ToshisanMotonaka 2 года назад +2

    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?

  • @juanmamani2110
    @juanmamani2110 2 года назад +1

    Thanks for sharing! You always expose in a easy way to understand. Do you have online front end courses?

    • @jherr
      @jherr  2 года назад +1

      I have a playlist that takes you through both React and TypeScript on the channel. It's all free.

  • @vitaliishuplat9930
    @vitaliishuplat9930 2 года назад

    Thanks for good quality content.

  • @mmmikem
    @mmmikem 2 года назад +1

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

  • @afifu
    @afifu Год назад +1

    Realy great content 🙌

  • @TechJunkie
    @TechJunkie 2 года назад

    @Jack Herrington how did you customize your zsh prompt ? can u share us the zsh prompt theme or code or config ?

    • @jherr
      @jherr  2 года назад

      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.

  • @toa7370
    @toa7370 Год назад

    2:14 - 2:16 is this a shortcut to delete all children from html tag? or just some frames being edited out?

    • @jherr
      @jherr  Год назад

      Editing.

  • @Q99a
    @Q99a 2 года назад +1

    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
      @jherr  2 года назад +1

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

  • @AndrewKassis
    @AndrewKassis 2 года назад +1

    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
      @jherr  2 года назад +1

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

  • @NightstalkerKK
    @NightstalkerKK 2 года назад +2

    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
      @jherr  2 года назад +1

      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
      @NightstalkerKK 2 года назад

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

    • @jherr
      @jherr  2 года назад +2

      @@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
      @NightstalkerKK 2 года назад

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

  • @elaymelis9724
    @elaymelis9724 2 года назад +1

    Thanks for the share

  • @Smartercow
    @Smartercow 2 года назад +1

    Underrated RUclipsr!

  • @amarg26
    @amarg26 2 года назад +2

    @Jack Has react.js useeffect screwed due to double re rendering ? What is your opinion?

    • @jherr
      @jherr  2 года назад

      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
    @codex6634 2 года назад +1

    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
      @jherr  2 года назад

      When it comes out, definitely.

  • @danielschmid8530
    @danielschmid8530 2 года назад +1

    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.

    • @jherr
      @jherr  2 года назад

      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.

    • @armanbulatovich7341
      @armanbulatovich7341 2 года назад

      @@jherr we r waiting, thank u for information! This is great job!!!!

  • @Cahnisama
    @Cahnisama 2 года назад +1

    Nice Yamato poster

    • @jherr
      @jherr  2 года назад +1

      Thank you!

  • @sergeyplotnikov5031
    @sergeyplotnikov5031 2 года назад

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

  • @greendsnow
    @greendsnow 2 года назад +6

    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
      @penna420 2 года назад

      ever heard of useState, useReducer, useContext ?

    • @greendsnow
      @greendsnow 2 года назад

      @@penna420 ever heard of useEffect?

    • @penna420
      @penna420 2 года назад

      @@greendsnow useEffect is not a state hook, it's a sync hook

    • @greendsnow
      @greendsnow 2 года назад

      @@penna420 Weren't you giving examples to suboptimal react hooks? Oh ok. Good luck with actions, dispatchers, wrappers and arrays...

    • @penna420
      @penna420 2 года назад

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

  • @SereneBibleScriptures
    @SereneBibleScriptures 2 года назад

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

  • @dualwan
    @dualwan 2 года назад +1

    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
      @jherr  2 года назад

      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.

  • @PuranjayJain
    @PuranjayJain 2 года назад

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

    • @jherr
      @jherr  2 года назад

      Sure.

  • @AmenAmenzo
    @AmenAmenzo 2 года назад +2

    @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
      @jherr  2 года назад +1

      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.

  • @RishabhJain-uv7zj
    @RishabhJain-uv7zj 2 года назад

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

  • @borjangjorovski
    @borjangjorovski 2 года назад +1

    Just please let me know which theme and font you are using? Actually how about you drop the whole configuration? It is perfect.

    • @jherr
      @jherr  2 года назад +1

      Night Wolf [black] and JETBrains Mono.

  • @rcarias78
    @rcarias78 2 года назад

    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
      @jherr  2 года назад

      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
      @rcarias78 2 года назад

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

  • @jongseoklee9477
    @jongseoklee9477 2 года назад

    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
      @jherr  2 года назад

      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
    @thaigia6759 2 года назад +1

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

    • @jherr
      @jherr  2 года назад

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

  • @heyyrudyy404
    @heyyrudyy404 2 года назад +1

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

    • @jherr
      @jherr  2 года назад +1

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

  • @tl3119
    @tl3119 2 года назад

    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!

  • @ibrahimmohammed3484
    @ibrahimmohammed3484 2 года назад

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

  • @federicomarazzani2649
    @federicomarazzani2649 2 года назад +1

    Awsome content! Keep it up please

  • @andrewc8125
    @andrewc8125 2 года назад +1

    You have done many comparisons on Global State. How do you compare with other Global State Libs like Zustand or Jotai?

    • @jherr
      @jherr  2 года назад +1

      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
      @andrewc8125 2 года назад

      @@jherr thank you for sharing your amazing contents as always

  • @vpetryniak
    @vpetryniak 2 года назад +3

    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
      @jherr  2 года назад +4

      Habit, or something... I think I just habitually return to yarn. Hahaha.

  • @cool_scatter
    @cool_scatter 2 года назад +2

    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.

  • @technikhil314
    @technikhil314 2 года назад +2

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

    • @jherr
      @jherr  2 года назад +2

      Fig.

  • @moch6459
    @moch6459 2 года назад

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

  • @exactzero
    @exactzero 2 года назад

    You can use hooks inside the component's render?

  • @sealuke2724
    @sealuke2724 2 года назад +1

    Nice contents! Keep going :)

  • @brunoloverius5777
    @brunoloverius5777 2 года назад

    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
      @jherr  2 года назад

      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
      @brunoloverius5777 2 года назад

      @@jherr I think I wached this video with the wrong mindset :) thanks for clarifying this for me!

  • @andreicojea
    @andreicojea 2 года назад +1

    Does useSyncExternalStore expect the subscribe function to return the unsubscribe function? I suppose so, otherwise it won't know how to cleanup.

    • @jherr
      @jherr  2 года назад

      Yes, the contract is the subscribe function returns an unsubscribe.

    • @andreicojea
      @andreicojea 2 года назад

      @@jherr nice, thank you! 👍

  • @nimeshvaghasiya1663
    @nimeshvaghasiya1663 2 года назад +1

    @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
      @jherr  2 года назад

      If you are doing navigation between pages in NextJS using Link, then it's SPA navigation and the state should be retained.

    • @nimeshvaghasiya1663
      @nimeshvaghasiya1663 2 года назад

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

  • @kkjoe2677
    @kkjoe2677 Год назад

    Just curious what are the use cases of creating a store object

    • @jherr
      @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.

  • @wateenafzal2963
    @wateenafzal2963 2 года назад

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

  • @Siddharthpandey27
    @Siddharthpandey27 2 года назад

    Can you help me on how to debug recoil state management implemented project

  • @tapka2tapka
    @tapka2tapka 2 года назад

    Wow! Great job. Does it mean I should use this approach in a small projects to reduce bundle size?

    • @jherr
      @jherr  2 года назад +1

      IMHO it means that React now has even more options than Context + useState/useReducer/..., which is a good thing.

  • @glekner
    @glekner 2 года назад +1

    can you please share the color theme & font?

    • @jherr
      @jherr  2 года назад

      Night Wolf [black] and JETBrains Mono.

  • @AveN7ers
    @AveN7ers 2 года назад +1

    That thumbnail tho 😆

  • @vulcs
    @vulcs 2 года назад

    How many decades we need to figure out how to manage state in web apps?

    • @jherr
      @jherr  2 года назад

      How many decades is never? Everything is constantly moving and/or improving. React has new a capability. Now you know more about it. Will you use it? Depends on the requirements of your project.

  • @pb8655
    @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
      @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.