This is CSS performance problem I see all too often. The React website has some jank due due to their use of transition. Here is how to find what causes it and how and fix it

I cant believe I'm just seeing this. Had no idea it was so unoptimized. Feel so embarrassed for reaching for transition-all so regularly 🤦‍♂️ Never again! Thanks for sharing!

It goes to show you, being able to solve all Leet code and pass interviews won't stop you from still doing this kinda stuff at work 🤣🤣🤣

Great demonstration of the problem 👏 and solution.

Great find. But why can’t the browser do this optimization under the hood? 🤔

No transition on the shadow anymore though🥴 it justs blinks on/off

Let’s pretend we didn’t see the shadow

I’m lazy and always go all

Wow. I’ve been using “all” for years not even considering the performance impact. In hindsight, it’s so obvious. Thank you.

Very cool! TIL browser doesn't know how to track only properties that change

Hmm... But actually the box-shadow is no longer transitioning, which looks very awkward. I am not 💯 but I don't think the "all" is the crux of the issue here and the solve was more of a side effect similar to removing the transition altogether.

Great video 📸 Wes is a professional jank finder 🔍

Yep always best to avoid transition all. It's definitely the box shadow that's killing it. If you wanted to keep the shadow animating, it should be in a pseudo element and transition opacity on hover

3x4 aspect ratio video?!? What wizardry is this!?! Thanks for the tip.

love it, thank you 😎

These kind of problems need to be squashed as they are found.

For me it's rare to "transition" anything other than the "transform" property

Probably a cursor tab for a transition property which it loves to do

bröther, the box-shadow transition was causing the lag, not what you said in the video

simple and effective!

wesbos love your tutorials, but is using no-transitions really a viable solution for React

Thanks for sharing

Over-reliance on transitions can indeed hinder performance, but exploring alternative animation techniques like Web Animations API might offer smoother results.

Thanks for the tip Wes!

I would start my poultry business

React = 1000% JUNK

I didn't expect that drop in performance; thanks for the tip. How can I show that info square in the top left corner?