fullctx-highimpact-frontend-daily #2
React Rendering Performance and Next.js Security
Hey Full Context Developers,
Welcome to the next High Impact Frontend daily post. We are exploring some recent news about React and Next.js today.
About the system: If you need introduction to my scoring or impact analysis systems, check out any of the recent weekly releases (for example this), and the generic introduction post.
Why React Re-Renders
🏆 News of the Day 🏆
📊 16 Points: Hype 4 x Value 4
There are only two ways for improving the performance of a React application, by eliminating unnecessary renders and minimizing total payload size. That’s why understanding the rendering behavior of React is an important - and tricky - task.
The full name of the article is: The Interactive Guide to Rendering in React and it fully lives up to that. It’s one of the best illustrated and most thorough material about this topic I ever found. And I mean it, not trying to hype it up.
Here are some (and far from all) of the covered topics:
What is rendering?
When exactly does React re-render a component?
Batching: how React calculates state
Why we can't just assume that a component only re-renders when its props change.
It’s funny that after reading like 80% of the article with resolve to learn how to eliminate every little unnecessary re-render it also tells us this:
React is very good at rendering. If you have a performance problem, the reality is it's rarely because of too many renders and if it is because of too many renders, you're most likely doing something wrong.
Well, I guess it’s good to know at least for interviews then?
Who should care?
➡️ Every React developer, but especially those who are building Level 2 and above web-complexity projects where the user perceived performance directly affects business results.
Which Impact Factors can this affect?
➡️ This is all about Customer Experience as the result of performance optimization is experience optimization. If you are struggling with this topic it can improve Productivity a little bit as well.
Best case impact:
Customer Experience - System | Productivity - Unit
Eliminate Flickering From React Apps
📊 16 Points: Hype 4 x Value 4
I hate it when Cumulative Layout Shift ruins my first experience of a website and so does you! I hate it even more when I’m the one creating such a site.
I had some tough times figuring out how to eliminate or reduce that flickering and this article succinctly called: Say no to "flickering" UI: useLayoutEffect, painting and browsers story gives us the knowledge and tools required to do just that!
The main topics include:
How to change elements based on DOM measurements
What is the problem with useEffect
How useLayoutEffect fixes it
What is browser painting
How SSR plays a role
Who should care?
➡️ Every React developer regardless of the web-complexity level of their projects but especially those who work on products where a smooth user experience directly affects business results.
Which Impact Factors can this affect?
➡️ It seem this article and the previous one are in a similar category. This one too is all about Customer Experience as it’s about directly improving the UX of websites and apps. If you are struggling with a similar task, it can improve Productivity a little bit as well.
Best case impact:
Customer Experience - System | Productivity - Unit
Securing Your Next.js 13 Application
📊 12 Points: Hype 4 x Value 3
To be honest, now that I’ve been playing a lot with ChatGPT I can’t help but feel like this article is AI generated. (What’s your impression?) Nonetheless, it’s a nice introduction to securing a site using HTTP Headers and mitigating Cross Site Request Forgery.
You get Next.js specific code examples and a short introduction to each component like:
Content-Security-Policy
Referrer-Policy
Strict-Transport-Security
X-CSRF-Token based mitigation
Who should care?
➡️ Mostly developers using Next.js but it’s not too framework specific so if you are interested in these security topics you can take away something. The same can be said about projects of course depending on the criticality of security needs.
Which Impact Factors can this affect?
➡️ Security is a “silent“ contributor to Customer Experience. It’s generally unnoticed, and if you are lucky you never get to experience the level of “improvement" it offers in this regard. However when things hit the fan because of a breach, that’s the time the drastic contribution of security measures can really be felt. If you are struggling with a similar task, it can even improve Productivity by a little bit.
Best case impact:
Customer Experience - System | Productivity - Unit
Wrapping Up
If you enjoyed this High Impact Frontend daily post and/or found it valuable please consider sharing it with your friends and colleagues. It’s a huge help to keep this newsletter running! (Not financially, but through the motivation it gives me. 😎)
See you in the next one!
Joe @fullctxdev