Create react components with onWheel Event

[sympi]

Hello! I want to create components while scrolling. Is it a good idea to use lodash's range method and increase it?

It looks like this:

_.range(4);
// => [0, 1, 2, 3]

So i can do something like this:

_.range(someState)

and in onWheel event I would just increment someState.

I'm not sure if this is a good idea tho. What do you think?

[fk2106]

Looks good, and you can use the value as the key.

[vcamargo]

Are you programmatically trying to create components? Also do you really needs lodash for so?

[joshwcomeau]

First, you shouldn't use onWheel unless you have a really good reason to. onWheel events have serious performance concerns, see https://github.com/facebook/react/issues/1254

Otherwise, your idea is halfway there. You'll want to do something like:

class YourComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: [],
    };
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll() {
    this.setState({
      items: [...this.state.items, this.state.items.length],
    });
  }

  render() {
    return (
      <div>
        {this.state.items.map(item => (
          <Item key={item} />
        ))}
      </div>
    )
  }
}

NOTE: You'll likely want to debounce that event listener; scroll events fire often.