There is one catch here if i want to open that model in app component then i need to state then only i can open the model and state change will cause the re-render of other component

At 6:37, did you mean the comparison between "Before" <Child/> and "After" <Child/> when the state change, isn't it?

The best blogger ever! I want your next.js course to watch next

3:31 у вас помилка, має бути false a є true в субтитрах

Brillant! This is NOT the usual React course you can find in many other places (with all due respect speaking): this is a pure gem!

06:45 2 episod - mistake. should be return false - not true or I just do not understand this 2d episod at all. Explain please who can

im really curious about the software you use to create the code animations, would you be so kind to share it?

I have subconsciously moved the state down many times when I was implementing Add/Delete buttons; it just felt natural to move out all that fetch logic into its own tidy component, but now I will be doing it consciously.

perfect!!!

I usually see HoCs in plain Javascript and it makes me worried if it is hard to type correctly and elegantly in TypeScript.

4:20: Well the problem _just_ mentioned clicked for me and holy cow it’s an annoying and unintuitive issue! Before watching further, my guess is: * Since count is captured at the time of the closure, it’s frozen in time to whatever it is when the callback is registered * Memoization prevents the component from being re-rendered and the closure being replaced with an up-to-date closure with the most recent state * The worst part is I don’t see an obvious solution (does the rest of the video offer one? I expect so, but I’ll watch patiently) as calling useState in an event handler is not gonna work. useRef()? Shouldn’t be needed…. I’ll keep watching. Edit: oh fuck I saw the name of the last chapter. It is, in fact, refs that are used for it. 💀 Edit 2: Well that’s a more clever way to use the closures than I thought.

Awesome thanks! Render props pattern is passing a function that when called returns the child component, instead of directly passing the component. Passing child component is not flexible, example is Button and icon component you pass icon as a prop to button. Button can control what props of are passed to icon but if icons prop AP changes then this will break without noticing. How to share state with children render props Why you should use hooks instead When to still use render props

Thanks for the insightful video Summary: you don’t want to directly pass elements as props, instead you should use render props pattern (next video) but even that custom hooks are usually more suitable in 99% of situations

Around 12mins there was this pattern: `{isSomething ? <Something /> : null}`. Will it be the same result if I use `{isSomething && <Something />}`? Or in that case instead of having an `undefined` element in the array the element is omitted (therefore the bug stays)? I am asking because if these 2 are not equivalent, then this solution has a very high risk of suffering "death by refactor": someone sees it, assumes it was written by somebody who forgot about `&&` and rewrites it like that. Update: it works as expected, a potential refactor won't kill it.

I read your book twice, now im happy to find your making videos too... The best react content out there BY FAR.. thank you

hey, I couldn't reproduce the example "Intercepting DOM events". I've tried several approaches, but it didn't work.

is it just me who is enjoying this series more than any Hollywood series?? great explanations and narration also 👌

Amazing course! Thank you 🙏

When the App component rerenders at 3:23 it will run each child component again but will only update the DOM when the execution of all the children has finished, right? @developerwaypatterns 🤔

Спасибо! Очень полезно! Будет обновление курса и книги после релиза React 19? Собираюсь купить вашу книгу)

Thanks for the great video! 1:40 problem is that state frequent state change is at the parent component level which has a bunch of slow children that will rerender everytime state changes. You should move state down to fix this problem if you can (moving state to the child component that needs it instead of having state at the parent level). In this case, that’s not possible because what triggers state change is the wrapper div that encapsulates the children 2:10 composition trick, making the outer div component that triggers the state change take the heavy/slow children as props and then render them, instead of them being defined in the same component (getting them as props vs defining them in the same component) solves the issue of slow/heavy components re-rendering This doesn’t make sense at first because technically they’re still children of the outer div component in the react tree, but they don’t re-render when the outer div component state changes 5:30 diffing an reconciliation, understanding how react compares elements and decides to rerender explains why the composition trick prevents the heavy child components passed as props from rerendering when state changes 6:20 summary

You explain so well, love it 😅

Bought your book after watching some of your videos, you explain so well!

Now watching the entire thing, it is logical but very very sad, that passing a blob of HTML without any variables in it will trigger rerender because it is just an object created after all. I _love_ the children pattern as it makes code very readable, but all that is lost if I have to memoize it through (quite counterintuitively) `useMemo`.

Top quality, super clear explanation! I have just subscribed as a senior dev. On a total side note, I almost never needed useCallback probably because we used overmindjs (a UX friendly version of redux) and the combination of subconscious patterns: for example a submit function is called as a reaction to a submit event and not in useEffect hook. Therefore on renders submit is not called, only on user interactions. Anyways I made myself a debug hook, that you can pass an array and it outputs which variable changed since the previous render. It's super useful to test dependencies.

This video has helped me a lot to learn more about React.memo. Thanks

Hi Developer, you are creating the best videos, please create videos for JavaScript as well.

Done thanks! When a react component n rerender due to a state update, all the child components defined in it will rerender by default. So you should move state down when possible to be specific to the component that needs to rerendered to avoid rerendering other components that don’t rely on this state variable

Thank you for all this excellent content. I think your videos are useful for any level. Your videos are way more substantive than most, the way you deep dive into things and don’t just stay on the surface and just really get under the hood is extremely useful, and you explain things with an unmatched clarity and detail. I find myself going back to these videos mentally and literally all the time whenever I hit a wall. Im a professional developer and watch your videos even if they’re discussing what I already know- and still I walk away with a better understanding. Your content is top shelf. Please keep up the excellent work.

thank you very very much for this.

These videos are amazing!!! Thank so much!

This is a fantastic resource and clear explanations, thanks :) FYI - There is a bug @12:21 - should remove the "!" before "isCompany", or else swap the return values. At the moment if isCompany is true it will return [{ type: Checkbox }, { type: Input }, { type: Input }] and if it is false it will return [{ type: Checkbox }, null, null]

wonder full tutorial mam, i loved your explanation 💌

Mindblowing! Now I am going to get rejected in interviews because most architects wont know this much :D

This is very amazing. Thank you so much, big W !!!

How is this going to work with TypeScript?

Awesome!

I though I was a senior dev but this popped my bubble real fast 🤣 but in all seriousness, who the hell is designing this thing? This is not a library it’s a minefield. God I miss VueJS

Love your blog!

Beautiful video, the first one too. Subscribed!

Crisp and straight to the point content, Thx Nadia

This is gold

Thank you for all your videos and for your amazing book!

Your videos are gold, mate 👏Very few creators go so deep into how React really works.

U need a million subs for the amazing content reality love the quality tq for all ur efforts

I have doubt.. can we dynamically insert element to the list until it doesn't fit. like here we first first render it initially and call useLayoutEffect hook which will calculate the width of the elements before the painting ..but can we do it dynamically calculating on the go and inserting element to list if not why not?

This was very useful. Thank you!