- Видео 16
- Просмотров 208 239
Developer Way
Австрия
Добавлен 8 янв 2023
Advanced patterns for Frontend developers.
Improve your technical skills with in-depth explanations, practical advices and useful tips and tricks.
Techstack: React, Typescript, node, monorepos, yarn, webpack, etc.
www.advanced-react.com
www.developerway.com
Improve your technical skills with in-depth explanations, practical advices and useful tips and tricks.
Techstack: React, Typescript, node, monorepos, yarn, webpack, etc.
www.advanced-react.com
www.developerway.com
Making sense of Higher Order Components - Advanced React course, Episode 7
👉 Based on the "Advanced React" book, Chapter 7: www.advanced-react.com
🎬 Episode 7: Higher Order Components in the modern world
00:30 What's in the episode
01:01 What is a Higher Order Component
01:42 Injecting props with HOCs
02:26 Enhancing callbacks with HOCs
05:44 Enhancing lifecycle methods
06:06 Intercepting DOM events
👩🏻💻 Code examples:
1. Injecting props (theming): www.advanced-react.com/examples/07/01
2. Button with logging on click: www.advanced-react.com/examples/07/02
3. Passing data to HOC: www.advanced-react.com/examples/07/03
4. Logging on mount: www.advanced-react.com/examples/07/04
💬 Twitter: adevnadia
💬 Linkedin: www.linkedin.com/in/adevnadia/
🎬 Episode 7: Higher Order Components in the modern world
00:30 What's in the episode
01:01 What is a Higher Order Component
01:42 Injecting props with HOCs
02:26 Enhancing callbacks with HOCs
05:44 Enhancing lifecycle methods
06:06 Intercepting DOM events
👩🏻💻 Code examples:
1. Injecting props (theming): www.advanced-react.com/examples/07/01
2. Button with logging on click: www.advanced-react.com/examples/07/02
3. Passing data to HOC: www.advanced-react.com/examples/07/03
4. Logging on mount: www.advanced-react.com/examples/07/04
💬 Twitter: adevnadia
💬 Linkedin: www.linkedin.com/in/adevnadia/
Просмотров: 7 093
Видео
Mastering React Reconciliation - Advanced React course, Episode 6
Просмотров 11 тыс.8 месяцев назад
👉 Based on the "Advanced React" book, Chapter 6: www.advanced-react.com 🎬 Episode 6: Deep dive into diffing and reconciliation in React 00:34 What's in the course 01:31 The problem we're going to solve 03:24 React reconciliation & diffing - mounting 05:45 React reconciliation & state update 08:37 Why we can't create components inside other components 09:48 The answer to the mystery 11:18 Reconc...
Mastering memoization in React - Advanced React course, Episode 5
Просмотров 15 тыс.9 месяцев назад
👉 Based on the "Advanced React" book, Chapter 5: www.advanced-react.com The fifth episode of the "Advanced React" course. The course will be uploaded episode by episode once every 1-2 weeks. 🎬 Episode 5: Memoization with useMemo, useCallback and React.memo 01:22 Intro to memoization and its purpose in React 03:33 How useMemo and useCallback hooks work - React API 04:55 How useMemo and useCallba...
Render props - Advanced React course, Episode 4
Просмотров 12 тыс.11 месяцев назад
👉 Based on the "Advanced React" book, Chapter 4: www.advanced-react.com The fourth episode of the "Advanced React" course. The course will be uploaded episode by episode once every 1-2 weeks. 🎬 Episode 4: Advanced configuration with render props 00:51 Intro to render props 3:26 Sharing state through children as render props 4:40 How hooks come into play 5:54 When render props can still be usefu...
Components as props - Advanced React course, Episode 3
Просмотров 12 тыс.11 месяцев назад
👉 Based on the "Advanced React" book, chapter 3: www.advanced-react.com The third episode of the "Advanced React" course. The course will be uploaded episode by episode once every 1-2 weeks. 🎬 Episode 3: Elements as props 00:00 The problem 00:47 Generic components with elements as props 2:54 Elements as props - downside 3:42 Default props to elements as props 4:25 Downside of default props 4:57...
Elements, Children and Re-renders - Advanced React course, Episode 2
Просмотров 19 тыс.11 месяцев назад
👉 Based on the "Advanced React" book, Chapter 2: www.advanced-react.com The second episode of the "Advanced React" course. The course will be uploaded episode by episode once every 1-2 weeks. 🎬 Episode 2: Elements, Children and Re-renders 00:00 The problem 00:59 Composition trick to reduce re-renders 3:11 What are the Elements 4:42 How rendering and re-rendering are triggered 5:29 Diffing and r...
Intro to re-renders - Advanced React Course, Episode1
Просмотров 40 тыс.Год назад
👉 Based on the "Advanced React" book, Chapter 1: www.advanced-react.com The first episode of the "Advanced React" course. The course will be uploaded episode by episode once every 1-2 weeks. 🎬 Episode 1: Intro to re-renders 00:00 The problem 1:41 React lifecycle basics 3:37 Danger of custom hooks 4:53 The big re-renders myth 5:52 Moving state down 👩🏻💻 Code examples: 1. The problem: codesandbox...
Fantastic closures and how to find them in React
Просмотров 12 тыс.Год назад
👉 Advanced React Book: www.advanced-react.com 👉 Fantastic closures and how to find them in React: www.developerway.com/posts/fantastic-closures 💬 Twitter: adevnadia 💬 Linkedin: www.linkedin.com/in/adevnadia/ 👩🏼💻 Initial "mystery" code example: codesandbox.io/s/example1-925swq?from-embed=&file=/App.tsx 👩🏼💻 Cached closure without React code example: codesandbox.io/s/example2-xx4xq3 ...
React reconciliation: how it works and why should we care
Просмотров 13 тыс.Год назад
👉 Advanced React Book: www.advanced-react.com 👉 React reconciliation: how it works and why should we care: www.developerway.com/posts/reconciliation-in-react ⃗💬 Twitter: adevnadia 💬 Linkedin: www.linkedin.com/in/adevnadia/ 👩🏼💻 The mystery of conditional rendering: codesandbox.io/s/keen-fog-vrujk7?file=/src/App.tsx 👩🏼💻 How to fix it with re-positioning: codesandbox.io/s/re-position...
Say no to "flickering" UI: useLayoutEffect, painting and browsers story
Просмотров 7 тыс.Год назад
👉 Advanced React Book: www.advanced-react.com 👉 Say no to "flickering" UI: useLayoutEffect, painting and browsers story: www.developerway.com/posts/no-more-flickering-ui 💬 Twitter: adevnadia 💬 Linkedin: www.linkedin.com/in/adevnadia/ 👩🏼💻 simple navigation with useEffect, broken: codesandbox.io/s/simple-responsive-menu-example-ltdx5r 👩🏼💻 simple navigation with useLayoutEffect, fixe...
Refs in React: from access to DOM to imperative API
Просмотров 4,6 тыс.Год назад
👉 Advanced React Book: www.advanced-react.com 👉 Refs in React: from access to DOM to imperative API: www.developerway.com/posts/refs-from-dom-to-api 💬 Twitter: adevnadia 💬 Linkedin: www.linkedin.com/in/adevnadia/ 👩🏼💻 Simple ref use: codesandbox.io/s/giant-form-ref-example-23z9vf 👩🏼💻 Pass ref as a prop: codesandbox.io/s/example2-pass-ref-as-prop-5i03u9 👩🏼💻 Pass ref with forwardRef...
The mystery of React key: how to write performant lists
Просмотров 6 тыс.Год назад
👉 Advanced React Book: www.advanced-react.com 👉 Comprehensive guide on React re-renders (www.developerway.com/posts/react-re-renders-guide) 👉 How to useMemo and useCallback: you can remove most of them (www.developerway.com/posts/how-to-use-memo-use-callback) 👉 React key attribute: best practices for performant lists (www.developerway.com/posts/react-key-attribute) 💬 Twitter: adevna...
useCallback for re-renders: remove most of them
Просмотров 7 тыс.Год назад
👉 Advanced React Book: www.advanced-react.com 👉 Comprehensive guide on React re-renders (www.developerway.com/posts/react-re-renders-guide) 👉 How to useMemo and useCallback: you can remove most of them (www.developerway.com/posts/how-to-use-memo-use-callback) 👉 The mystery of React Element, children, parents and re-renders (www.developerway.com/posts/react-elements-children-parents) 💬 Twitter: ...
Preventing re-renders with React.memo
Просмотров 6 тыс.Год назад
👉 Advanced React Book: www.advanced-react.com 👉 Comprehensive guide on React re-renders (www.developerway.com/posts/react-re-renders-guide) 👉 How to useMemo and useCallback: you can remove most of them (www.developerway.com/posts/how-to-use-memo-use-callback) 👉 The mystery of React Element, children, parents and re-renders (www.developerway.com/posts/react-elements-children-parents) 💬 Twitter: ...
Preventing React re-renders with composition
Просмотров 23 тыс.Год назад
👉 Advanced React Book: www.advanced-react.com 👉 Comprehensive guide on React re-renders (www.developerway.com/posts/react-re-renders-guide) 👉 How to useMemo and useCallback: you can remove most of them (www.developerway.com/posts/how-to-use-memo-use-callback) 👉 The mystery of React Element, children, parents and re-renders (www.developerway.com/posts/react-elements-children-parents) 💬 Twitter: ...
This was such a quick, simple and clear explanation! Really appreciate the effort and time it took to do such wonderful work, thank you a lot!
it's just the first episode, but i'm already solved a lot of re-rendering issues. Thank you
Thank you
Very good content!
fantastic video !!! but i have one doubt i hope you would explain me this better so my doubt is in this video code example you are using HeavyComponent and everytime the parent component will re render the HeavyComponent will also re render but in react they say that in component only that part will be re render that is got changed and other element will not re render so here why heavyComponent will re render again even it will be same for all re renders of parent component.
Can you link where in React they say that only the changed part will re-render? This is not true, assuming that the Compiler is not enabled, so it's probably a mistake somewhere :)
amazing explanation
You have completely omitted other reasons to use useCallback and useMemo, then they are resulting in values that are used as dependencies !
Thanks! I had so much trouble with re-renders. Can you cover Form re-renders as well?
Do you have anything specific in mind for this?
@ I’m probably doing mu form wrong but basically the scenario is, every time I input in my input text field, the entire screen re-renders. My form is inside a Modal but idk if that matters.
You just need to trace where you're changing the state - in forms it's no different from other components.
u r the top one mentor i like amazing
how i thanks u i dont know i am 2 years experience develoepr but i know these things know from al ur react ferformance video
thanks u @developer way
now i am realising why my react project was slow my manger asked me why slow project
omg its amazing a diamond video thank u thank u thank u
This is gold and can't see this level of stuff anywhere online easily !!! Please keep sharing these advanced stuffs., huge respect and Thanks.
I’ve been working with react and RN for about 6 years now so I have had to watch multiple video about this from time to time to remind my myself of it(I mostly go with hooks). I can say this is the most succinct explanation of HOC I have seen! Thanks.
This was excellent..thank you @Nadia🎉
the content/explanation of the concepts should be on the site "thinking in react". honestly, this video lets me write my whole app new for performance reasons. great job!
thank you so much
WILD! Thank you for explaining this!
Thanks for sharing , it's really helpful
man! you're so underrated. I have been watching your videos for last one and half hour. These senior level react videos are truly awesome.
Wooow , simple , striaghtforward , please keep posting more videos about react and performance 🙏
Hey Nadia, why did you stopped making videos maam. You are the best.
No time, unfortunately :(
This has been one of the best playlists on react I've seen. The explanations and videos are perfect. Please continue the series
Nice videos!
wow
I am not sure whether react takes 'type' into consideration when the component itself is recreated ,ie, created inside the parent as you have explained. I think the only thing that matters to rerender is whether the components are created inside a parent (which is getting re-rendered) or being passed as a prop.
love that
Thanks for the great video, I tried digging into a react hook and found a resolveDispatcher() action which seems to me an async call and could be the reason of stale closure.
Thats a pure magic u teaching, feels like I am in the Castle of Hogwarts
wow
Thats Holy Grail of React
Your way of teaching and content feels highly sophisticated.
Another great video
great video
Thanks Nadia for putting effort on this amazing playlist i can really say this is the best react content i had ever saw on the internet keep up the good work 💕💕💕💕
Thank you! ❤️
amazing! Thank you so so much!
So useCallback is useless most of the time, it’s only useful if your child component that you’re passing the callback function to is itself memorized with react.memo or if the child component has a useEffect with dependency on the callback passed from parent, so you don’t want the useEffect in the child to run again
useCallback caches the function passed to it and returns it
soo good!
What a nice explanation with nice animations... Learnt something new today... Thanks
I have a form in my parent component And some child components which updates specific fields of the form And then at last I will send the whole form to the api How can I manage this without re-rendering? Because parent's states are used in child to update parent's states
Please continue
super helpful finaly have a better understanding of react reconcilliation
This was super insightful! Thanks for sharing
Haven't seen such easy explained detailed video ever. Really helpful. Hope to have more like this.
Subscribed just by reading the comments. Will watch all the videos. Thank you so much ❤
I am so glad I found your channel.your explanation is so on point. 😊
Thanks for your well explanation!!
pfff amazing, you are doing so great!!!