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
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.
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.
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.
Here's how it works 👇
And get thoughtful letters 💌 on mindsets, tactics, and technical skills for your career. Real lessons from building production software. No bullshit.
"Man, love your simple writing! Yours is the only newsletter I open and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. 👌"
Ready to Stop copy pasting D3 examples and create data visualizations of your own? Learn how to build scalable dataviz components your whole team can understand with React for Data Visualization
Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.
Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first 💰 on the side with ServerlessReact.Dev
By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❤️