May 8
Loading video player...
#nextjs #react #coding #javascript In this video, we explore how to use the React useOptimistic hook and useTransition hook to build a high-performance course platform. If you are using Next.js server actions with a Supabase database, you may encounter issues where the UI freezes during data fetching. This optimistic UI tutorial demonstrates how to achieve non-blocking UI updates to improve React performance. Whether you are focused on web development or frontend development, this coding tutorial provides the tools to significantly improve user experience by providing instant feedback to your users. ⭐️⭐️⭐️ Check out Supabase here: https://dub.sh/supabase-ankita ⭐️ ⭐️ ⭐️ Github Repo to follow along: https://dub.sh/HiZWCbn 🎁 Free Cheatsheet: https://dub.sh/nextjs-mistakes 🚨 Ready to go deeper? Build & deploy 7+ production apps from scratch: https://dub.sh/nextjscourse 🎥 What to check out next https://youtu.be/LzEefhA_8Ns https://youtu.be/OlViBcLX-fA ⏰ Timeline 00:00 Introduction to UI Latency 00:59 The Developer Blind Spot 01:57 Introducing useOptimistic Hook 02:51 Analyzing Problematic Code 04:32 Implementing Optimistic Updates 05:49 Using Non-Blocking Transitions 🔗 RESOURCES 💌 Join Frontend Snacks 🍿 - my free weekly newsletter https://dub.sh/frontend-snacks Learn a new web dev + AI topic every week with cool visuals and code snippets, the latest news, and behind-the-scenes updates I don't share anywhere else. ✨ Grab my FREE Goodies (cheatsheets, templates & more) https://kulkarniankita.com/goodies ☎️ Book a 1:1 with me Coaching calls are limited - grab yours before they're gone: https://dub.sh/one-on-one-with-ankita 🐤 Find me here 🐦 Twitter: https://twitter.com/kulkarniankita9 💼 LinkedIn: https://www.linkedin.com/in/kulkarniankita/