I'm not even a front-end developer but I just came across this video and I must say, this is so well done. I do mobile development and we have declarative frameworks becoming popular like Flutter, React Native. I think these concepts still apply so it was definitely a worthy watch.
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
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.
Hello, I bought your book and after reading the chapters, it's quite interesting to come to youtube and watch short videos related to that chapter. Thank you for preparing such an instructive resource.
Just amazing. Please please more videos. Trust me.... I've seen almost every online code tutor and you're up there with the best.... quit your day job and do this full time.
"wow" this is an idea I screamed after watching this video. So, I think this is a quality series about react i knew. tks for excellent explanation, Nadia, keep it up 💪
In React, it's common practice to use logic in the parent component to facilitate its easy pass into child components. Additionally, when opening a dialog, we require other components. To avoid repeatedly using components in child components, we employ this approach. However, if we use this behavior, React rerenders due to a state change in the parent component. Therefore, we utilize memoization to store the state value and address the issue of excessive rerendering.
"Wow, this video is fantastic! The content on React is explained so clearly, and I've learned a lot. Thank you for putting together such an informative and engaging video. Keep up the great work!"🙏
Thank you so much for this course. There are really very few advanced level courses online. I want to suggest the idea of creating a course on how to build your own mini React. That would be super cool!
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
Hey, nice video. I'm all up for moving state down, it's a very simple solution, as you said. So what would you prefer, moving state down, or just using .memo() to each component in your App() component?
Hi Nadia, thanks for the great video (yet again). One question, since I also didn't find a specific section about that in the book: what are your go-to tools to actually profile an existing React application? And how do you use them?
Hello Nadia nice video I have a question though, what if the button that is used to trigger the modal is in some different component then how will we extract it into a separate isolated component ?
It will follow the book's content for now. So there will be some new material, and some old re-worked. Table of content is here: advanced-react.com/#toc
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 🤔
hello, i want to ask, i am in my learning phase, i have seen using redux using typical manner i.e making actionCreators in action folder and reducers in another, but now i have seen thatit was different. they are using something called pipe() and mergeMap() functions and also they used customHooks for the actions, and i am seeing different approach like passing action$ as argument.
Your content is the best on the platform so far when it comes to Advanced React patterns, keep it up you are awesome ❤
agreed.
Hello Nadia, nowadays people prefer to watch video tutorials instead of reading books, nice choice
I'm not even a front-end developer but I just came across this video and I must say, this is so well done. I do mobile development and we have declarative frameworks becoming popular like Flutter, React Native. I think these concepts still apply so it was definitely a worthy watch.
Thank you! 😊
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
👍excellent content
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.
Hello, I bought your book and after reading the chapters, it's quite interesting to come to youtube and watch short videos related to that chapter.
Thank you for preparing such an instructive resource.
Great to hear 😊
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!
Bought the book and looking forward to your videos! Aside from the React official documentation you are the first resource I like to read :D
Haha, thank you! 😊
wow, interesting way to learning
Just amazing. Please please more videos. Trust me.... I've seen almost every online code tutor and you're up there with the best.... quit your day job and do this full time.
Excellent explanation of complex react stuff, your content is super high quality. Hope to see more videos like this one. thank you very much Nadia 😊
Thank you! More videos like this is the goal for the next few months 😊
you have all of us supports, keep continue nadia
This course is underrated. Keep up the good work
Amazing piece of knowledge. Thank you!
Thanks for making the effort to turn the book into videos.
I got the book but I will say i would love because of it is a quick go-to
"wow" this is an idea I screamed after watching this video. So, I think this is a quality series about react i knew. tks for excellent explanation, Nadia, keep it up 💪
In React, it's common practice to use logic in the parent component to facilitate its easy pass into child components. Additionally, when opening a dialog, we require other components. To avoid repeatedly using components in child components, we employ this approach. However, if we use this behavior, React rerenders due to a state change in the parent component. Therefore, we utilize memoization to store the state value and address the issue of excessive rerendering.
Thank you very much!
Love to have this kind of materials available!
U need a million subs for the amazing content reality love the quality tq for all ur efforts
Another Worth it content!! Heartiest Love from myside ❤ and wait for your next episode.
Working on it already! 😊
thank you very very much for this.
I've learnt a bunch from your articles. I'm looking forward to this course, really.
Thank you! 😊
Great content 🤝
"Wow, this video is fantastic! The content on React is explained so clearly, and I've learned a lot. Thank you for putting together such an informative and engaging video. Keep up the great work!"🙏
Thank you so much for this course. There are really very few advanced level courses online. I want to suggest the idea of creating a course on how to build your own mini React. That would be super cool!
That would be cool, agree 😊
Your content is top notch i just realised you are making videos out of your own book 😻! Truly appreciate the effort thank you!
Very clear and to the point, looking forward to the next videos !
Great Nadia, so pleases to see you wanna release a course, great choice ❤
This is awesome, I didn't know that I knew so many things wrong!
Awesome!
You are amazing Nadia. Thanks for content.
Thanks for this its good to visualize things
Waiting for the other episodes 🔥
Thank you for this -- the concepts are explained very clearly, and the examples and illustrations help a lot 😁
very good
Thank you for this video! very easy to follow along!
This was very well explained, love the cute cats btw :D Thanks for sharing!
Very clear and simple to understand, thank you!
I really love the book
I love your explanation, keep going on ❤
awesome 1st episode and excited for the second!
like for sure!
love it
Thanks for the work and for make it so clear 👏
Superb content and nicely done!
Thanks for your work!
Thank you! Top content
This is gold
Great content, thanks
great video, this made me get the book
😊 🎉
I love that cat with hat represents re-render😂😂❤
very informative!
Спасибо! Очень полезно! Будет обновление курса и книги после релиза React 19? Собираюсь купить вашу книгу)
I can't make any promises, sorry :)
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
Nice video
Thank you
What a great content
thanks a lot
очень круто
пожалуйста продолжай!!
Hey, nice video. I'm all up for moving state down, it's a very simple solution, as you said.
So what would you prefer, moving state down, or just using .memo() to each component in your App() component?
I always prefer composition techniques before using memoization
Love the content :D
Hi Nadia, thanks for the great video (yet again).
One question, since I also didn't find a specific section about that in the book: what are your go-to tools to actually profile an existing React application? And how do you use them?
Just Chrome devtools and React profiler, I don't use anything special, and most of the time prefer simple console.log :)
Hello Nadia nice video I have a question though, what if the button that is used to trigger the modal is in some different component then how will we extract it into a separate isolated component ?
That really depends on how all of this is coded in your case :)
Do you have an example you can reproduce in codesandbox?
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?
Yep, in this case it won't make a difference
В видео материал который уже был, дальше тоже будет старый переработанный или уже новые темы ?) А так статьи и канал огонь !))
It will follow the book's content for now. So there will be some new material, and some old re-worked. Table of content is here: advanced-react.com/#toc
Wow
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
🤔
Yep, unless you're doing something async there in useeffect IIRC
@@developerwaypatterns Thank you for responding and for sharing your knowledge with us!
Does this book go into react server components and/or next.js?
No and no, it focuses on React fundamentals that are not experimental or separate frameworks.
супер!
hello, i want to ask, i am in my learning phase, i have seen using redux using typical manner i.e making actionCreators in action folder and reducers in another, but now i have seen thatit was different. they are using something called pipe() and mergeMap() functions and also they used customHooks for the actions, and i am seeing different approach like passing action$ as argument.
Not sure what the question is :)
@@developerwaypatterns i wanted to ask if we can get video on this topic... "redux"..
Ah! Maybe in the future, I have this topic on my todo list
Unfortunately, I am from Iran and I can't buy the book with Iranian currency :(
That's unfortunate 😔
so basically, every component should manage its own state?
not necessarily, more like "split huge components into smaller components" if you want to reduce it to one sentense
you haven't created any other courses?
No, not yet
All this time i do believe that props change will cause rerender
Please the voice quality sis
Why don't people pay more attention to this??
mystery :)
heavy accent. hard to understand.