エピソード

  • Why Your React App Renders Twenty Times on First Load

    Why Your React App Renders Twenty Times on First Load
    2026/06/06
    Lucas and Luna break down a common performance trap in React applications: excessive re-renders on initial page load. They trace the problem from a developer's console warning about 22 renders in under two seconds to the root cause — misuse of useEffect and stale closure patterns. Using a concrete example of a dashboard app fetching three unrelated API endpoints, they show how improper state batching and missing dependency arrays cause cascading re-renders that bloat render time from 200 milliseconds to nearly four seconds. The episode walks through React 18's automatic batching, the difference between urgent and non-urgent updates, and a practical migration path from useEffect to useSyncExternalStore for data subscriptions. Lucas references a real-world case where a SaaS team cut initial render count from 37 to 4 by splitting one component into three micro-components and switching to React Query for caching. Luna adds a note on React DevTools profiler output and how to interpret the flame graph's 'why did this render' tags. The conversation ends with a forward-looking note on React Forget, the compiler that aims to automate memoization in React 19. #React #ReactPerformance #ReRenders #useEffect #React18 #React19 #ReactForget #useSyncExternalStore #WebPerformance #Frontend #JavaScript #ReactDevTools #StateBatching #StaleClosures #ReactQuery #Memoization #FexingoBusiness #BusinessPodcast Keep every episode free: buymeacoffee.com/fexingo
    続きを読む 一部表示
    8 分
  • Why Your Monorepo CI Pipeline Runs Twice as Slow with NPM Workspaces

    Why Your Monorepo CI Pipeline Runs Twice as Slow with NPM Workspaces
    2026/06/06
    Episode 34 of The Web Development Podcast with Fexingo dives into a subtle but costly performance trap in monorepo setups: NPM workspaces' dependency hoisting logic that silently duplicates installs across CI cache layers. Lucas breaks down a real-world case where a 15-package monorepo's CI pipeline took 11 minutes per build—almost double what it should be—because npm's hoisting algorithm didn't play well with GitHub Actions' cache keys. He walks through the exact `npm ls` commands to detect the duplication, explains why pnpm's content-addressable store avoids the problem entirely, and shares a minimal `node_modules` traversal script to validate your own hoisting. Luna pushes back on whether the switch to pnpm is worth the migration cost, and Lucas offers a pragmatic middle path: pinning cache keys to the lockfile hash and using `--install-strategy=nested` to force local installations. The episode ends with a concrete checklist for any team running a monorepo on NPM today. #Monorepo #NPMWorkspaces #CIPipeline #DependencyHoisting #GitHubActions #CacheKeys #Pnpm #NodeModules #npmLs #Lockfile #InstallStrategy #BuildPerformance #DevOps #WebDev #Technology #FexingoBusiness #BusinessPodcast #WebDevelopmentPodcast Keep every episode free: buymeacoffee.com/fexingo
    続きを読む 一部表示
    11 分
  • Why Your Database Indexes Are Slowing Your Queries

    Why Your Database Indexes Are Slowing Your Queries
    2026/06/05
    On this episode of The Web Development Podcast, Lucas and Luna dig into a counterintuitive database performance trap: the index that looks helpful on paper but quietly degrades your write throughput and even some reads. Lucas walks through a real-world case from a mid-size e-commerce platform where adding a composite index on order status and created_at made the nightly batch job run 40 percent slower. They explain how B-tree depth, index selectivity, and write amplification interact, and why a multi-column index that seems perfect for a query can actually force the database to scan more pages than a full table scan. Luna shares a story about a PostgreSQL query planner choosing a bitmap scan over a perfectly good single-column index because the statistics were stale — and what the team did to fix it. They also cover practical tips for monitoring index bloat, using pg_stat_user_indexes, and knowing when to drop an index entirely. If you've ever added an index and seen no improvement, or worse, a regression, this episode is for you. #DatabasePerformance #PostgreSQL #Indexing #QueryOptimization #WebDev #Technology #FexingoBusiness #BusinessPodcast #Backend #SQL #BTree #WriteAmplification #IndexBloat #pgStatUserIndexes #CompositeIndex #BitmapScan #EcommerceBackend #DatabaseTuning Keep every episode free: buymeacoffee.com/fexingo
    続きを読む 一部表示
    8 分
  • Why Your Web App Fails Silent Data Corruption

    Why Your Web App Fails Silent Data Corruption
    2026/06/05
    Episode 32 of The Web Development Podcast tackles silent data corruption in web applications — the bug that doesn't crash, doesn't log, but slowly poisons your database. Lucas and Luna walk through a real-world case: an e-commerce site where price rounding errors cost $80,000 before anyone noticed. They explain how JavaScript's `Number` type behaves in financial math, why SQLite and Postgres handle decimal data differently, and the single test pattern you can adopt today to catch it. If you've ever seen a $0.01 discrepancy or a checkout total that felt 'off', this episode will change how you think about data integrity on the front end. #SilentDataCorruption #JavaScript #FloatingPoint #DecimalMath #Postgres #SQLite #ECommerceBug #DataIntegrity #WebDevelopment #Frontend #Backend #NumberType #RoundingErrors #Testing #SoftwareBugs #FexingoBusiness #BusinessPodcast #TechPodcast Keep every episode free: buymeacoffee.com/fexingo
    続きを読む 一部表示
    11 分
  • Why Your GraphQL Server Is Fetching the Same Data Three Times

    Why Your GraphQL Server Is Fetching the Same Data Three Times
    2026/06/04
    In this episode, Lucas and Luna dive into a common but often invisible performance bug in GraphQL APIs: the N+1 query problem in resolvers. They break down how a single GraphQL query can trigger dozens of redundant database calls, using a concrete example of a blog with authors and comments. Lucas explains batching and DataLoader as a fix, walks through the mechanics, and shares a real-world case where a team reduced API latency by 80 percent with one library swap. They also discuss how to detect the problem early with Apollo Studio and query logging. No hype, just practical debugging for your stack. #GraphQL #APIOptimization #DataLoader #NPlusOneProblem #WebPerformance #NodeJS #Backend #ApolloServer #DatabaseQueries #WebDev #FexingoBusiness #BusinessPodcast #Technology #SoftwareEngineering #Coding #WebDevelopment #PerformanceOptimization #TechTips Keep every episode free: buymeacoffee.com/fexingo
    続きを読む 一部表示
    11 分
  • Why Your WebSocket Backpressure Is Silently Crashing Your Server

    Why Your WebSocket Backpressure Is Silently Crashing Your Server
    2026/06/04
    Episode 30 of The Web Development Podcast with Fexingo dives into a common but invisible backend problem: missing WebSocket backpressure. Lucas and Luna explain why most WebSocket servers lack built-in flow control, how this silently grows memory buffers until a crash, and what a real-world fix looks like. They walk through a concrete case: a chat server that held 200MB of pending messages per client, triggered a 500ms GC pause, and took down a production app. You'll learn how to detect backpressure failure using a single Node.js metric and why a simple 'isWritable' check can prevent the entire class of failure. No jargon — just a practical pattern you can apply today. #WebSocket #Backpressure #NodeJs #FlowControl #MemoryLeak #GarbageCollection #ServerCrash #RealTimeApps #ChatServer #WritableStream #DrainEvent #ProductionDebugging #WebDev #Technology #FexingoBusiness #BusinessPodcast #WebDevPodcast #Episode30 Keep every episode free: buymeacoffee.com/fexingo
    続きを読む 一部表示
    11 分
  • How Your HTML Streaming Is Blocking First Byte

    How Your HTML Streaming Is Blocking First Byte
    2026/06/03
    Lucas and Luna dive into server-side rendering's hidden bottleneck: HTML streaming. They break down why most developers see Time to First Byte balloon from 200ms to over a second, explaining how traditional render-to-string blocks the response until the entire page is generated. The episode centers on a real-world case: a SaaS dashboard that dropped from 1.2s TTFB to 340ms by switching to React's renderToPipeableStream. They explore how Node.js backpressure, chunked transfer encoding, and Suspense boundaries interact — and why many streaming implementations accidentally serialize chunks instead of piping them. Listeners learn a specific diagnostic technique: measuring the time between the first byte of the HTML open tag and the first content to detect accidental buffering. The conversation also touches on edge cases: what happens when a downstream database call is slow and how to fall back gracefully without breaking the stream. No fluff, just a focused technical deep dive into one of the most misunderstood performance levers in modern web frameworks. #WebPerformance #HTMLStreaming #TTFB #ServerSideRendering #React #NodeJs #Backpressure #ChunkedTransferEncoding #StreamingArchitecture #FrontendPerformance #Technology #WebDev #Suspense #RenderToPipeableStream #SaaS #Latency #FexingoBusiness #BusinessPodcast Keep every episode free: buymeacoffee.com/fexingo
    続きを読む 一部表示
    7 分
  • Why Your WebSocket Connections Are Leaking Memory

    Why Your WebSocket Connections Are Leaking Memory
    2026/06/03
    WebSockets power real-time features like live chat and dashboards, but every open connection can silently leak memory in your Node.js backend. This episode walks through a real case from a fintech startup whose dashboard latency doubled after 200 concurrent users. Lucas explains how event listeners, closure references, and unresolved promises inside WebSocket handlers create memory leaks that garbage collection can't fix. Luna shares a surprising data point: a single unclosed WebSocket handler can retain up to 2 MB of heap memory per user. They discuss practical fixes — using WeakRef for listener cleanup, implementing heartbeat-based connection draining, and profiling WebSocket memory with Chrome DevTools and clinic.js. By the end, you'll know exactly what to look for in your ws or Socket.IO setup before your production app starts gasping. #WebSocket #MemoryLeak #NodeJS #Backend #RealTimeApps #JavaScript #WebDev #Performance #Debugging #GC #HeapMemory #WeakRef #SocketIO #ClinicJS #Fintech #Technology #FexingoBusiness #BusinessPodcast Keep every episode free: buymeacoffee.com/fexingo
    続きを読む 一部表示
    7 分