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.

[labs/virtualizer] Error when immediately re-rendering (before async connect code runs)

See original GitHub issue

Which package(s) are affected?

Virtualizer (@lit-labs/virtualizer)

Description

When using the latest 0.0.0-masonry-preview-20221107225026 preview, the virtualizer throws an error on initial render. It still seems to work after that.

The error:

Virtualizer.js:168 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'detach')
    at Virtualizer.disconnected (Virtualizer.js:168:1)
    at VirtualizeDirective._makeVirtualizer (virtualize.js:74:1)
    at VirtualizeDirective._updateVirtualizerConfig (virtualize.js:59:1)
    at VirtualizeDirective.update (virtualize.js:48:1)
    at VirtualizeDirective._$resolve (directive.ts:134:1)
    at resolveDirective (lit-html.ts:1075:1)
    at ChildPart._$setValue (lit-html.ts:1353:1)
    at TemplateInstance._update (lit-html.ts:1181:1)
    at ChildPart._commitTemplateResult (lit-html.ts:1525:1)
    at ChildPart._$setValue (lit-html.ts:1375:1)

This is with the following markup:

        <tbody @visibilityChanged=${this.#onVisibilityChanged}>
          ${virtualize({ items: this.items, renderItem: item => this.renderItem(item) })}
        </tbody>

This does not throw any error with 0.7.2

Reproduction

Workaround

Is this a regression?

Yes. This used to work, but now it doesn’t.

Affected versions

Failing in 0.0.0-masonry-preview-20221107225026, used to work in 0.7.2

Browser/OS/Node environment

Issue Analytics

State:
Created 10 months ago
Reactions:1
Comments:12 (5 by maintainers)

Top GitHub Comments

1reaction

graynortoncommented, Nov 30, 2022

Thanks, @jpzwarte!

Here’s a reduced repro case: https://lit.dev/playground/#gist=f26038e7447c5788b90b2d3f4664c863 And the same with 0.7.2 (no error): https://lit.dev/playground/#gist=48a107d1b81128200030289c55d6714f

And just to be clear, this repros when using the <lit-virtualizer> element as well (is not specific to directly using the directive): https://lit.dev/playground/#gist=16f1ffb903ecbe29359a99cd864d88d8

0reactions

cintaccscommented, Dec 13, 2022

@graynorton no layout specified - just itemsArr and renderfunc

Top Results From Across the Web

React "after render" code? - Stack Overflow

I have code running that accesses the DOM immediately after a componentDidMount call and using solely window.requestAnimationFrame would result in the ...

Render re-entering after async function · Issue #186 - GitHub

This is a problem for React rendering because if the value is being used as a key value then the React display will...

Update on Async Rendering – React Blog

The solution to this problem is to use the new “commit” phase lifecycle, getSnapshotBeforeUpdate . This method gets called immediately before ...

Asynchronous rendering with useDeferredValue | by Nicolas Li

React rendering is synchronous · React first computes the new virtual DOM induced by the state change. · When the new virtual DOM...

Stop useEffect React Hook re-render multiple times with Async ...

Today I share a quick trick on how to stop unwanted responses from re - rendering a react component whose useEffect has an...