How To Maximize Performance In Your React Apps

React Simplified Course: reactsimplified.com
Fixing performance bugs in React is difficult since so much of the performance of React is tied to re-renders and state management. This is why I love the profiler built into React dev tools since it does an amazing job of showing you everything you need to know about what is causing your app to be slow. In this video I explain exactly how to use the React profiler to maximize your performance.
📚 Materials/References:
React Simplified Course: reactsimplified.com
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:26 - Demo Application
01:45 - Basic Profiler Features
06:30 - Advanced Profiler Features
#ReactProfiler #WDS #ReactJS

[@ahmedsherif3116]

when I saw the title I jumped right away to watch ❤ keep it going your content is just perfect ❤❤

[@devsDojo]

This is lesser talked about. I'm glad that you brought them with such amazing explanation.

[@gosnooky]

Fantastico. The BIGGEST issue I see these days are people developing on state-of-the-art machines and don't bother to check performance on slow and older devices. This has huge implications if you want to target users in developing countries where most people are using older Android mobile devices with slow mobile connections (or even slow Wifi).

[@EricSundquistKC]

OMG, I've been using these tools all wrong! Thanks a million. 👍

[@arindam_chowdhury]

I have always wanted a thorough breakthrough of using the React profiler. Thank you so much!

[@ashishprasad1963]

breakdown*

[@aliplaysgtr]

Excellent information, thanks man!

[@Cannn414]

This is exactly what I am needing right now thank you

[@MaylorTaylor]

I would love a video on how to do optimize React apps with Webpack for both dev and production environments. There are so many plugins and tools to minify and condense code!

[@thisguy5718]

this is such a golden thing to learn , thank you

[@tririfandani1876]

Yes. More performance videos please

[@beefykenny]

Thanks for providing me with this delicious information today 💯

[@user-gm3lg8gp3m]

This is so valuable, thanks!

[@rayaqin]

it would have been a lot better if you removed a realistic issue that was slowing down rendering instead of a sleep function

[@blackswann9555]

Nice thanks Kyle! 😊

[@uridevmedia]

Thanks for this Kyle 🤝

[@avikroy1236]

Checked your project...nice for every kind of functionality and hook practice

[@gerryramosftw]

this is great! thank you!!

[@moonlightCR7]

Thank you so much Kyle, This is the video I was looking for. ❤from Pakistan

[@thefuntech2810]

Whole video explaination is going bounce from my head 😅😅

[@IvoTsochev]

great video as always, thank you WDS

[@jnsjknn]

This is great. Would you make a video about compression and other things affecting PageSpeed Insights Score / SEO?

[@eminm6383]

If you use lazy loading in react, you will get really good score.

[@jnsjknn]

@@eminm6383 it sure helps but there's other things too

[@sc76399]

As a react Dev for 5/6 years the profiler if about the only thing I've never really used or understood the graph it displays

[@Pavel_k7]

Is there any way to use it with next js projects?

[@fpvba]

Wooow, thank you broooo!!!!)))

[@vi1818]

Can you do a video on how to optimise the cold start time using nextjs ssr?

[@investneur8232]

Fnatastic video..should we use lighthouse or react profiler for undersatynding perfromance issues in react appaclition ?

[@Blue-bb9ro]

Awesome!

[@27sosite73]

ty mate

[@zakidzz]

hi can you do a vedio about costumizing shad cn an advanced course about iy

[@NavySturmGewehr]

Do you have anything that deals with arrays of state? I'm really struggling with state management for arrays of objects.

[@rishadali2866]

What type of state management I'm also learning web dev wanna connect

[@palyanytsia]

That's 😍 amazing

[@theidanking]

thank you! but dam 84 times render for each cycle about 20ms that's so slow, In my university I calculate instructions that take pc or ns, not ms. Is there not an option to make it render fewer times? it sounds so much and only for a table

[@aurobindobhuyan2107]

Nice video

[@ziontutorial]

can you make how to debug from source debugging technique react app from chrome dev tool .

[@valeedification]

btw which table library did you use in this project?

[@moonlightCR7]

bro pretty much all the popular libraries have a table component.

[@pottaz]

This is a great video. I almost unsubscribed to this channel because of all the clickbait thumbnails with you "screeming" etc. No need for that. Keep to this great content and thumbnails that make sense.

[@babayaga6172]

Please make a video on million js implementation with react Vote up 🖐️

[@akahades11]

anyone knows why react developer tools not working for next app dirr ?

[@gg.cip0t]

i am learning ant design, do you have any suggestion if i should continue or learn other thing???

[@amershboul9107]

👏👏

[@kalen658]

"While others are incredibly slow" *clicks on link, it almost immediately loads 😂

[@lallenfrancisl]

Such a good video but very low number of views

[@hamedmatari2577]

wow ,now I can make my application faster

[@rafa6536]

How? By using server side scripting language, awesome now, PHP, with the Symfony framework and with a little extra in Hotwire Stimulus and Turbo! Turning JSON into HTML using JavaScript is crazy way of doing things to me ;)

[@sambathravi6580]

Please make video for this. In react when i type first letter in input is losing focus😢😢😢😢😢😢

[@kerimtim]

Kyle. Can you please make Laravel videos?

[@alexanderten9540]

The second part is about async await construction. I still don't know how this construction seems while debugging. Try please

[@ShivamPandey-mw5zh]

1k th like😃

[@sjadev]

Just get another guitar stand Kyle

[@premlakshaygodara612]

First comment

[@kalilinux8682]

Watching this feel wrong. We need AI stuff!!

[@pbehera281]

I just don't like to use react of anything

[@shubitoxX]

The best performance hack is not to use react.

[@nested9301]

i was about to say that xD

[@ymh_7885]

You doing very great content, but stop moving your head lol that really embarrassing.

[@xxXAsuraXxx]

React is deprecated

[@FunctionGermany]

wrong

[@FG-td4vs]

lmao, ok

[@Dev-Siri]

for you ig

[@Like_a_lion_744]

Plot twist - you realize that React is bs, and start using Vue. Congrats, you are sane person now!

[@null_spacex]

Go away

[@Dev-Siri]

You realize you are still the same person and still insane. Congrats, you are insane person now!

[@mehedi-kun]

How To Maximize Performance In Your React Apps? Just ditch React!