React vs. Tiempo Real: Construye Funciones en Tiempo Real Sin Luchar Contra el Framework

Bookmark
Rate this content
Sentry
Promoted
Code breaks, fix it faster

Crashes, slowdowns, regressions in prod. Seer by Sentry unifies traces, replays, errors, profiles to find root causes fast.

Get started

La mayoría de las aplicaciones de React tratan el estado como la única fuente de verdad. Pero, ¿qué sucede cuando el tiempo mismo vive fuera de React?

Mientras construíamos un motor de línea de tiempo de múltiples pistas para producción, descubrimos que el transporte de Web Audio, no el estado de React, tenía que convertirse en la línea de tiempo canónica. En esta charla, exploraremos cómo diseñamos un gráfico de audio basado en canales y un editor renderizado en lienzo alrededor de un reloj externo de alta precisión, permitiendo la sincronización determinista de audio y medios generados externamente, renderizado a 60fps y actualizaciones de estado sin recarga sin permitir que la reconciliación de React interfiera con las garantías de tiempo real.

This talk has been presented at React Summit 2026, check out the latest edition of this React Conference.

Shubham Gautam
Shubham Gautam
20 min
16 Jun, 2026

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Shubham, un ingeniero de software senior en Headout, discute los desafíos cuando React se encuentra con sistemas en tiempo real mientras trabaja en una herramienta interna para puertas de audio. La flexibilidad de React choca con los horarios fijos de los sistemas en tiempo real, causando problemas como el desplazamiento de audio. Redefinir el papel de React en los sistemas en tiempo real mejora la suavidad del cabezal de reproducción al cambiar la arquitectura. React hace la transición a un observador, utilizando un reloj externo para la estabilidad. Las optimizaciones en la arquitectura de renderizado de React incluyen renderizado en capas para un rendimiento mejorado de la interfaz de usuario. La retroalimentación en tiempo real pasa por alto React para respuestas instantáneas, siendo la invalidación de caché crítica en los sistemas en tiempo real.
Video transcription and chapters available for users with access.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Entendiendo la Arquitectura Fiber de React
React Advanced 2022React Advanced 2022
29 min
Entendiendo la Arquitectura Fiber de React
Top Content
This Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.
Thinking Like an Architect
Node Congress 2025Node Congress 2025
31 min
Thinking Like an Architect
Top Content
In modern software development, architecture is more than just selecting the right tech stack; it involves decision-making, trade-offs, and considering the context of the business and organization. Understanding the problem space and focusing on users' needs are essential. Architectural flexibility is key, adapting the level of granularity and choosing between different approaches. Holistic thinking, long-term vision, and domain understanding are crucial for making better decisions. Effective communication, inclusion, and documentation are core skills for architects. Democratizing communication, prioritizing value, and embracing adaptive architectures are key to success.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
El Lado Oscuro de los Micro-Frontends
React Advanced 2025React Advanced 2025
29 min
El Lado Oscuro de los Micro-Frontends
In the Talk, various key points were discussed regarding micro-front-end architecture. These included challenges with micro-intents, common mistakes in system design, the differences between micro-intents and components, granularity in software architecture, optimizing micro-front-end architecture, efficient routing and deployment strategies, edge computing strategies, global state and data sharing optimization, managing data context, governance and fitness functions, architectural testing, adaptive growth, value of micro-frontends, repository selection, repo structures, and web component usage.

Workshops on related topic

IA a demanda: IA sin servidor
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
IA a demanda: IA sin servidor
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
En esta masterclass, discutimos los méritos de la arquitectura sin servidor y cómo se puede aplicar al espacio de la IA. Exploraremos opciones para construir aplicaciones RAG sin servidor para un enfoque más lambda-esque a la IA. A continuación, nos pondremos manos a la obra y construiremos una aplicación CRUD de muestra que te permite almacenar información y consultarla utilizando un LLM con Workers AI, Vectorize, D1 y Cloudflare Workers.
Masterclass de alto rendimiento Next.js
React Summit 2022React Summit 2022
50 min
Masterclass de alto rendimiento Next.js
Workshop
Michele Riva
Michele Riva
Next.js es un marco convincente que facilita muchas tareas al proporcionar muchas soluciones listas para usar. Pero tan pronto como nuestra aplicación necesita escalar, es esencial mantener un alto rendimiento sin comprometer el mantenimiento y los costos del servidor. En este masterclass, veremos cómo analizar el rendimiento de Next.js, el uso de recursos, cómo escalarlo y cómo tomar las decisiones correctas al escribir la arquitectura de la aplicación.
Model Context Protocol (MCP) Deep Dive: 2-Hour Interactive Masterclass
AI Coding Summit 2025AI Coding Summit 2025
86 min
Model Context Protocol (MCP) Deep Dive: 2-Hour Interactive Masterclass
Workshop
Stepan Suvorov
Stepan Suvorov
Únete a una sesión enfocada de 2 horas que cubre el propósito de MCP, su arquitectura, implementación práctica de servidores y direcciones futuras. Diseñado para desarrolladores y arquitectos de sistemas que buscan integrar datos contextuales con modelos de ML de manera efectiva. Agenda:- Introducción & ¿Por qué MCP? Desafíos clave que MCP resuelve y beneficios principales.- Profundización en la Arquitectura: componentes, interacciones, principios de escalabilidad. - Construyendo tu propio Servidor MCP: recorrido guiado con fragmentos de código y mejores prácticas; demostración en vivo o revisión de código.- Futuro de los Desarrollos de MCP: potenciales mejoras, tendencias emergentes, escenarios del mundo real.
Puntos Clave:- Comprensión clara del razonamiento detrás de MCP.- Perspectiva sobre patrones de diseño y consideraciones de escalado.- Pasos prácticos para implementar un servidor prototipo.- Conciencia de las tendencias futuras y cómo aplicar MCP en proyectos. 
Concurrencia de Node Con la Fuerza de un Toro Con BullMQ
Node Congress 2026Node Congress 2026
95 min
Concurrencia de Node Con la Fuerza de un Toro Con BullMQ
Workshop
Edy Silva
Douglas Marques
2 authors
La naturaleza concurrente de Node ya es poderosa, pero a menudo necesitamos sacar trabajo del servidor principal por varias razones. En este trabajo, exploraremos algunos escenarios en los que el trabajo se empuja inteligentemente a otro proceso de Node para resolver.
Una vez que usamos una cola para distribuir cargas de trabajo, necesitamos identificar la naturaleza del trabajo a realizar. Para trabajos intensivos en I/O o CPU, el primero ya está perfectamente cubierto por un solo proceso de Node.js; necesitaremos ajustar la configuración del trabajador para que coincida con los recursos disponibles y el rendimiento.