Avoid this Common Suspense Gotcha in by Reading Data From Components
Suspense can have an unfriendly learning curve.
Components with suspended content need a component boundary.
Resource reads can't happen in the same component as the Suspense and error boundaries components.
When you have your Suspense and error boundary components in place but still get errors about them absence, you probably need to move a read() call into a component.
I could not replicate the error that was shown in the video. It appears that this <div>{initialCollection.read().count}</div> works with no issues.
It might be due to the experimental state of Suspense. The following are my versions (although the version number might make no sense)
"react": "^0.0.0-experimental-b53ea6ca0",
"react-dom": "^0.0.0-experimental-b53ea6ca0",I also did not see that error. I am using the same version - I would assume the value after experimental is the commit hash for this version.
seetd, Stephen James, and all others who were not able to reproduce the error,
I am very sorry for the inconvenience. Here's what went wrong:
Before publishing the course, I changed src/index.js to use a dynamic component import so that the let lesson = "complete"; could be on its own line.
In order to make the dynamic import work, I had to wrap the <Lesson /> in <Suspense /> which consequently did the work of catching suspended state of initialCollection.
I've fixed the mistake with this diff: https://github.com/chantastic/react-suspense-course/commit/dbd7e02c7033750a65e7c6ea457c64c3e8029e16.
Again, very sorry for the careless last minute change.