Efficiently update all items in large flat list in react native

Question

I'm writing an image picker using react-native's CameraRoll API and rendering them in a FlatList inside CameraRollScreen component. This component takes a prop called maxPhotos, say 3, when a user has selected 3 photos, all other photos will be disabled (cannot be selected anymore), it looks like this (this is what I have right now, it works, but not performant):

As you can see, when I've selected 3 photos (which is the limit), all other photos are covered by a transparent view (disabled). This is not performant, doesn't seem so in the GIF, but when running on a real device, this problem can no longer be ignored. Selecting the first 2 photos doesn't cause any lag, however, upon selecting the last photo, since all other photos will have to be disabled, it becomes laggy. But I have no idea how else I could disable the other photos without disabling them 1 by 1. Here is the code I have for my image picker:

Since every image has different states, I also make each photo a PureComponent called CameraRollImage that has the following state:

{
    uri: '',
    index: -1          // if not selected, it's -1, if selected, it denotes
                       // the position of the photo in the 'selectedPhotos'
                       // array
    disabled: false    // Whether it should be disabled
}

CameraRollImage component:

class CameraRollImage extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            uri: '',
            index: -1,
            disabled: false
        };

        this.onSelectPhoto = this.onSelectPhoto.bind(this);
    }

    componentWillMount() {
        const { uri, index, disabled } = this.props;
        this.setState({ uri, index, disabled });
    }

    componentWillReceiveProps(nextProps) {
        const { uri, index, disabled } = nextProps;
        this.setState({ uri, index, disabled });
    }

    onSelectPhoto() {
        const { uri, index } = this.state;
        this.props.onSelectPhoto({ uri, index });

        // 'onSelectPhoto' is a method passed down to each photo
        // from 'CameraRollScreen' component
    }

    render() {
        const { uri, index, disabled } = this.state;

        return (
            <View style={{ ... }}>
                <TouchableOpacity
                    disabled={disabled}
                    onPress={this.onSelectPhoto}
                >
                    <Image
                        source={{ uri }}
                        style={{ ... }}
                    />
                </TouchableOpacity>

                // If disabled, render a transparent view that covers the photo

                {disabled && <View
                    style={{
                        position: 'absolute',
                        backgroundColor: 'rgba(0, 0, 0, 0.75)',
                        width: ... height: ...
                    }}
                />}

                // render the index here

            </View>
        );
    }
}

export default CameraRollImage;

Then, in CameraRollScreen Component:

class CameraRollScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            allPhotos: [],      // all photos in camera roll
            selectedPhotos: []
        };

        this.onSelectPhoto = this.onSelectPhoto.bind(this);
        this.renderPhoto = this.renderPhoto.bind(this);
    }

    componentWillMount() {
        // Access the photo library to grab all photos
        // using 'CameraRoll' API then push all photos
        // to 'allPhotos' property of 'this.state'
    }

    onSelectPhoto({ uri, index }) {
        let { selectedPhotos } = { ...this.state };

        if (index === -1) {
            // this means that this photo is not selected
            // and we should add it to 'selectedPhotos' array
            selectedPhotos.push(uri);
        } else {
            _.pullAt(selectedPhotos, index);
        }

        this.setState({ selectedPhotos });
    }

    renderPhoto({ item }) {
        // item is the uri of the photo

        const { selectedPhotos } = this.state;
        const index = _.indexOf(selectedPhotos, item);

        // A photo should be disabled when reach the limit &&
        // it's not selected (index === -1)

        return (
            <CameraRollImage
                uri={item}
                index={index}
                onSelectPhoto={this.onSelectPhoto}
                disabled={index === -1 && selectedPhotos.length >= 3}
            />
        );
    }

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

        return (
            <FlatList
                data={allPhotos}
                extraData={this.state}
                ...
                ...
                numColumns={3}
                renderItem={this.renderPhoto}
            />
        );
    }
}

export default CameraRollScreen;

I have only 100 photos in my photo library and it's already causing lags, many people have way way way more photos than I do, this way will cause disaster, but how should I go about updating so many photos in FlatList? Or, should I use FlatList at all?

Answer 1

Found the solution, thanks to Pir Shukarullah Shah and RaphaMex.

If I scroll down fast enough, many images were not rendered and they are being rendered when I reach them. This seems right, why render them anyway when they're not on the screen? What I did was that I made use of onViewableItemsChanged of FlatList:

<FlatList
    ...
    ...
    keyExtractor={(item) => item}    // This is important!!!
    onViewableItemsChanged={this.onViewablePhotosChanged}
    initialNumberToRender={Math.ceil(SCREEN_HEIGHT / IMAGE_SIZE) * 3}
    ...
/>

Then, onViewablePhotosChanged method:

onViewablePhotosChanged({ viewableItems }) {
    let viewablePhotos = [];
    viewableItems.forEach((item) => viewablePhotos.push(item.key));
    this.setState({ viewablePhotos });

    // Here, every object in 'viewableItems' has a key, which
    // is the key you provided in 'keyExtractor={(item) => ...}',
    // I used the 'uri' of each photo as the key, that's why
    // I am pushing viewable photos' uri's to 'viewablePhotos' array
}

Lastly, modify the renderPhoto function to pass a viewable prop

renderPhoto({ item }) {
    ...
    ...

    return (
        <CameraRollImage
            ...
            ...
            viewable={_.include(this.state.viewablePhotos, item)}
        />
    );
}

Then, in CameraRollImage component, where we render images, there is a prop called viewable, if viewable === false, we simply do not update it:

componentWillReceiveProps(nextProps) {
    const { ..., ..., viewable } = nextProps;

    if (!viewable) {
        this.setState({ viewable: false });
        return;
    }

    ...
    ...
}

BETTER YET!!! if viewable is false, instead of rendering the image, we render an equal-sized empty view, you know, to save memory, which of course doesn't seem to be important if there're only 100 photos:

render() {
    if (!this.state.viewable) {
        return (
            <View
                style={{
                    width={IMAGE_SIZE}
                    height={IMAGE_SIZE}
                }}
            />
        );
    }

    return (
        <Image
            ...
            ...
        />
    );
}