Developer Way
Developer Way
  • Видео 16
  • Просмотров 208 239
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/
Просмотров: 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: ...
Why React components re-render?
Просмотров 14 тыс.Год назад
Why React components re-render?

Комментарии

  • @qantar8167
    @qantar8167 16 часов назад

    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!

  • @mkacodes
    @mkacodes 3 дня назад

    it's just the first episode, but i'm already solved a lot of re-rendering issues. Thank you

  • @avimonnudash1762
    @avimonnudash1762 7 дней назад

    Thank you

  • @silventin0
    @silventin0 9 дней назад

    Very good content!

  • @ankitjangid2277
    @ankitjangid2277 10 дней назад

    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.

    • @developerwaypatterns
      @developerwaypatterns 10 дней назад

      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 :)

  • @SulaymonOlimov-t7h
    @SulaymonOlimov-t7h 12 дней назад

    amazing explanation

  • @edgar116611
    @edgar116611 13 дней назад

    You have completely omitted other reasons to use useCallback and useMemo, then they are resulting in values that are used as dependencies !

  • @aomafura3374
    @aomafura3374 13 дней назад

    Thanks! I had so much trouble with re-renders. Can you cover Form re-renders as well?

    • @developerwaypatterns
      @developerwaypatterns 13 дней назад

      Do you have anything specific in mind for this?

    • @aomafura3374
      @aomafura3374 13 дней назад

      @ 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.

    • @developerwaypatterns
      @developerwaypatterns 12 дней назад

      You just need to trace where you're changing the state - in forms it's no different from other components.

  • @haroongit
    @haroongit 16 дней назад

    u r the top one mentor i like amazing

  • @haroongit
    @haroongit 16 дней назад

    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

  • @haroongit
    @haroongit 16 дней назад

    thanks u @developer way

  • @haroongit
    @haroongit 16 дней назад

    now i am realising why my react project was slow my manger asked me why slow project

  • @haroongit
    @haroongit 16 дней назад

    omg its amazing a diamond video thank u thank u thank u

  • @govindkarthikeyan
    @govindkarthikeyan 16 дней назад

    This is gold and can't see this level of stuff anywhere online easily !!! Please keep sharing these advanced stuffs., huge respect and Thanks.

  • @akinjidesleek
    @akinjidesleek 18 дней назад

    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.

  • @Sumy.Z
    @Sumy.Z 18 дней назад

    This was excellent..thank you @Nadia🎉

  • @jazzyBassBenny
    @jazzyBassBenny 18 дней назад

    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!

  • @LuanNguyen-qh9nw
    @LuanNguyen-qh9nw 18 дней назад

    thank you so much

  • @herohema5
    @herohema5 20 дней назад

    WILD! Thank you for explaining this!

  • @devwithhaythem6160
    @devwithhaythem6160 21 день назад

    Thanks for sharing , it's really helpful

  • @gouravchatterjee7052
    @gouravchatterjee7052 23 дня назад

    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.

  • @youssefkarfouh3084
    @youssefkarfouh3084 27 дней назад

    Wooow , simple , striaghtforward , please keep posting more videos about react and performance 🙏

  • @samratchandravanshi3869
    @samratchandravanshi3869 Месяц назад

    Hey Nadia, why did you stopped making videos maam. You are the best.

  • @saieashwar870
    @saieashwar870 Месяц назад

    This has been one of the best playlists on react I've seen. The explanations and videos are perfect. Please continue the series

  • @danijelprskalo3675
    @danijelprskalo3675 Месяц назад

    Nice videos!

  • @Viral_vittles
    @Viral_vittles Месяц назад

    wow

  • @virtualvicky15
    @virtualvicky15 Месяц назад

    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.

  • @Viral_vittles
    @Viral_vittles Месяц назад

    love that

  • @Viral_vittles
    @Viral_vittles Месяц назад

    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.

  • @Viral_vittles
    @Viral_vittles Месяц назад

    Thats a pure magic u teaching, feels like I am in the Castle of Hogwarts

  • @Viral_vittles
    @Viral_vittles Месяц назад

    wow

  • @Viral_vittles
    @Viral_vittles Месяц назад

    Thats Holy Grail of React

  • @Viral_vittles
    @Viral_vittles Месяц назад

    Your way of teaching and content feels highly sophisticated.

  • @Viral_vittles
    @Viral_vittles Месяц назад

    Another great video

  • @Viral_vittles
    @Viral_vittles Месяц назад

    great video

  • @MohamedMahmoud-pe6qm
    @MohamedMahmoud-pe6qm Месяц назад

    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 💕💕💕💕

  • @mohamedbelal6820
    @mohamedbelal6820 Месяц назад

    amazing! Thank you so so much!

  • @mostinho7
    @mostinho7 Месяц назад

    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

  • @mostinho7
    @mostinho7 Месяц назад

    useCallback caches the function passed to it and returns it

  • @sniperline047
    @sniperline047 Месяц назад

    soo good!

  • @mjprakash1780
    @mjprakash1780 Месяц назад

    What a nice explanation with nice animations... Learnt something new today... Thanks

  • @ayushpandey985
    @ayushpandey985 Месяц назад

    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

  • @nishit4939
    @nishit4939 Месяц назад

    Please continue

  • @ayushkumar2436
    @ayushkumar2436 Месяц назад

    super helpful finaly have a better understanding of react reconcilliation

  • @sergioavalos
    @sergioavalos Месяц назад

    This was super insightful! Thanks for sharing

  • @ostadomid3355
    @ostadomid3355 Месяц назад

    Haven't seen such easy explained detailed video ever. Really helpful. Hope to have more like this.

  • @easyitis2117
    @easyitis2117 Месяц назад

    Subscribed just by reading the comments. Will watch all the videos. Thank you so much ❤

  • @claudiaalphonse2575
    @claudiaalphonse2575 Месяц назад

    I am so glad I found your channel.your explanation is so on point. 😊

  • @AungKaungMyint-z1l
    @AungKaungMyint-z1l Месяц назад

    Thanks for your well explanation!!

  • @kirillseliukov
    @kirillseliukov 2 месяца назад

    pfff amazing, you are doing so great!!!