Advanced Remix

Suspense Boundary Error

Kent C. Dodds

Kent C. Dodds

Professional Trainer
Advanced Remix

Check out a free preview of the full Advanced Remix course

The "Suspense Boundary Error" Lesson is part of the full, Advanced Remix course featured in this preview video. Here's what you'd learn in this lesson:

Kent briefly debugs a boundary error thrown by the Suspense component.


Transcript from the "Suspense Boundary Error" Lesson

>> The differ await suspense up produces an error and the council were on page load where it says uncaught error this suspense boundary received an update before it finished hydrating. This caused a boundary just switch to client rendering. Is that something we should worry about?
>> Well, I do not see that myself.

So here I'm not deferring. Let me just give you this. Okay, yes, I am seeing that myself. I'm not sure about that, I haven't seen this before so what we actually just gonna test this out. We actually recently realized that one problem with hydrating is that it can cause a stutter on scroll so if the app loads with HTML and you start scrolling and then hydration happens, it will stop the scroll temporarily.

It's super annoying. And you can actually solve that really easily with built in React features with startTransition. So if we have startTransition from React, we put that inside of here, that is going to make this possible for React to use its concurrent features. So that it will be able to pause as the user's scrolling.

So if the user is scrolling and it's hydrating, it will be able to do work in little chunks, so it doesn't cause stutter, actually pretty cool. So I wonder if that fixes it, it doesn't look like it does, so I'm not sure what this is and, yeah, probably, I mean it doesn't cause an actual problem in the app, but be something to look into in the future, sorry.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now