Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

⚛️ Keep UI responsive during expensive renders with useTransition(): React prioritizes user input over transitions ↓

George Moller

119,259 subscribers

30,325 views • 7 months ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Introducing Agent React DevTools. AI agents can now inspect React apps beyond the UI: → Component tree and state → Renders and performance → Structured output for debugging Works with React and React Native. Learn more ⬇️

Introducing Agent React DevTools. AI agents can now inspect React apps beyond the UI: → Component tree and state → Renders and performance → Structured output for debugging Works with React and React Native. Learn more ⬇️

Callstack Engineers

18,242 views • 5 months ago

🧪 Experimenting building a foldable UI with Expo , Astra, and Material 3 for Android. A local Kotlin module wraps Material 3’s adaptive layout, exposed through the Expo Modules API. React serves the data layer and Expo UI renders native Compose components.

🧪 Experimenting building a foldable UI with Expo , Astra, and Material 3 for Android. A local Kotlin module wraps Material 3’s adaptive layout, exposed through the Expo Modules API. React serves the data layer and Expo UI renders native Compose components.

Aman Mittal🖖

37,629 views • 8 days ago

I made it! 🥳 The Hotel Admin UI is completed. 😊🙌 Personally, I really enjoyed working on this UI. I was able to learn a lot and gain a better understanding of how to create a user friendly experience. Here are the features I implemented in this project: • Fully responsive design (mobile, tablet, desktop, large desktop - 4K) • Library of components (chakra-ui) • Loading indicator and skeleton while loading data • Mock API integration • CRUD operations • Search functionality • Modals and confirmation dialogs • Routing using react-router • Picture upload library (react-filepond) • Form validation • Data visualization chart (Chart.js) • Carousel with thumbnails (swiper.js) I hope you like it! #womenintech #100DaysOfCode #React

I made it! 🥳 The Hotel Admin UI is completed. 😊🙌 Personally, I really enjoyed working on this UI. I was able to learn a lot and gain a better understanding of how to create a user friendly experience. Here are the features I implemented in this project: • Fully responsive design (mobile, tablet, desktop, large desktop - 4K) • Library of components (chakra-ui) • Loading indicator and skeleton while loading data • Mock API integration • CRUD operations • Search functionality • Modals and confirmation dialogs • Routing using react-router • Picture upload library (react-filepond) • Form validation • Data visualization chart (Chart.js) • Carousel with thumbnails (swiper.js) I hope you like it! #womenintech #100DaysOfCode #React

Glenda Diaz

15,568 views • 3 years ago

Page UI is live on Product Hunt 🎉 Drop by & say hi. Any support greatly appreciated 💜 Here's what's included: 🐙 Open source ⚛️ 24 components & 100s of examples + templates 📋 Copy & paste any section 🎨 Themeable ↔️ Responsive 🌚 Dark mode included 📃 World class docs Support for plain React, JavaScript and more templates planned! Stay tuned 👀

Page UI is live on Product Hunt 🎉 Drop by & say hi. Any support greatly appreciated 💜 Here's what's included: 🐙 Open source ⚛️ 24 components & 100s of examples + templates 📋 Copy & paste any section 🎨 Themeable ↔️ Responsive 🌚 Dark mode included 📃 World class docs Support for plain React, JavaScript and more templates planned! Stay tuned 👀

Dan ⚡️

99,096 views • 2 years ago

sneak-peek:🎈@partykit/react, the one framework to rule them all - Real-time React Server Components! - Keep business/rendering logic on the server, send UI over the wire in real-time - Zero API setup - one party per user, or per shared session, or even the whole world (scales to thousands of connections per instance) - Wire up your own reactive sources - Super fast "local" state, with ultra low latency syncing, powered by PartyKit - optional SSR / prerendering What would you build with this?

sneak-peek:🎈@partykit/react, the one framework to rule them all - Real-time React Server Components! - Keep business/rendering logic on the server, send UI over the wire in real-time - Zero API setup - one party per user, or per shared session, or even the whole world (scales to thousands of connections per instance) - Wire up your own reactive sources - Super fast "local" state, with ultra low latency syncing, powered by PartyKit - optional SSR / prerendering What would you build with this?

sunil pai

142,949 views • 2 years ago

Recreated the Apple Photos UI with React Aria in just ~200 lines! Complete with virtualized scrolling, view transitions, adjustable waterfall layout, folder tree, search, multi-selection, and accessible drag and drop. Just one of the demos I'm planning for the new docs. 🙂

Recreated the Apple Photos UI with React Aria in just ~200 lines! Complete with virtualized scrolling, view transitions, adjustable waterfall layout, folder tree, search, multi-selection, and accessible drag and drop. Just one of the demos I'm planning for the new docs. 🙂

Devon Govett

47,441 views • 1 year ago

🚀 Announcing Ark UI Ark™ The robust headless UI component library, built with State machines 🥳💪✨ 🔸Over 30+ components (ColorPicker, DatePicker, and more...) 🔸Works in React, Solid, and Vue 🔸Bring your own styling solution

🚀 Announcing Ark UI Ark™ The robust headless UI component library, built with State machines 🥳💪✨ 🔸Over 30+ components (ColorPicker, DatePicker, and more...) 🔸Works in React, Solid, and Vue 🔸Bring your own styling solution

Sage ⚡️

159,282 views • 2 years ago

this is one of the most common problems on react sites, but it's solvable with less than 10 lines of javascript you can see how what i type gets wiped out after hydration, but if you use an inline script tag like shown in this demo your input seamlessly transitions

this is one of the most common problems on react sites, but it's solvable with less than 10 lines of javascript you can see how what i type gets wiped out after hydration, but if you use an inline script tag like shown in this demo your input seamlessly transitions

Rhys

178,655 views • 7 months ago

Updates keep rolling out on Shido DEX. New UI upgrades are live with enhanced user experience. Trade thousand of tokens across 5 networks with deep liquidity and minimal slippage. Cross-chain swaps, limit orders and staking platform. Trade now 👉

Updates keep rolling out on Shido DEX. New UI upgrades are live with enhanced user experience. Trade thousand of tokens across 5 networks with deep liquidity and minimal slippage. Cross-chain swaps, limit orders and staking platform. Trade now 👉

Shido

48,351 views • 2 years ago

The wait is over, Cosmonauts! Releasing the teaser of Cosmic Chronicles — the first OmniFlix Original ever, produced in partnership with ATOM Accelerator | Cosmos Hub ⚛️ for the Cosmos Hub ⚛️ ⚛️ 🔗 The 77-episode series premieres 🥁 April 8 with — not just one — but 2 new episodes dropping daily on OmniFlix TV Every Saturday, weekly releases go live on X & YouTube to set you up to binge watch & know more about Cosmos - The Interchain ⚛️, during the weekend 💪 #HubStories

The wait is over, Cosmonauts! Releasing the teaser of Cosmic Chronicles — the first OmniFlix Original ever, produced in partnership with ATOM Accelerator | Cosmos Hub ⚛️ for the Cosmos Hub ⚛️ ⚛️ 🔗 The 77-episode series premieres 🥁 April 8 with — not just one — but 2 new episodes dropping daily on OmniFlix TV Every Saturday, weekly releases go live on X & YouTube to set you up to binge watch & know more about Cosmos - The Interchain ⚛️, during the weekend 💪 #HubStories

FLIX.fun 🎬

21,525 views • 1 year ago

Rufai Oseni continues to react following the heated argument he had with Senator Adams Oshiomhole earlier today during an Arise TV programme over MTN.

Rufai Oseni continues to react following the heated argument he had with Senator Adams Oshiomhole earlier today during an Arise TV programme over MTN.

CHUKS 🍥

42,247 views • 4 months ago

🚀 Ship in record time with the new Metronic! The all-in-one template kit for React Vite, Next.js, and vanilla JS - trusted by 117,000+ developers. Key Features: - 10 unique app layouts - RTL/Dark mode support - 1000+ UI elements - 40+ UI components - 120+ pages - 50+ Prebuilt UI blocks CRUDs/forms/flows - User Management app(next.js) - Store - Client concept - More concepts cooking... Tech Stack: - Tailwind CSS 4 - ReUI components - shadcn compatible - @reactjs19 with App Router - Vite ⚡ with React Router - Next.js 15.3 - Auth.js - Supabase Auth - Radix by WorkOS - TANSTACK Table & Query - Prisma ORM - PostgreSQL - Vanilla JS/TypeScript - KtUI components - Bootstrap 5 legacy version Live preview: Purchase link:

🚀 Ship in record time with the new Metronic! The all-in-one template kit for React Vite, Next.js, and vanilla JS - trusted by 117,000+ developers. Key Features: - 10 unique app layouts - RTL/Dark mode support - 1000+ UI elements - 40+ UI components - 120+ pages - 50+ Prebuilt UI blocks CRUDs/forms/flows - User Management app(next.js) - Store - Client concept - More concepts cooking... Tech Stack: - Tailwind CSS 4 - ReUI components - shadcn compatible - @reactjs19 with App Router - Vite ⚡ with React Router - Next.js 15.3 - Auth.js - Supabase Auth - Radix by WorkOS - TANSTACK Table & Query - Prisma ORM - PostgreSQL - Vanilla JS/TypeScript - KtUI components - Bootstrap 5 legacy version Live preview: Purchase link:

KeenThemes Market

12,695 views • 1 year ago

A technically interesting challenge when building Pengu was generating transparent images for each user’s unique Pengu. With over 350 clothing items and countless possible combinations, plus varying device sizes, pre-generating images in the cloud quickly became infeasible. To solve this, we moved the computation to the device itself by leveraging React Native Godot. Here’s how it works: ① The user changes the Pengu’s clothing, and React Native calls a GDScript function. ② Godot opens a subwindow with a specific scene that renders the Pengu. ③ Godot takes a “screenshot” and closes the subwindow. ④ React Native receives the File Path of the screenshot as a return value. You can get quite creative with how you leverage Godot’s subwindows. Screenshots are captured in just a few milliseconds, without the user ever noticing.

A technically interesting challenge when building Pengu was generating transparent images for each user’s unique Pengu. With over 350 clothing items and countless possible combinations, plus varying device sizes, pre-generating images in the cloud quickly became infeasible. To solve this, we moved the computation to the device itself by leveraging React Native Godot. Here’s how it works: ① The user changes the Pengu’s clothing, and React Native calls a GDScript function. ② Godot opens a subwindow with a specific scene that renders the Pengu. ③ Godot takes a “screenshot” and closes the subwindow. ④ React Native receives the File Path of the screenshot as a return value. You can get quite creative with how you leverage Godot’s subwindows. Screenshots are captured in just a few milliseconds, without the user ever noticing.

Jannis Ringwald

28,577 views • 10 months ago

ITSHOVER is redefining UI design with motion-first animated icons built for modern applications. Instead of lifeless SVGs, every icon is designed to react, engage, and enhance user experience through meaningful animation. Built for React, Next.js, Tailwind CSS, and modern web stacks. Why developers are paying attention • Motion-first icon library • Beautiful animated interactions • React & Next.js ready • Tailwind CSS friendly • Open source and fully customizable • Designed for modern products and SaaS applications • 2,200+ GitHub stars • 100,000+ biweekly visits The future of interfaces isn't static. It's interactive. It's responsive. It's ITSHOVER. Website: GitHub: Early adopters always win first. #ITSHOVER #OpenSource #ReactJS #NextJS #WebDevelopment #UIUX #Frontend #TailwindCSS #DesignSystems #AnimatedIcons #BuildInPublic #Developers #GitHub #WebDesign #SaaS #Startup #IndieHackers

ITSHOVER is redefining UI design with motion-first animated icons built for modern applications. Instead of lifeless SVGs, every icon is designed to react, engage, and enhance user experience through meaningful animation. Built for React, Next.js, Tailwind CSS, and modern web stacks. Why developers are paying attention • Motion-first icon library • Beautiful animated interactions • React & Next.js ready • Tailwind CSS friendly • Open source and fully customizable • Designed for modern products and SaaS applications • 2,200+ GitHub stars • 100,000+ biweekly visits The future of interfaces isn't static. It's interactive. It's responsive. It's ITSHOVER. Website: GitHub: Early adopters always win first. #ITSHOVER #OpenSource #ReactJS #NextJS #WebDevelopment #UIUX #Frontend #TailwindCSS #DesignSystems #AnimatedIcons #BuildInPublic #Developers #GitHub #WebDesign #SaaS #Startup #IndieHackers

👑 KING NEXT 100X

32,340 views • 3 months ago

Carney Liberal Govt promises 10 new national parks: with Min Guilbeault in charge. He could use these to block crucial energy projects. Guilbeault has an infamous activist past + prioritizes ideology over nation-building. Why does Carney keep trusting him with these portfolios?

Carney Liberal Govt promises 10 new national parks: with Min Guilbeault in charge. He could use these to block crucial energy projects. Guilbeault has an infamous activist past + prioritizes ideology over nation-building. Why does Carney keep trusting him with these portfolios?

Sen. Denise Batters

28,461 views • 1 year ago

Grok Code generates the most aesthetic UI/UX Design Built a stunning carousel with mesmerizing hover effects & glows - just 2 prompts in Kilo Code, and it nailed every detail Grok Code created Frosty esthetics - snowflakes, glassy vibes, everything I asked for, for a live feel Animated and interactive elements, clickable 𝕏 profile and links everything perfectly connected, super smooth, and insanely responsive Grok Code also created a stunning side-show, smooth transitions, glowing borders with Grok Imagine images It is straight-up a powerhouse for visual code and pure UI magic

X Freeze

1,104,204 views • 11 months ago

AG-UI makes building agentic applications dramatically easier. Here's how it works. This is a model for a simple chatbot: User → LLM → Response But interactive agents that render UI, pause for approvals, and ask users for input need a much more complex model. When building these agents, a response from the LLM will include a series of state changes as the agent runs: • Agent started a task • Agent called a tool • Agent updated its state • Agent streams these tokens • Agent is waiting on a human • Agent is resuming the task The Agent-User Interaction Protocol (AG-UI) treats the LLM response as a stream of events rather than a text endpoint. In practice, here is what you get as an agent runs: 1. Lifecycle events so your UI knows where the agent is. 2. Text messages that stream tokens. 3. Tool calls so your UI can prefill a form with any required arguments. 4. State updates that keep your UI in sync with the agent. 5. Special events for human approvals, rich media, and custom needs. All of these events travel over standard transports (SSE, WebSockets, or plain HTTP) as JSON. As a result, you can build a frontend that stays in sync with the agent's progress without having to invent a custom process to make this happen. For example, building a human-in-the-loop workflow becomes an off-the-shelf component you can integrate rather than build from scratch. CopilotKit🪁 is the creator of AG-UI, and you can use it when building frontend applications pretty much anywhere: • React • Angular • Vue • React Native • Slack • Teams • Discord • WhatsApp • Telegram Here is the link for you to check it out: Thanks to the CopilotKit team for partnering with me on this post.

AG-UI makes building agentic applications dramatically easier. Here's how it works. This is a model for a simple chatbot: User → LLM → Response But interactive agents that render UI, pause for approvals, and ask users for input need a much more complex model. When building these agents, a response from the LLM will include a series of state changes as the agent runs: • Agent started a task • Agent called a tool • Agent updated its state • Agent streams these tokens • Agent is waiting on a human • Agent is resuming the task The Agent-User Interaction Protocol (AG-UI) treats the LLM response as a stream of events rather than a text endpoint. In practice, here is what you get as an agent runs: 1. Lifecycle events so your UI knows where the agent is. 2. Text messages that stream tokens. 3. Tool calls so your UI can prefill a form with any required arguments. 4. State updates that keep your UI in sync with the agent. 5. Special events for human approvals, rich media, and custom needs. All of these events travel over standard transports (SSE, WebSockets, or plain HTTP) as JSON. As a result, you can build a frontend that stays in sync with the agent's progress without having to invent a custom process to make this happen. For example, building a human-in-the-loop workflow becomes an off-the-shelf component you can integrate rather than build from scratch. CopilotKit🪁 is the creator of AG-UI, and you can use it when building frontend applications pretty much anywhere: • React • Angular • Vue • React Native • Slack • Teams • Discord • WhatsApp • Telegram Here is the link for you to check it out: Thanks to the CopilotKit team for partnering with me on this post.

Santiago

17,438 views • 2 months ago

Vitamin B12 is the world's most expensive vitamin, and the scarcest one in the human body. As the world transitions to plant-based diets, B12 deficiency will rise. Finding ways to fortify food with B12 may help to keep people, as well as the planet, healthy. Find out more:

Vitamin B12 is the world's most expensive vitamin, and the scarcest one in the human body. As the world transitions to plant-based diets, B12 deficiency will rise. Finding ways to fortify food with B12 may help to keep people, as well as the planet, healthy. Find out more:

The Royal Society

26,883 views • 3 years ago

UI/UX Designers, this might be the new favourite library for micro-interactions. Amicro gives you access to a curated beautifully crafted open-source collection of premium micro-transitions and interaction components for React, making it easy to add polished animations and seamless experiences to websites, dashboards, and web apps. You can install everything with just one CLI command. Bookmarks it for later 💜

UI/UX Designers, this might be the new favourite library for micro-interactions. Amicro gives you access to a curated beautifully crafted open-source collection of premium micro-transitions and interaction components for React, making it easy to add polished animations and seamless experiences to websites, dashboards, and web apps. You can install everything with just one CLI command. Bookmarks it for later 💜

Abraham John 🦄🦓

26,631 views • 1 month ago

We are witnessing a fundamental shift in how software is built. Over the decades, UI was static and predictable. But AI is changing the fundamental nature of the interface. We are moving away from fixed UI and toward a new standard: Generative UI. Generative UI lets agents participate in the UI, not just the conversation. It’s a dynamic participant in the user experience. Depending on the complexity of your app, Generative UI generally falls into three categories: 1. Static (AG-UI): UI is chosen from a fixed set of hand-built components 2. Open-Ended (MCP Apps): agent sends arbitrary content like raw HTML or iframes for total flexibility. 3. Declarative (A2UI): agent and frontend communicate via a structured UI spec for dynamic widgets and forms. The AG-UI Protocol by CopilotKit is the real breakthrough. AG-UI acts as the universal transport layer. It provides the integrations and middleware for every Gen-UI spec, making it trivial to bring dynamic components into your existing app. CopilotKit provides the go-to ecosystem for building agentic applications and is the React client of AG-UI. It is designed to be deeply integrated, allowing developers to bring their own frameworks or protocols to the table. Play around with different types of Generative UI here → Check out the video attached to see Generative UI in action. Appreciate the CopilotKit team for collaborating with me on this deep dive.

We are witnessing a fundamental shift in how software is built. Over the decades, UI was static and predictable. But AI is changing the fundamental nature of the interface. We are moving away from fixed UI and toward a new standard: Generative UI. Generative UI lets agents participate in the UI, not just the conversation. It’s a dynamic participant in the user experience. Depending on the complexity of your app, Generative UI generally falls into three categories: 1. Static (AG-UI): UI is chosen from a fixed set of hand-built components 2. Open-Ended (MCP Apps): agent sends arbitrary content like raw HTML or iframes for total flexibility. 3. Declarative (A2UI): agent and frontend communicate via a structured UI spec for dynamic widgets and forms. The AG-UI Protocol by CopilotKit is the real breakthrough. AG-UI acts as the universal transport layer. It provides the integrations and middleware for every Gen-UI spec, making it trivial to bring dynamic components into your existing app. CopilotKit provides the go-to ecosystem for building agentic applications and is the React client of AG-UI. It is designed to be deeply integrated, allowing developers to bring their own frameworks or protocols to the table. Play around with different types of Generative UI here → Check out the video attached to see Generative UI in action. Appreciate the CopilotKit team for collaborating with me on this deep dive.

Pratham

33,920 views • 7 months ago