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

[@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]

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]

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

[@LifeLoveAndMonads]

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

[@tomasvn09]

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

[@elmalleable]

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

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]

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

[@DevNhaX7901]

So cool!!!

[@LifeLoveAndMonads]

I really liked that trick myself :)

[@backupmemories897]

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]

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]

I dislike this title and thumbnail with my whole soul

[@LifeLoveAndMonads]

I feel your pain bro!

[@IvanAndrieiev]

Thanks! Interesting