React: Don't render components in table who aren't visible

I'd go with react-visibility-sensor.

Something like:

const VisibilitySensor = require('react-visibility-sensor');

class TableRow extends React.Component {
    onChange(isVisible) {
        this.setState({ isVisible });
    };

    render () {
        const { isVisible } = this.state;

        return (
            <VisibilitySensor onChange={onChange}>
                {isVisible && {/* Table row content */}}
            </VisibilitySensor>
        );
     }
} 

A little late to this party. But React Virtualized has been pretty good to me.

I am not familiar with Mobx or any solutions related to that, but only showing visible components has taken on the name "Infinite" components in the community. So searching "Infinite Scroll" or "Infinite List" may give you some ideas.

The best library I have found and enjoy using is react-infinite. Basically the library is a HOC that you pass children components to.

If you are looking for a purely JavaScript implementation with no 3rd party libraries, Ben Alpert from the facebook team posted this fiddle/code on SO.