Hello React Performance and Goodbye CRA! This Week in React & Web Dev
React Scan, useRef and How BlueSky Works - Keep Up With React & Web Dev News This Week
1. React Scan: Performance Optimization
Benefits: Identifies render bottlenecks, unnecessary re-renders, and components with excessive prop changes
Integration Options: Works with major testing frameworks and can be incorporated into CI/CD pipelines
Real-time Monitoring: Enables live monitoring during development to catch performance issues early
Visualization Tools: Provides heatmaps and component trees to visualize performance hotspots
Learn how to pinpoint slow components in your React applications with this comprehensive tutorial
2. Create React App (CRA) is Officially Deprecated
CRA has been officially deprecated, which means now is the time to transition to alternative React app building approaches.
Announcement Coverage: I shared details about this significant change in this explanatory video
Migration Example: I demonstrated converting a React 15 app from CRA to Vite in a recent livestream
Alternative Migration Paths:
Nx: A comprehensive monorepo build system offering powerful tooling for React applications and scaling projects
CRA for TanStack Router: Need React and TanStack Router? Jack Herrington provides an excellent walkthrough of create-tsrouter-app in this detailed tutorial
3. Bluesky's Architecture Deep Dive
Explore how Bluesky's decentralized federated architecture system works, including their intentional packet loss implementation in this detailed system design newsletter explaining Bluesky's architecture
Bluesky's federated approach is powered by ATProto (Authenticated Transfer Protocol) that powers which distribute messages to each other. “Imagine ATProto as Disneyland Park and Bluesky as one of its attractions. A single ticket is enough to visit all the attractions in the park. And if you don’t like one of the attractions, try another one in the park.”
Each user post is stored in a repository which are then stored on data servers and scaled up to set up as many data servers as needed. The data server acts as a proxy for all client interactions
The way content is displayed is interesting:
A crawler generates a stream from data servers.
The feed generator, a separate service, ****consumes the stream.
The feed generator filters, sorts, and ranks the content based on custom logic.
The feed generator creates a list of post IDs.
The index server then populates the feed’s content on a user request.
4. Signals in React
Signals can reduce unnecessary re-renders by only updating components that directly consume changed values. You can implement reactive programming patterns with signals in React applications.
Preact Integration: This video tutorial shows how to leverage signals with Preact
Future Standards: Review the TC39 Signals Proposal to understand how this pattern may become standardized
5. Framer Awards are announced!
Looking for inspiration for your next UI project? Framer awards are here! The Framer Awards showcase exceptional design work for your next UI project.
I love Ivan Garcia's design for Flighty.com with its innovative product storytelling through interactive animations featuring weather conditions, flight visualizations, and thoughtful UX experiences.
The Framer Awards feature categories including Best Portfolio, Best E-commerce, Best App, and Most Innovative Interface
This year's winners showcase minimalist interfaces with thoughtful microinteractions and subtle animations
Bonus: Mastering useRef
useRef can be used to store data in React without causing re-renders since anytime useRef updates, React does not re-render the app. However, it is not an alternative to useState.
You can use useRef for advanced patterns for form validation and focus management with useRef
One of the most common use case of useRef is to perform DOM manipulations
News from Me ❤️
🎉 Join me Friday, Feb 28, 2025 at 10:30 AM PST, on YouTube to celebrate 3000 subs! THANK YOU to everyone who made this happen! I will be -
🔥 Giving away A FREE React Coding Interview Guide
👀 Doing resume reviews
✅ Answering your questions
…all while making chai—Shruti style!
❤️ Fireside Chat with Cassidy Williams
If you have ever wondered how to get paid for your hustle, watch this episode where Cassidy talks about getting paid for your work
🎙 Podcast Feature
I joined Danny Thompson & Leon Noel on The Programming Podcast to chat about gettinmg a job in tech, switching up careers, networking in tech, React 19, and keeping up with tech watch here.
Support the Tribe ❤️
You can offer support in multiple ways!
Becoming a paid member - you get early access to my FREE e-books, including FREE React Interview Guide
Sponsoring me on Github to help support my open source work
If you can’t pay anything, no worries! Share this newsletter on your socials and subscribe to my youtube channel.
And now, a mundane poll …
Let’s be social
See you Friday! ☕🔥
Discord: bit.ly/shruti-discord
X / Twitter: @shrutikapoor08
Instagram: @itsshrutikapoor