React vocab explained: What is Concurrent React?

[@notshbn]

Sam, this is one of the best explanations of react vocab that I've seen or read yet. Thank you! Can't wait to see what's next

[@Chavez3d]

This should be mandatory viewing for react developers

[@ashishmehradotdev]

Now I understand concurrent . Thanks for detail explanation

[@danivicario]

This is an excellent explanation. Thank you very much.

[@alastairtheduke]

Such a clear explanation, thank you!

[@FishTalkFish]

As a frontend engineer, I always love your videos, Sam! Great job on this one!

[@michaelanthony4750]

Gold descriptions man. Thanks a lot.

[@nidhinsnair]

Explained very well. Thank you Sam

[@matthewslyh4052]

Nice explanation! You have a new subscriber!

[@jimbin93]

Love your video. Best React 18 explanation for sure.

[@tarunsukhu2614]

I have watched this a couple of times now . Thank you for the detailed explanation as well as the links. This is a gem !

[@iNTERO1337]

Such a beast of a man. You let me grasp so much React knowledge in such a concise form,.

[@EvertJunior]

You're amazing! Thank you for the great content

[@mmmike3426]

I made it this far 👏🏻 Would totally listen again!

[@motr3bam867]

He deserves way more subscribers and views. Thanks for your effort man

[@ChrisAthanas]

Great explanation of complex and confusing topics

[@tyu3456]

This was an awesome and clear explanation. Thanks Sam!

[@tomino133]

Great video. Also your podcast is amazing. Thanks for doing this man.

[@Triyanox]

Great content and very rich explanation !!!

[@Afrobaritonian]

This was really great!

[@VidozMusic]

Love the explanation - thanks, Sam!

[@zomars]

Been a fan since miragejs

[@mastan419]

Very well explained.. Thanks

[@FaridShokri]

Awesome video, Thanks a lot

[@rfmiotto]

Nice video, Sam! I loved the example you gave on how to prepare a modal (or page) in the background. It would be really nice to see how to implement this. Do you think this is something you can do with existing APIs or is it still a concept that will be available in the near future (the offscreen component you mentioned)?

[@samselikoff]

Thank you so glad you liked it! is something the react team has mentioned they’re working on but it’s not ready yet. Definitely would love to make a video on it once it drops!

[@mod7ex_fx]

if you don't subscribe you missed everything up)) thanks

[@itakpeemmanuel5863]

There's been some discourse lately against useEffect for external side effects, where then do we do this side effects? Custom hooks?

[@rfmiotto]

Dear Sam, I was musing about the purity of the functional component in cases where we want to display a timestamp for example (not like a clock, where you have a setInterval, but simply the time you entered the page). To illustrate, say we have a `const [time, setTime] = useState(new Date());` inside a given component. Because we are calling `new Date()`, the component will not be pure. That is something I found myself doing many times and never though about problems with it since the code worked just fine. But now, your video made me think: what would be the implications of using an impure component like this with the concurrent mode? I imagine that once the render phase starts, the timestamp will be evaluated. But as the commit can be interrupted, the timestamp that will eventually appear on the screen can be deferred. Would that be correct? So, from now on, I will police myself to to handle situations like this in a better way. Maybe using an undefined initial state and then set the state inside the useEffect hook... Thanks!

[@samselikoff]

Great question! While it's true you may have not noticed bugs in your app today, it's possible you will in the future once you start adopting new concurrent features like Suspense and Transitions. This is why the React team has started urging all of us to learn more about purity and to make sure our components are pure. In your example, if you call new Date() just to render "You visited this page at 10:24am", you could actually still run into a problem: what if you render it on the server? Maybe the server's new Date() is 10:24:01 and then the client app is 10:24:02. So you have a mismatch. Now again, this might not cause a visible bug in your current app (though you might get a mismatch hydration error in your console), but conceptually, you can see that React actually doesn't have all the information it needs to be able to rerender your app consistently. Usually in these situations there's actually more business logic that is missing from your calculations. In your example, you want to display the time when the user first visited the page. So, "the user first visiting the page" is the part of the logic that's missing. It's implicitly assumed by "new Date()", but it would be better to encode it inside the actual component. So, you might solve this by using some state, or even a ref, to say, "the user just visited the page." Something like hasVisitedPage = useRef(). Now once the component successfully renders, perhaps inside of a useEffect, you can capture that time and store it in state. And now no matter how many times React needs to re-render your app or prepare it offscreen, it has that data. So you can see the time the component was rendered could be thought of as a side effect of rendering, which is exactly why it should go inside of useEffect. And now the component is pure and your app will always be consistent. That's me just kind of thinking out loud but in all of these situations I've run into in the past, it's usually the way to think about it. There's some piece of business logic that's missing from the code, and making that logic explicit rather than relying on it implicitly, improves the component and removes the impurities. Hope that helps!

[@Gol_D_Roger_The_Pirate_King]

React is still catching up to Rich Harris performance breakdown. React is so slow and yet so many devs are still using it because it is popular and companies still hiring react devs. The best feature of React is "Hireability".

[@tanveerhasan2382]

Sad

[@claus4tw]

Is the echo in your voice artificial? I find a bit too much. Nice content though!

[@samselikoff]

No, audio is hard + I'm still learning 😩 I think it's just the reverb from the room