Simple technique for your React app you NEVER heard about!

Ғылым және технология

In this video I show you how I used an interesting tip from amazing article by Alan Norbauer, to inspect elements from an autosuggest component in my React application.
You can find an original article with lots of other interesting tips here: alan.norbauer.com/articles/br...
Update: I just realised that in the React code example I wrap setTimeout inside Promise. Not sure why I did it, but you do not need to wrap in Promise, since setTimeout will schedule a macro-task anyway.
You can reach out:
Discord: / discord

Пікірлер: 17

  • @tiagosutter8821
    @tiagosutter8821Ай бұрын

    Great idea this setTimeout one, I usually use 'Break on subtree change' options to do the same, but this is very creative indeed, thank you

  • @LifeLoveAndMonads

    @LifeLoveAndMonads

    Ай бұрын

    Idea is not mine as I have mentioned, but I think it is clever indeed. Maybe the guy came up with it before that "Break on subtree change" was introduced?.. 🤔

  • @ccl4636
    @ccl46362 ай бұрын

    Its much easier than that. Just use the chrome debugger that detects any changes on the UL element. No code needed.

  • @LifeLoveAndMonads

    @LifeLoveAndMonads

    2 ай бұрын

    How would you use chrome debugger to detect any changes on the ul element?

  • @tomasvn09

    @tomasvn09

    2 ай бұрын

    @@LifeLoveAndMonads I would select in this case the input in devtools > right click > break on > subtree modification > use debugger to step over :)

  • @elmalleable

    @elmalleable

    2 ай бұрын

    @@LifeLoveAndMonads by putting a break point on the line instead of adding debugger through code. just a different way of doing the same thing, plus it doesnt leave any code behind that has to be cleaned up

  • @LifeLoveAndMonads

    @LifeLoveAndMonads

    Ай бұрын

    I've tried it and first of all I haven't heard about that option before, so thank you for that. I see that I need to skip few stops because it triggers a lot, even before the suggestions list appears. But overall this is great advice!

  • @gilneyn.mathias1134
    @gilneyn.mathias11342 ай бұрын

    hum... that... will be very helpfull for me.. thanks o.O

  • @DevNhaX7901
    @DevNhaX79012 ай бұрын

    So cool!!!

  • @LifeLoveAndMonads

    @LifeLoveAndMonads

    2 ай бұрын

    I really liked that trick myself :)

  • @backupmemories897
    @backupmemories8972 ай бұрын

    I just place my breakpoint and hit f5 on my angular project at vscode and edge will show up and breakpoint will hit on the line u put ur breakpoint at xD and it also shows at vscode the variables xD i dont like adding extra code just to hit a breakpoint..

  • @LifeLoveAndMonads

    @LifeLoveAndMonads

    2 ай бұрын

    Thats very nice, I almost never use debugging, since React code most of the time allows you to reason without debugging, or I just use console.log to see the actual data here and there. But the described trick works for other websites, when you cannot put a breakpoint in VS Code. One comment mentioned that you don't even need to do that, since Chrome can help you with that somehow, but they never provided an example. Since if that was about adding "breakpoint on subtree change" then unfortunately I cannot agree that it works for this use case

  • @solvedfyi
    @solvedfyiАй бұрын

    I dislike this title and thumbnail with my whole soul

  • @LifeLoveAndMonads

    @LifeLoveAndMonads

    Ай бұрын

    I feel your pain bro!

  • @IvanAndrieiev
    @IvanAndrieiev2 ай бұрын

    Thanks! Interesting

Келесі