Eulier Gonzalez
Eulier Gonzalez
  • 672
  • 20 113
React Performance : Overview, Describe UI, Add Interactivity, Manage State, Escape Hatches
Just a quick recap of React docs :
- Describe UI
- Add Interactivity
- Manage State
- Escape Hatches with useRef & Effects
Personal notes :
docs.google.com/document/d/1GmhpkP0IllcyScedWtv7qnVSRNGCzEsq3Ri4y2LkehA/edit
.
.
.
.
.
.
.
.
.
#javascript #react #state #context #business #logic #web #app #technical #communication #browser #reference #virtual #dom
มุมมอง: 4

วีดีโอ

NeetCode : Top K Frequent Elements pt 2
มุมมอง 142 ชั่วโมงที่ผ่านมา
Use common Data Structures like Array or Hash as a way to SOLVE common problems by REPRESENTING which data you want to STORE and/or ACCESS. Personal notes : docs.google.com/document/d/1x-isa0WJqFKJUUL4CdudCud0bXllbMMRTbrmWd4a3MY/edit?usp=sharing . . . . . . . . #business #data #javascript #communication #web #application #dictionary #array #problem #solve #technical
React Performance : When not to use Effect?, pt 3
มุมมอง 92 ชั่วโมงที่ผ่านมา
Data fetching in React is not something trivial. Since Effects allows us to run side-effect code (for example I/O like Data fetching) after COMMIT phase. You need to handle and avoid : - Duplicates Request - Network Waterfall - Caching Personal notes : docs.google.com/document/d/1GmhpkP0IllcyScedWtv7qnVSRNGCzEsq3Ri4y2LkehA/edit . . . . . . . . . #javascript #react #state #context #business #log...
React Performance : When not to use Effect?, pt 2
มุมมอง 167 ชั่วโมงที่ผ่านมา
TL;DR If you don't need to sync an external system, you don't need an effect. Personal notes : docs.google.com/document/d/1GmhpkP0IllcyScedWtv7qnVSRNGCzEsq3Ri4y2LkehA/edit . . . . . . . . . #javascript #react #state #context #business #logic #web #app #technical #communication #browser #reference #virtual #dom
NeetCode : Top K Frequent Elements
มุมมอง 129 ชั่วโมงที่ผ่านมา
- Challenges? : 1. Understand the meaning of K most element - Reflections Use Hash and Array (indexes or values) as a way to represent : - Which data you want to store? - How fast you want to access your data? Personal notes : docs.google.com/document/d/1x-isa0WJqFKJUUL4CdudCud0bXllbMMRTbrmWd4a3MY/edit?usp=sharing . . . . . . . . #business #data #javascript #communication #web #application #dic...
NeetCode : Group Anagrams
มุมมอง 3112 ชั่วโมงที่ผ่านมา
- Challenges? : 1. Hash (Dictionary) with Array - Reflections For grouping elements of data, use Hash to store the keys and Array for their values. Personal notes : docs.google.com/document/d/1x-isa0WJqFKJUUL4CdudCud0bXllbMMRTbrmWd4a3MY/edit?usp=sharing . . . . . . . . #business #data #javascript #communication #web #application
React Performance : When not to use Effect?, pt 1
มุมมอง 3212 ชั่วโมงที่ผ่านมา
1. useMemo as a way to reduce expensive computation during rendering. 2. key property will reset the state of a component and all of it's children Personal notes : docs.google.com/document/d/1GmhpkP0IllcyScedWtv7qnVSRNGCzEsq3Ri4y2LkehA/edit . . . . . . . . . #javascript #react #state #context #business #logic #web #app #technical #communication #browser #reference #virtual #dom
NeetCode : Two Sum
มุมมอง 12714 ชั่วโมงที่ผ่านมา
- Challenges? : 1 . Play with arithmetic (Foundational Math thinking, Thinking Forward & Backwards) - Reflections What's the information you want to store in your Data Structure? in this case a Hash. Personal notes : docs.google.com/document/d/1x-isa0WJqFKJUUL4CdudCud0bXllbMMRTbrmWd4a3MY/edit?usp=sharing . . . . . . . . #business #data #javascript #communication #web #application
NeetCode : Duplicates & Valid Anagram
มุมมอง 1314 ชั่วโมงที่ผ่านมา
Here I'm starting a Journey based on the @NeetCode roadmap, as a way to improve my - Technical communication and - Problem solving skill Topics needed in the Software Industry. Notes docs.google.com/document/d/1x-isa0WJqFKJUUL4CdudCud0bXllbMMRTbrmWd4a3MY/edit?usp=sharing . . . . . . . . . . #business #javascript #technical #communication #practice #interview #web #apps
React Performance : Anatomy of Effect lifecycle
มุมมอง 3514 ชั่วโมงที่ผ่านมา
Like Routing, Data fetching is not trivial. That's why we got solutions likes : - React-Query, RTK-Query for single React Apps. - Frameworks like Next.js, Remix, Gatbsy to do that. Personal notes : docs.google.com/document/d/1GmhpkP0IllcyScedWtv7qnVSRNGCzEsq3Ri4y2LkehA/edit . . . . . . . . . #javascript #react #state #context #business #logic #web #app #technical #communication #browser #refere...
React Performance : Synchronize Effect for analytics and data fetching
มุมมอง 4319 ชั่วโมงที่ผ่านมา
The effect anatomy : Setup - Cleanup phases will allow you to understand how React-query and data fetching works behind the scene. A.K.A. helps you to have a happy life as React Developer Personal notes : docs.google.com/document/d/1GmhpkP0IllcyScedWtv7qnVSRNGCzEsq3Ri4y2LkehA/edit . . . . . . . . . #javascript #react #state #context #business #logic #web #app #technical #communication #browser ...
React Performance : Synchronize Effect to build a counter & countdown
มุมมอง 2821 ชั่วโมงที่ผ่านมา
How would you build a : - Counter & Countdown in React?. Personal notes : docs.google.com/document/d/1GmhpkP0IllcyScedWtv7qnVSRNGCzEsq3Ri4y2LkehA/edit . . . . . . . . . #javascript #react #state #context #business #logic #web #app #technical #communication #browser #reference #virtual #dom
Artidev - Developer as a service powered with AI
มุมมอง 10วันที่ผ่านมา
Build my portfolio and my dev agency using Next.js. artidev.vercel.app/ . . . . . . . The methodology to continue to build my landing page #versoly #vercel #business #react #human #ai #javascript #landing #page
React Performance : How Effects fit into Rendering Mechanism?.
มุมมอง 26วันที่ผ่านมา
Effects allows you to run code after the screen updates. It follows the rendering mechanism like this. Trigger Render Commit Browser Paint Effect Runs Personal notes : docs.google.com/document/d/1GmhpkP0IllcyScedWtv7qnVSRNGCzEsq3Ri4y2LkehA/edit . . . . . . . . . #javascript #react #state #context #business #logic #web #app #technical #communication #browser #reference #virtual #dom
React Performance : Relationship between VDOM & useRef
มุมมอง 47วันที่ผ่านมา
useRef are useful for interact with external system like Browser API to built features like : - Carousel - Play/Stop Video Elements Use it sparingly. Otherwise it'll make your code hard to understand. Personal notes : docs.google.com/document/d/1GmhpkP0IllcyScedWtv7qnVSRNGCzEsq3Ri4y2LkehA/edit . . . . . . . . . #javascript #react #state #context #business #logic #web #app #technical #communicat...
React Performance : Relationship between Commit Phase & Virtual DOM
มุมมอง 45วันที่ผ่านมา
React Performance : Relationship between Commit Phase & Virtual DOM
React Performance : Interact with DOM Element using useRef
มุมมอง 4414 วันที่ผ่านมา
React Performance : Interact with DOM Element using useRef
React Performance : Describe UI, Add Interactivity & Manage State Overview in React
มุมมอง 2714 วันที่ผ่านมา
React Performance : Describe UI, Add Interactivity & Manage State Overview in React
React Performance : Useref a memory without re-rendering
มุมมอง 2414 วันที่ผ่านมา
React Performance : Useref a memory without re-rendering
React Performance : Context & Reducers in catalogs app
มุมมอง 1014 วันที่ผ่านมา
React Performance : Context & Reducers in catalogs app
React Performance : Context tradeoffs and example in a theme app
มุมมอง 2814 วันที่ผ่านมา
React Performance : Context tradeoffs and example in a theme app
React Performance : Context re-rendering
มุมมอง 2614 วันที่ผ่านมา
React Performance : Context re-rendering
React Performance : Context & Providers
มุมมอง 3321 วันที่ผ่านมา
React Performance : Context & Providers
React Performance : Preserve & Reset State with Reducer in a chat App
มุมมอง 3321 วันที่ผ่านมา
React Performance : Preserve & Reset State with Reducer in a chat App
React Performance : How ASYNC work with React States
มุมมอง 6921 วันที่ผ่านมา
React Performance : How ASYNC work with React States
React Performance - useReducer vs useState
มุมมอง 1721 วันที่ผ่านมา
React Performance - useReducer vs useState
React Performance - Recap of Core React Concepts
มุมมอง 1921 วันที่ผ่านมา
React Performance - Recap of Core React Concepts
React Performance - Share, Preserve & Reset State
มุมมอง 1421 วันที่ผ่านมา
React Performance - Share, Preserve & Reset State
React Performance - Choosing the State Structure practice
มุมมอง 2421 วันที่ผ่านมา
React Performance - Choosing the State Structure practice
React Performance - Managing State Structure Practice
มุมมอง 3521 วันที่ผ่านมา
React Performance - Managing State Structure Practice

ความคิดเห็น

  • @ervisfrend
    @ervisfrend 12 วันที่ผ่านมา

    hey , I’m no PHP whiz, right? But I’ve whipped up some apps in it, all without using any libraries. Now, I’m looking to get my hands dirty with React, but can’t find any resources that show how to mix it up with PHP. what do you know about it? , And, sorry if I sound like a PHP fanboy, it’s just that it’s so darn easy for me!

    • @eulier1
      @eulier1 12 วันที่ผ่านมา

      @@ervisfrend I got more experience with Laravel, where you can find solution like Forge that allow you to deploy SPA or SSR with React for your clients. It's quite interesting.

  • @Abdallah_Ismail
    @Abdallah_Ismail 19 วันที่ผ่านมา

    It's a cool video man but I'm like u I talk slowly so if u can make plot points and write them down or generate some from chatGPT will help u go onto the next thing faster and talk about each point with fewer words and more efficientally. The title really brought me here and it's a big topic u can chop it into smaller vids with a playlist or something, I'm looking forward to learning more from you please don't do it on one take say cut/action or whatever so in the editing remove all the pauses and keep me hooked to your video Yes it will take more of your time but that is just for now, do it right and soon you'll be hiring people to do the editing for u <3

    • @eulier1
      @eulier1 17 วันที่ผ่านมา

      Thanks for the recommendation, right now the goal is to be able to learn the fundamentals so when I need to explain to tech-savvy or non (like business people, users, shareholders), I can express my ideas in the most succinct way possible so I can help them to solve their problems faster.

  • @0xAquaWolf
    @0xAquaWolf 23 วันที่ผ่านมา

    fire content

  • @SexyB3ast
    @SexyB3ast หลายเดือนก่อน

    Chad

  • @ericaggrey
    @ericaggrey หลายเดือนก่อน

    I like you video

  • @shivamrawat6061
    @shivamrawat6061 2 หลายเดือนก่อน

    Great video. Keep on posting

  • @jesus_rp
    @jesus_rp 2 หลายเดือนก่อน

    "does it solve" or "did it solve"

    • @eulier1
      @eulier1 หลายเดือนก่อน

      They still figuring out better ways to do it, therefore "does it solve".

  • @shubham-mishra-okta
    @shubham-mishra-okta 2 หลายเดือนก่อน

    Please correct the access of Notes doc.

  • @shaheene3510
    @shaheene3510 2 หลายเดือนก่อน

    Great content brother! Is there anyway i could get your email? Would love to send you something!

  • @nonefvnfvnjnjnjevjenjvonej3384
    @nonefvnfvnjnjnjevjenjvonej3384 2 หลายเดือนก่อน

    React is awful. The API is one of the worst in modern programming history. The initial version was a gamechanger but things have steadily gotten worse since then.

    • @eulier1
      @eulier1 2 หลายเดือนก่อน

      It's a solution with it's tradeoff. For large companies it will make sense to use a full-fledged solution like Angular or Nest.js for servers. But it'll depend of business use case.

    • @nonefvnfvnjnjnjevjenjvonej3384
      @nonefvnfvnjnjnjevjenjvonej3384 2 หลายเดือนก่อน

      @@eulier1 yes but in terms of api react is convoluted and overly complex. mithril and others did a much simpler model of rerendering on end of function.

  • @omnimathic
    @omnimathic 2 หลายเดือนก่อน

    Amazing brother, keep it up!

  • @omnimathic
    @omnimathic 3 หลายเดือนก่อน

    Keep it up brother !

    • @eulier1
      @eulier1 3 หลายเดือนก่อน

      Ty, btw new emoji unlocked for me

  • @Tubprosagency
    @Tubprosagency 3 หลายเดือนก่อน

    Hello sir, Hope you are well .I have already visited your TH-cam channel (The Real Eulier) . and analysed the videos. Your videos are great & very nice but your video SEO and channel optimization are very low. This is a big problem. Because of this your video is not getting views, likes, comments, subscribers and is not going viral .Video uploading is very important for SEO and proper promotion. TH-cam channels need SEO and video promotion. If you want, I can create a report on your channel growth . I am waiting for your response. Thank you

  • @omnimathic
    @omnimathic 4 หลายเดือนก่อน

    Amazing brother, cool. Keep it up

  • @TheUMESH34
    @TheUMESH34 4 ปีที่แล้ว

    To hard work and to becoming the best version of ourself.

  • @ericlopezp.8200
    @ericlopezp.8200 5 ปีที่แล้ว

    Awesome!

  • @kevindanielpg
    @kevindanielpg 5 ปีที่แล้ว

    Hola hermano, no programo ni me interesa nada de eso, pero te apoyo en la odisea del aprendizaje, éxito, suerte y perseverancia.

    • @eulier1
      @eulier1 5 ปีที่แล้ว

      Gracias hermano de otra madre, que los exitos que siembres, pronto veas la cosecha.