Top 5 Things in Web This Week: From Vibe Coding to React Reconciliation

Here's what you missed about Vibe Coding, React, AI, Front End and Epic Web Conf this week.

If you open this newsletter all the time, if you forward to your friends and co-workers, if it challenges you to think in new and different ways — consider subscribing.

What is Vibe Coding and how can you use it for side projects?

Vibe Coding = coding without even lifting a finger.

You let AI take control of the code it generates, fix the code for you, handle type stuff, and change the code based on what you want. Sure, that sounds like a lot of trust to put in AI, but it's super helpful when you want to stop procrastinating and actually build side projects. I explain it in a video, showing how to vibe code with a cool new tool called Convex Chef. You can check out Convex Chef here.

💛 Big thanks to Convex for sponsoring this week’s issue!

Convex Chef is exactly the tool we need for Vibe Coding right now.
It helps you build full-stack apps without writing a single line of code. Real-time syncing? Handled. Auth? Done. Multiplayer preview? Built-in.

I’ve been using it to quickly spin up apps for my own side projects — the ones that usually get stuck in procrastination limbo and end up collecting dusts in my notepad. If you want to stop procrastinating and get your app built in a few clicks, give it a try: https://bit.ly/convex-chef

My Top Picks This Week

1. Understanding React Reconciliation. Link

   1. React's reconciliation algorithm updates the DOM by comparing new and previous element trees, figuring out components mainly by type and position in the tree.

   2. Keeping state close to where it's used and breaking components into focused pieces naturally makes performance better by limiting what needs to re-render.

   3. Component state sticks around when the same element type appears in the same position, even with different props; keys can override this position-based system.

   4. Don't define components inside parent components - changing function references make React treat them as totally new components that need remounting.

2. When is memoization in React not helpful? Link

   1. React's memoization tools (React.memo, useMemo, useCallback) are often misunderstood — memoizing props alone doesn't stop child components from re-rendering unless the child is wrapped in React.memo.

   2. React compares objects, arrays, and functions by reference, not value — when a component re-renders, all local variables get new references, which can trigger unnecessary re-renders or effect runs.

   3. Memoization has several hidden gotchas: spreading props can break memoization, JSX children need their own memoization, and nested memoized components need special care to keep the optimization benefits.

   4. Component composition is often a better performance solution than memoization — moving state to more specific components naturally prevents unnecessary re-renders without adding complexity.

If you are new to React or want to become an expert in React, I made a comprehensive course on React to help you build React applications faster and understand memoization and reconciliation

Learn React Fundamentals in this O’Reilly React course

3. How AI is helping Front End Development?

   1. AI agents are evolving from tools to teammates — going beyond autocomplete to actively refactor code, enforce design systems, and suggest accessibility or performance improvements.

   2. They make frontend development smarter and faster by learning from codebases, user behavior, and design patterns — helping devs focus on the important stuff instead of repetitive tasks.

   3. Collaboration is changing — agents can now generate PRs, turn designs into code, and connect design and development in real time.

   4. Challenges still exist, like trust, transparency, and keeping human creativity alive, but AI-powered frontend workflows are already happening.

4. What is a Model Context Protocol Server? Link

   MCP is a protocol that helps AI models interact with external tools, systems, or environments in a structured, secure, and scalable way. Think of it like a middle layer that helps AI agents "talk" to APIs, databases, or other services — with context. An MCP Server lets AI agents

   1. Call APIs with structured parameters

   2. Query databases safely

   3. Act on the user’s behalf with constraints (auth, permissions, etc.)

   4. Maintain memory or session state over multiple steps

   5. Compose multi-step workflows, like chaining together different tools

5. Writing better blog posts. Link

   In order to write a blog post that captures audience’s attention, the author, Michael Lynch, has highlighted a few techniques -

   1. Grab attention fast: Start with a clear benefit and signal relevance to the reader within the first few sentences—don’t bury the point under backstory.

   2. Think bigger: Slight tweaks in language or scope can make your post relevant to a much broader audience without diluting your message.

   3. Plan your distribution: Don’t rely on Google or luck—pick topics that have a realistic path to being shared on platforms like Hacker News, niche subreddits, or forums.

🔥 News from me

• I officially quit my 9–5. 🎉 I’m now a full-time content creator. As Hitesh Choudhary would say, I am a retired corporate worker. Wish me luck! I need it.

• Just dropped a fireside chat with Tanner Linsley. We talked about open source, community, and his latest project — TanStack Start — and how open source contributions have been crucial for Tanner and Nozzle, helping him understand the gaps in tech and carve out a space for himself. He also opened up about his personal struggles and feelings of doubt.

• I spoke at Epic Web Conf — a conference organized by Kent C. Dodds and his amazing team — on Building Accessible Web Applications. What an incredible experience! I loved hanging out with everyone, catching up with friends, and sharing my knowledge on building accessible web apps.

  Missed the conference? Here's a highlight reel I put together.

• I took a week off, left my laptop behind. It felt weird. Also felt amazing!
  Check out the photo dump: https://www.instagram.com/itsshrutikapoor/

Not-So-Mundane Poll

This newsletter is possible because of your support ❤️

You can offer support in multiple ways!

1. Become a Premium Subscriber: Upgrade to a paid subscription and get exclusive benefits including early access to all my e-books, open source projects and private Discord.

2. Become a GitHub Sponsor: Love the work I am doing? Consider sponsoring my work on GitHub to help me continue building useful open source tools and educational content for the community. Become a sponsor →

3. Spread the Word: Can't contribute financially? No problem at all! You can make a huge difference by sharing this newsletter with your friends.

• Subscribe on YouTube

• Share on Twitter

Your support, in any form, helps me continue creating valuable content for developers worldwide. Thank you!

Let's Connect!

• YouTube: https://www.youtube.com/@shrutikapoor08

• Book a mentorship session: https://topmate.io/shrutikapoor08

• Join our FREE community on Discord: bit.ly/shruti-discord

• X / Twitter: @shrutikapoor08

• Instagram: @itsshrutikapoor