Back in 2016 React performance was top of mind. Sure React makes life easy, but is it worth it?!?
You have the DOM abstraction, the synthetic event system, the weird reconciliation, the batching of DOM updates, the … there’s a lot going on. Can it really be faster than vanilla? [^1]
I devised a devilish plan. An example to end all examples.
Folks from the community ❤️ helped me fix some trigonometry and the React Fractals demo became interactive:
Feel the computer struggle to keep up. Feel it! 😈
Here’s the exact same code 4 years later. No changes, no library updates, nothing.
Try for yourself: https://react-fractals.now.sh/
PS: you can read and share this online
Why fractals are bad
I remember making those gifs in 2016. Had to move my mouse veeeeery carefully so they came out okay. 😅
My machine was a respectable first-gen MacBook Pro retina. Getting up there in age but a very respectable computer with the maxed out specs. [^2]
Here’s the problem:
Fractals are recursive.
<Pythagoras>[^3] component renders 2 more. The angle calculations are memoized for each level to save time[^4]. Still this is a terrible case.
Recursion means that every render has to re-render every element. They’re all dependent.
At the maximum recursion level of 11 that’s
2^11 = 2048 SVG elements that React and your browser have to re-render in real time on every mouse move.
Well, not every mouse move – we throttle to React’s pace of state updates:
Mouse move events fire multiple times per frame, which means you can swamp the CPU with calculations you’re not even drawing. You can use the
this.running trick as a lock to prevent flushing multiple
setState events before they finish.
This worked in React 16.3.
With concurrent mode in the future this becomes trickier.
Why this code works so well in 2020
Imagine my surprise when I go to see if React’s concurrent mode makes this faster and it’s already smooth as butter.
A few things happened since 2016 my friend.
Computers got faster too.
We might not be getting record breaking CPU gigahertz every year, but Moore’s Law is far from dead.
My current computer is a 16″ MacBook Pro. Same 16GB of RAM, less speed per core at 2.4GHz – but there’s 8 of them instead of 4. And the RAM chips are faster and the motherboard is faster and everything around the CPU is faster.
While my code stayed the same my environment got faster.
That’s the beauty of working on the web. Your work keeps improving all on its own.
Why webapps keep getting slower
Before you ask why the web feels slower and slower despite these wonderful advances in computing and browser technology …
… because nobody’s waiting. They keep adding shit.
Sit back and relax my friend. You don’t need the new feature. You don’t need the next shiny. Chill.
Let your environment make your code better.
[^1]: technically React can’t be faster than vanilla because there’s a layer of overhead. Your manual solution will be faster if you’re crazy careful. Most likely it’s going to end up slower and messier or you’ll end up reinventing React.
[^2]: maxed out specs for my computer in 2016 were a quad-core 2.7Ghz processor with 16GB of RAM. 🤘
[^3]: this is a pythagorean fractal at core. Also known as the Khoch Curve when it wiggles like that. Names after Pythagoras because the noncurvy (45deg) version encloses a right triangle between each 3 points.
[^4]: each level of recursion renders multiple squares. Hundreds towards the end. They all have the same angles relative to the parent square so we can avoid calculating each one by memoizing the function.
Learned something new? Want to improve your skills?
Join over 10,000 engineers just like you already improving their skills!
Here's how it works 👇
PS: You should also follow me on twitter 👉 here.
It's where I go to shoot the shit about programming.