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
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?.. 🤔
Its much easier than that. Just use the chrome debugger that detects any changes on the UL element. No code needed.
@LifeLoveAndMonads
2 ай бұрын
How would you use chrome debugger to detect any changes on the ul element?
@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
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
Ай бұрын
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!
hum... that... will be very helpfull for me.. thanks o.O
So cool!!!
@LifeLoveAndMonads
2 ай бұрын
I really liked that trick myself :)
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
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
I dislike this title and thumbnail with my whole soul
@LifeLoveAndMonads
Ай бұрын
I feel your pain bro!
Thanks! Interesting