question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

lazy/Suspense causing re-rendering to break application

See original GitHub issue

Performing a re-render inside a lazy loaded component causes a TypeError. This does not happen with React’s Suspense.

The error can be reproduced with the current version of Preact. The problem does not exist in the 10.0.5 version.

It seems that the problem can be related with Suspense not setting the children pointer correctly. This was addressed in the commit b0fe5e7, but with the change to version 10.1.X it was lost.

Reproduction

Codesandbox that reproduces the error in Preact: https://codesandbox.io/s/compassionate-bell-t0vww

Same codesandbox working in React: https://codesandbox.io/s/white-hooks-cdj8q

Steps to reproduce

Render an element inside a lazy loaded component and force a re-render. In the sandbox there is a hook that calls setState the first time the element is loaded.

Expected Behavior

The component should be re-rendered the first time setState is called and then continue to work normally.

Actual Behavior

An error is thrown:

TypeError: Cannot set property ‘0’ of null

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
olabalacommented, Jul 15, 2020

@marvinhagemeister thank u so much 🤝

0reactions
marvinhagemeistercommented, Jul 15, 2020

@olabala We’ve just published 10.4.6 🎉

Read more comments on GitHub >

github_iconTop Results From Across the Web

All You Need To Know About React Suspense - CopyCat Blog
We'll create a suspense fallback UI for our React app, this fallback UI will be rendered before our component is fully ready to...
Read more >
Suspense on React: The Act of Rendering While You Load
Conclusion React.suspense is an amazing tool used by developers to be able to show a loader while components are not available to be...
Read more >
React Suspense: Lessons Learned While Loading Data
The React. lazy utility for lazy loading components works with Suspense already, and I've previously written about using Suspense to wait until ...
Read more >
How To Stop React Rerendering My Page With Dynamic ...
The issue is that React incorrectly thinks the components are a new component every time the component re-renders.
Read more >
Experimental React: Using Suspense for data fetching
When App mounts for the first time, it tries to render UserWelcome first, and this triggers the data.userDetails.read() line. If the data isn't ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found