preact: React-infinite fails with `Cannot read property 'scrollShouldBeIgnored' of undefined`

Hi @developit! I was checking some functionality which is based on https://github.com/seatgeek/react-infinite. I wasn’t able to check if onLoad triggers because it throws an error while scrolling. It’s reproducible with preact@5.1.0-beta.26 as well as preact@5.3.0:

import Infinite from 'react-infinite'

export default class TestInfinite extends React.Component {
    onLoad = () => {
        console.log('`onLoad` should be triggered')
    }

    render() {
        const height = 300
        const offset = 100

        return (
            <Infinite
                containerHeight={height - offset}
                elementHeight={height}
                infiniteLoadBeginEdgeOffset={offset}
                onInfiniteLoad={this.onLoad}>
                    <div style={{height}}>content</div>
            </Infinite>
        )
    }
}

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 32 (23 by maintainers)

Commits related to this issue

Merge pull request #234 from developit/hook_alias Add preact/hooks alias in demo app — committed to preactjs/preact by marvinhagemeister 5 years ago

Most upvoted comments

Turns out this was actually ridiculously easy - createClass binds methods you pass to it, but it was binding them after invoking the constructor, which was where react-infinite grabs its reference to the event handler in question - meaning it had a reference to the unbound function instead of the bound one. Simple fix was just to bind earlier. Your repro is now working for me locally @slmgc ❤️

The fix is released as preact-compat@3.9.2.

developit on Nov 14, 2016

yay! 7.0 will become mainline shortly, it’s just in beta as the group of (technically) breaking changes gets solidified.

developit on Nov 14, 2016

Well, at least you’re off to a good start. Thanks for your time! 😃

jugimaster on Oct 9, 2016

Preact pretty accurately matches the React API, but it’s possible there are implementation details from React that libraries then depend on. As an example, the timing of lifecycle events within the diff - a very subtle detail not covered in the React docs, but heavily relied on by libraries.

As I suspected! It just seems like a battle you can’t win. Why would a lib rely on something like that, besides its authors not being into writing robust software?

I didn’t realize preact-redux was your lib. My first reaction to seeing it was something like “oh no, it’s starting again… !” 😛

(… “and soon we’ll have stuff like preact-redux-router and of course its lighter, less hacky cousin preact-redux-simple-router, and so on”)

jugimaster on Oct 9, 2016

@developit great, I’ll check it!

slmgc on Aug 25, 2016

@developit can replicate issue whenever the Infinite component properties elementHeight exceeds containerHeight for all initially loaded children. So something is causing the component to disappear when scroll bar get activated during the initial load.

Played with another sample in Preact (works fine) which dynamically loaded 1000+ elements in 2sec intervals, but the initially loaded data did not exceed the containerHeight. Hope that makes sense. Can provide sample if needed.

@slmgc Side note - should be loading styles like: <div style={{height: elementHeight}}>content1</div>

Changed variable name for illustration purposes

mikekidder on Jul 28, 2016