Video

Helpful

I can’t thank you enough for these tutorials. They’ve been a huge help in my learning process. Your dedication to teaching is truly appreciated!

I like your voice. Looking forward for the next lesson.

Thank you. Probablythe best way of teaching an optimization technique and it's core underlying principle and closures I've seen. Rare quality content

this video is epiphanic🤯. laterally. i epiphany-ed when you showed `children` is `content` just another name plus jsx sugar, and the 3 heavies are created in App scope passed as arguments to Scrollable... thank you soso much. incredible

Thank you for all your efforts in these videos! I purchased the digital version of your book, but I find it much easier to learn things when they are in a video format. These videos are amazing resources

What if I set the open modal flag in a global state such as zustand? does the App component will rerendered in this case too?

Ma'am,your video are best.

so cool, thank you for sharing!

amazing video......learnt a lot from your story telling teaching style

Awesome content, thank you very much !

Thanks for sharing , it's really helpful

There's something i didn't get ... is about the moment on your video "time 3 minutes and 49 seconds" i have a doub . The value i need to put into the property ref = " " in a tag <input > have must to be the same name of variable who has the useRef() at the line 3 from the code on the video ?

Your videos are awesome. Your voice is really nice and I like the calm and friendly way you talk. It's the kind of thing I can watch at home after a day's work and not get more tired. The videos are really easy to understand. Don't stop making these videos, I'm learning a lot.

you should be on react team <3

I really really like your explanation, the time you have put in to make these videos and the cat sticker, it's really cute specially the cat with crown. Wishing you success in getting what you desire.

brilliant ❤ I’m watching it after reading particular part of your book. Thank you very much! Is there any possibilities to support your work ?

Wow. So grateful for this video. 🙏

czcams.com/video/-UjbTFc9NL4/video.html&ab_channel=TannerLinsley

components cannot be created inside components... unless it's a memo))))

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.