标签：#react

Hi everyone, Kacper and Filip from Software Mansion here. This week, TanStack Start is once again in the spotlight. The React Compiler in Rust is on its way. React Router and Remix shipped important security patches – update immediately. There's also a fresh batch of releases from TanStack Form, XState Store, shadcn, React Aria, and more. On the React Native side, this week was dominated by App.js Conf 2026 in Kraków. Gesture Handler 3.0, Swift Package Manager support for React Native, and Legend List 3.0 were among the highlights, alongside Expo announcements like EAS Observe. Let's go! 💡 Subscribe to the official newsletter to receive an email every week! 💸 Sponsor Atomic CRM: The Open-Source CRM Toolkit for Developers Stop struggling with locked-in CRMs and expensive seats. Atomic CRM gives you the power of a professional CRM with the total freedom of open-source. It’s the only toolkit that combines a high-end user experience with data sovereignty. No more lock-in, no more "renting" your contacts. Everything you need is already there: Native Mobile App for on-the-go access. Intuitive Kanban Boards for pipeline management. Built-in Email Tracking to stay on top of leads. Free SSO for seamless team integration. MCP Server Integration for productivity gains. Why settle for a black box SaaS when you can own the entire platform? Deploy Atomic CRM on your own infrastructure in minutes and regain control over your most valuable asset: your data. ⚛️ React TanStack Start Gaining Momentum: 📜 TanStack Start Adds First-Class Rsbuild Support - TanStack Start now supports Rsbuild / Rspack alongside Vite via a new plugin adapter, covering SSR, streaming, HMR, Server Functions, and RSC. 📜 Lovable - Building apps using TanStack Start - The AI App builder is now using TanStack Start with SSR by default for all new projects. 📜 The Conductor Rewrite: What They Changed to Make It Fast - Migrating their Tauri desktop app from React Router to TanStack Router significantly reduced re-re

Building a Real-Time Chat Feature with Django Channels and React Real-time features have become table stakes for modern web applications. Whether it is a customer support widget, a collaborative tool, or a social platform, users expect instant communication without page refreshes. In this article, I will walk through how we built a production-ready real-time chat feature using Django Channels and React at UCDREAMS. Why Django Channels? Django is traditionally synchronous. It handles one request at a time per worker. This works fine for standard HTTP requests, but WebSocket connections require persistent, bidirectional communication. Django Channels extends Django to handle WebSockets, background tasks, and asynchronous protocols alongside traditional HTTP. The beauty of Channels is that it does not replace Django. It layers on top, letting you keep your existing models, ORM, authentication, and admin panel while adding real-time capabilities. For a team already invested in Django, this is a massive advantage over introducing an entirely separate real-time server. Setting Up the Backend Start by installing Django Channels and a channel layer. Redis is the recommended backend for production use: channels == 4.0 . 0 channels - redis == 4.2 . 0 daphne == 4.0 . 0 Configure your Django settings: INSTALLED_APPS = [ ... " channels " , ] ASGI_APPLICATION = " your_project.asgi.application " CHANNEL_LAYERS = { " default " : { " BACKEND " : " channels_redis.core.RedisChannelLayer " , " CONFIG " : { " hosts " : [( " 127.0.0.1 " , 6379 )], }, }, } Building the WebSocket Consumer The consumer handles WebSocket connections: import json from channels.generic.websocket import AsyncWebsocketConsumer class ChatConsumer ( AsyncWebsocketConsumer ): async def connect ( self ): self . room_name = self . scope [ " url_route " ][ " kwargs " ][ " room_name " ] self . room_group_name = f " chat_ { self . room_name } " await self . channel_layer . group_add ( self . room_group_name , self . cha

Ever felt like your fitness app is just a fancy spreadsheet? You log a high uric acid result from your latest blood test, yet it still suggests a high-protein steak dinner for "gains." In the world of AI Agents , we are moving past static prompts. Today, we’re building a Self-Correcting Health Agent using LangGraph , LangChain , and OpenAI . This agent doesn't just chat; it monitors laboratory biomarkers like cholesterol and uric acid, maintains a long-term memory via SQLite , and dynamically rewrites your lifestyle plan using advanced OpenAI Function Calling . If you've been looking to master autonomous health agents and complex state management, you're in the right place. Let's dive into the future of personalized wellness. The Architecture: State-Driven Personalization Unlike a standard linear chain, a health agent needs to "loop" and "reason." If the agent detects an abnormal lab value, it must trigger a specific logic branch to revise existing plans. Here is how the data flows through our LangGraph system: graph TD A[User Input/Lab Report] --> B{Analyze Biomarkers} B -- Abnormal Found --> C[Tool: Plan Rewriter] B -- All Normal --> D[Tool: Maintenance Plan] C --> E[Update SQLite Memory] D --> E[Update SQLite Memory] E --> F[Output Final Recommendation] F --> G[Wait for Next Input] G -- New Data --> B Prerequisites To follow along, you'll need: LangGraph & LangChain : For orchestration. OpenAI API : For the reasoning engine (GPT-4o recommended). SQLite : To handle persistent state and "memory" of your health journey. Step 1: Defining the Agent State In LangGraph, the State is the source of truth. We need to track the user's current health metrics and their active diet plan. from typing import Annotated , TypedDict , List from langgraph.graph import StateGraph , END import operator class HealthState ( TypedDict ): # We use operator.add to keep a history of logs logs : Annotated [ List [ str ], operator . add ] biomarkers : dict current_diet_plan : str revision_req

We run an app where you describe a task and an AI agent does it. The first step after you hit submit is a planning call: POST /api/web/tasks/plan, which turns your free text into a structured plan the agents can pick up. One submit should mean one plan. While testing locally I noticed two plan requests going out per submit. Same payload, fired back to back. The agents handled it fine because the second plan just overwrote the first, but it bothered me. A doubled write is a doubled write, and the next one might not be idempotent. First wrong guess: a double-click My first assumption was the obvious one. The user double-clicks, or the button is not disabled during the request, so two clicks sneak through. I added the disabled state, watched the network tab, and got two requests from a single click. So it was not the button. The thing I had stopped seeing The submit logic lived in an effect. When the form phase flipped to submitting, the effect ran and fired the plan call. There was a second effect too: when the user changed the tier or output format mid-flow, a matching effect re-planned, because a different tier means a different plan. Neither effect had any guard against running twice. And in development, React StrictMode mounts every component, unmounts it, and mounts it again, on purpose, to surface effects that are not safe to re-run. My plan effect was exactly the kind of effect StrictMode is built to expose. The double mount fired it twice. The detail that made it click: I built the app for production and watched the network tab there. Exactly one request. The double was a development-only artifact of StrictMode doing its job. The bug was never in production traffic, but the fact that StrictMode could double it meant my effect was not safe, and an unsafe effect is a latent bug waiting for a real remount. The fix: ref guards set before the await, not reset in cleanup The instinct is to reach for a boolean. The catch is where you reset it. If you reset the guard

I am a full time trader and part time developer based in Karachi, Pakistan. A year ago I sat down to research how to properly compare brokers on the Pakistan Stock Exchange. Three hours later I had 11 browser tabs open, two of which had broken links, one had data from 2019, and none of them had everything I needed in one place. So I built PSX Pulse. What PSX Pulse Is PSX Pulse is a free stock market education platform for Pakistani retail investors. Everything a beginner needs to start investing in Pakistan's stock market — in one place. What is live right now: 35 verified SECP-licensed brokers with full contact details Complete mutual funds directory across 15 AMCs DCA calculator with realistic return scenarios 30-day beginner learning path Islamic investing guide PSX sector guide covering 12 sectors IPO tracker 100-term searchable glossary Weekly market recap every Friday All free. No login required. Live at: https://psxpulse.xwen.com.pk/ The Stack React + Tailwind CSS for the frontend. Vercel for hosting — free tier handles everything comfortably. No backend for most features — localStorage and static data keeps it fast and simple. Newsletter handled via a serverless Vercel function writing to a private GitHub CSV. What I Learned Building This Solo 1. The information gap in emerging markets is enormous Pakistani investors are not underserved because nobody cares. They are underserved because nobody with the technical skills to build tools also has the market knowledge to know what those tools should do. Being both a trader and a developer turned out to be the actual unfair advantage. 2. Free tools beat content for SEO My DCA calculator and broker directory pages get more consistent Google clicks than any article I have written. Tools solve a specific search intent that AI overviews do not replace — people still need to interact with a calculator, not just read about one. 3. Building in public is uncomfortable but worth it Sharing what you are building before it i

Liquid syntax error: Variable '{{% raw %}' was not properly terminated with regexp: /\}\}/

AWS Face Liveness has native SDKs for iOS and Android. That works well if you are building fully...

Vercel has released Next.js 16.2, featuring performance enhancements that make development startup 400% faster and rendering up to 60% quicker. The update includes AI-assisted development tools, improved Turbopack efficiency, and better error reporting. Migration from Next.js 15 is supported, and compatibility is set for Node.js 20.9 and TypeScript 5.1 or newer. By Daniel Curtis

There's a specific kind of bad animation I notice immediately: the count-up stat that stutters as it ticks, the progress bar that lags a frame behind your scroll, the "active" tab underline that snaps instead of glides. None of it is broken, exactly. It just feels cheap. And nine times out of ten, the cause is the same — the animation is being driven through React state, so every frame triggers a re-render, and the main thread can't keep up. I build motion-heavy interfaces for a living, mostly in Next.js 16 and React 19, and I've landed on a small set of patterns that stay smooth because they bypass React's render loop entirely . They lean on Motion — the library formerly known as Framer Motion. It went independent and got renamed in 2025, so the package is now motion and the import you want is motion/react , not framer-motion ( the APIs are identical, only the import path changed ). Here are three I reach for constantly, plus the reduced-motion discipline that should wrap all of them. The mental model: MotionValues over state The single idea that fixes most jank: a MotionValue is a value Motion tracks outside of React. When it changes, Motion updates the DOM directly via transform or opacity — it does not call setState , so your component doesn't re-render. That's the whole trick. A number ticking from 0 to 4,200 should touch the DOM ~60 times a second and re-render React zero times. If a value changes every frame, it should live in a MotionValue, not in useState . State is for things that change when a user does something; MotionValues are for things that change continuously. Keep that line in your head and the rest of this falls out naturally. 1. A reading-progress bar with useScroll + useSpring The bar at the top of an article that fills as you read. The naive version listens to scroll events and sets state — which is exactly the re-render trap. Motion's useScroll hands you scroll position as a MotionValue already, so there's nothing to re-render. useScroll retu

Building a Resilient Real-Time Chat System with WebRTC, Faye, and WebSockets: A Practical End-to-End Building a Resilient Real-Time Chat System with WebRTC, Faye, and WebSockets: A Practical End-to-End Tutorial In this tutorial you’ll build a small, resilient real-time chat system that works across browsers, mobile devices, and constrained networks. You’ll learn how to architect a client/server model with signaling, leverage WebRTC data channels for peer-to-peer messaging when available, and fall back to a robust WebSocket-based relay when direct peer connections fail. The focus is on practical patterns, testable code, and observability to keep a live chat running under load or flaky networks. Key takeaways Understand when to use WebRTC data channels vs. WebSocket relays for real-time chat Implement a signaling server to establish WebRTC connections safely and efficiently Build a resilient message delivery pipeline with idempotent processing and retry semantics Instrument the system for latency, jitter, and message loss to avoid silent failures Test end-to-end flows with simulated network conditions and automated resilience tests Overview of architecture Clients (web and mobile) connect to a signaling server to negotiate WebRTC peers and/or WebSocket sessions. If a direct WebRTC peer connection is possible, use a data channel for low-latency chat messages. If WebRTC is blocked (firewalls, NAT), route messages through a relay server using WebSockets. The relay can also bridge peers that can’t connect directly. A lightweight message store (in-memory for demo, with an optional Redis-backed queue in production) provides at-least-once delivery guarantees and retry capabilities. Observability: metrics for connection attempts, handshake times, message delivery latency, retry counts, and error rates. Tracing spans help diagnose cross-service flows. Tech stack (example) Frontend: TypeScript, WebRTC DataChannel, WebSocket Backend: Node.js with Express for signaling API, ws or

Six months ago, our React app's animation stack looked like a dependency graveyard: Rive for interactive vector graphics GSAP for timeline-based UI animations Lottie for JSON animations imported from design Framer Motion for React-specific transitions Plus a few hand-rolled CSS animations for good measure Four tools. Four mental models. Four runtime dependencies. And a growing gap between what designers shipped and what developers could maintain. We consolidated everything into a single visual runtime. Here's what actually happened. The Problem Nobody Talks About Animation tools are great in isolation. The cracks appear when you need a single component to do multiple things: A button that plays a Rive animation on hover, transitions with Framer Motion on click, and shows a Lottie loading state A card that animates into view with GSAP , has hover states in Rive , and a pressed state in CSS A form that validates with Framer Motion shake animations, loads with Lottie spinners, and succeeds with a Rive celebration Each tool handles its piece. None of them talk to each other. You end up writing coordination code that's more complex than the animations themselves. What We Switched To We moved to ExodeUI — a visual runtime that combines state machines with vector rendering. Instead of four tools plus coordination code, we have: One editor where designers define visual states as nodes One file format that stores both appearance and behavior One export that generates production React components One runtime that renders everything natively The pitch sounds almost too clean. We were skeptical too. What We Actually Gained 1. Eliminated three runtime dependencies Removing Rive's .riv player, Lottie's JSON player, and GSAP's timeline engine from our bundle saved roughly 180KB gzipped. Not life-changing for desktop, but noticeable on mobile. 2. Design files became production code The biggest win wasn't technical — it was process. Our designer builds components in ExodeUI with stat

I’m building Obex, a faith-rooted self-control app for men who want to quit porn and stay consistent with daily discipline. The stack is Expo / React Native, with a web landing page and a desktop blocker companion. Core features: Streak tracking and rank progression Panic Mode for urgent moments Accountability partners Blocker support on desktop Christian-focused language and reminders The goal is to make the product feel practical rather than preachy. People usually respond better to clear feedback loops, a visible streak, and a calm recovery path after setbacks. If you want to see it or give feedback, the site is here: https://obex.so

React + Mapbox GL JS: Custom Markers, Popups, and Bounds-Based Data Fetching If you've added a Mapbox map in a React app before, you've probably hit a wall pretty quickly: Mapbox GL JS manages its own DOM, and React manages a virtual DOM, and getting the two to play nicely takes some thought. Markers and popups are a great example of this tension — they're imperative APIs in a world where you want declarative components. This post walks through a pattern I've landed on for wrapping mapboxgl.Marker and mapboxgl.Popup in composable React components, and combining them with bounds-based data fetching to build something like a real estate or earthquake explorer map — where the data on the map updates as you pan and zoom. Here's what we'll cover: Wrapping mapboxgl.Marker in a React component that handles its own lifecycle Using createPortal to render custom marker content in React Fetching data from an API using the map's current bounding box Tracking an active marker with React state Wrapping mapboxgl.Popup in a component If you want to see the finished product first, the source code is on GitHub . The Core Challenge: Two DOMs Before we get into the code, it's worth understanding why this requires a pattern at all. When you use React's normal component tree, React controls the DOM. But mapboxgl.Marker also creates and manages DOM nodes — it places an element on the map at a specific geographic coordinate, handles repositioning as you pan, and removes itself cleanly when you're done with it. The approach here is to use React to manage the lifecycle of each marker (mount when data arrives, unmount when data goes away), while letting Mapbox handle the positioning . We use React's createPortal to render JSX content into a DOM node that we hand off to Mapbox. The example discussed below is a map that fetches earthquake data for the current viewport, displaying a custom Marker and Popup for each. As you move the map and the bounds change, new data is fetched and the Markers a

We’ve all been there: staring at a messy medicine cabinet, wondering which box is for allergies and which one expired in 2022. In the world of Computer Vision and AI Healthcare , digitizing physical assets is a classic challenge. Today, we're building a "Medicine Box Expert"—a sophisticated pipeline that uses YOLOv8 for precision detection and OpenAI CLIP for multimodal understanding to turn a pile of pills into a searchable digital database. By the end of this tutorial, you'll understand how to bridge the gap between raw pixels and structured medical data. We are moving beyond simple classification; we are building a robust system capable of handling complex lighting, varied angles, and the tiny typography common in pharmaceutical packaging. The Architecture: A Multi-Stage Vision Pipeline To achieve high accuracy, we don't rely on a single model. Instead, we use a "Detect-Extract-Embed" workflow. graph TD A[User Uploads Image] --> B[YOLOv8: Box Detection] B --> C{Box Found?} C -- Yes --> D[Crop & Preprocess] C -- No --> E[Error: No Box Detected] D --> F[Tesseract OCR: Text Extraction] D --> G[OpenAI CLIP: Visual Embedding] F & G --> H[SQLite Query: Semantic Search] H --> I[Result: Drug Info & Dosage] Prerequisites Before we dive into the code, ensure you have the following tech_stack installed: YOLOv8 : For real-time object detection. OpenAI CLIP : To handle semantic image-text matching. Tesseract OCR : For reading the fine print on the boxes. SQLite : To store and query our medicine metadata. pip install ultralytics transformers torch pytesseract Step 1: Detecting the Medicine Box with YOLOv8 First, we need to locate the medicine box within the frame. A generic YOLOv8 model (like yolov8n.pt ) is surprisingly good at detecting "books" or "cell phones," but for the best results, you should fine-tune it on the Open Images Dataset specifically for "Box" or "Medical Packaging." from ultralytics import YOLO import cv2 # Load the model model = YOLO ( ' yolov8n.pt ' ) def

A few years ago, we started adapting our websites for mobile devices. Then we adapted them for...

Cómo solucionar el error "Text content does not match server-rendered HTML" en Next.js Este error ocurre cuando el HTML generado en el servidor (SSR) no coincide con el árbol de React que se construye durante la hidratación inicial en el navegador. Es un problema crítico que rompe la experiencia de usuario y puede causar comportamientos impredecibles. Causa raíz En tu caso, el error está relacionado con contenido dinámico que varía entre renderizado del servidor y renderizado del cliente , probablemente por: Uso de Date() o new Date() en el renderizado (ej. fechas de eventos como JUN 9 , JUN 11 , etc.) Uso de typeof window !== 'undefined' o APIs del navegador directamente en el render Metaetiquetas o scripts que modifican el DOM antes de la hidratación (como iOS detectando fechas como enlaces) Configuración incorrecta de librerías CSS-in-JS o Edge/CDN que modifiquen el HTML Solución definitiva (pasos) ✅ Paso 1: Aisla el contenido dinámico con suppressHydrationWarning Si el contenido que varía es intencional (como fechas de eventos), envuelve solo el elemento problemático con suppressHydrationWarning={true} : // app/page.tsx o app/events/page.tsx export default function EventsPage () { const events = [ { name : ' NEXT.JS NIGHTS ' , date : new Date ( ' 2024-06-09 ' ) }, { name : ' AMS ' , date : new Date ( ' 2024-06-11 ' ) }, { name : ' LDN ' , date : new Date ( ' 2024-06-18 ' ) }, ]; return ( < div > < h2 > VIEW EVENTS </ h2 > < ul > { events . map (( event , i ) => ( < li key = { i } > < strong > { event . name } </ strong > { /* ✅ Solo este elemento usa suppressHydrationWarning */ } < time dateTime = { event . date . toISOString () } suppressHydrationWarning > { event . date . toLocaleDateString ( ' en-US ' , { month : ' short ' , day : ' numeric ' }) } </ time > </ li > )) } </ ul > </ div > ); } ⚠️ Importante : suppressHydrationWarning solo funciona en el elemento inmediato, no en hijos. Usa span , time , div , etc., no en contenedores grandes. ✅ Paso 2: Evita Da

Stop Shipping 20 Locale Files in React Native: On-Device Translation for Dynamic Language Packs Internationalization in mobile apps usually starts clean and then gets expensive. At first, you keep a couple of JSON files: en.json es.json fr.json That works when your product is small and the set of languages is stable. It breaks down when: you want to support many languages the product team keeps changing copy translated files drift out of sync some languages are only partially used you do not want to run every string through a server-side translation pipeline This is the problem @tcbs/react-native-language-translator is trying to solve. It lets a React Native app keep a source language, translate missing keys on device, and cache the generated language pack locally. Package: @tcbs/react-native-language-translator The problem Many React Native apps treat localization as a static asset problem: keep one JSON file per language ship all of them in the app update all of them whenever English changes That model has real costs. 1. Translation files become operational debt Every new feature adds more keys. Every copy change forces translators to update multiple locale files. Over time, the translation layer becomes a maintenance queue. The result is predictable: missing keys stale translations untranslated fallback strings inconsistent release quality across languages 2. Shipping many locales is wasteful Most users only need one target language. But many apps ship every locale anyway. That increases bundle size and creates a lot of dead weight for users who will never use most of those files. 3. Dynamic product copy is hard to localize well If your app changes quickly, static translation files lag behind. Teams either accept stale translations or build a backend workflow to keep everything synchronized. That is often more infrastructure than the app actually needs. 4. Server-side translation is not always the right tradeoff Calling a translation API at runtime introduces: la

We talk about pagination as if it's purely a backend concern – the database does the heavy lifting, the API returns pages, and the frontend just renders them. But in 2026, that mental model is outdated. The frontend now owns more of the data-fetching lifecycle than ever: server components prefetch, client caches hydrate, optimistic updates mutate, and streaming responses trickle in chunk by chunk. The choice between cursor pagination and offset pagination has real consequences for how you write your React components, how your cache behaves, how scroll feels on the phone, and what happens when a user navigates back. This post is about those tradeoffs – from the frontend seat. The Landscape Has Changed A few things are different in 2026 that make this conversation more nuanced than it was three or four years ago: React Server Components are mainstream. Data fetching happens on the server in many apps, which shifts where pagination state lives and how navigation works. TanStack Query is the de-facto standard for client-side async state, with first-class infinite query support baked in. The "infinite scroll vs pagination" debate is mostly settled — infinite scroll wins for feeds and content-heavy apps; numbered pages win for dense data tables. Your pagination strategy should serve that decision, not fight it. LLM-powered search and filtering are becoming common, and those use cases have their own quirks around pagination stability. Edge caching and CDN-level pagination mean that certain offset-paginated responses can be cached by URL – a genuine advantage offset still holds. What Frontend Engineers Actually Care About When you strip away the SQL theory, here's what the pagination choice actually affects on the frontend: 1. Cache Key Design With offset pagination, the cache key is simple and predictable: posts?page=3&limit=20 . Every page is independently cacheable by URL — your CDN loves this. TanStack Query, SWR, and Apollo all handle this naturally. // Offset — clean,

Here's a conversation I've had more than once. A developer is building a React app. It starts...

PixToCode is a new Figma plugin that turns the frames you've already designed into production-ready code with AI — React, Angular, Vue, or HTML, all Tailwind-first. Just published on the Figma Community: figma.com/community/plugin/1641790551381890223/pixtocode What it does Select one or more frames in Figma, pick a framework, click Generate. About 10 seconds later you have clean code that uses the exact colors, spacing, typography, and layout from your file — not generic Tailwind utility soup. Highlights: 4 frameworks — React (TypeScript), Angular (standalone + Signals), Vue 3, or semantic HTML5. All Tailwind-first. UI library presets — shadcn/ui, Material UI, Chakra, Ant Design on React, Angular Material on Angular. Output uses the real components , not generic divs. Refine with plain English — type "make the button rounded" or "use green for the active tab" and the AI rewrites the component in place. Multi-frame batch — select up to 5 frames, get them all in one pass. Variants → typed props — a Figma Component Set with Primary / Secondary / Disabled becomes one typed prop-driven component, not three duplicate files. Live browser preview — see the generated component rendered in a sandboxed tab before pasting it into your project. Cloud history — every generation saved to your account, synced across devices. How it works Get a free license key at pixtocode.com (5 free generations, no credit card). Install the plugin from the Figma Community. Paste the key into the plugin's license field. Select a frame, choose a framework, click Generate. Copy the code straight into your project. That's the whole flow. Pricing Free — 5 generations on signup Pro — $20/month for 100 generations Power — $39/month for 250 generations Team — $99/month, 5 seats, 600 shared generations (scales to 10 seats) All paid plans have a 7-day refund guarantee. Tips for best results Frames with auto-layout , named layers , and consistent design tokens produce the cleanest output. For huge dashboard