How to stop Array from constantly re-rendering

Question

I have an image array where I am updating each value when I click on a button in react and pick an image. However the array is constantly rerendering when I only want it to when I pick an image. Here is my code:

   function OnboardingUploadPhotos() {
  const [modalVisible, setModalVisible] = useState(false);
  const [permissionStatus, setPermissionStatus] = useState('');
  const [files, setFiles] = useState<string[]>([]);
  const [fileArray, setFileArray] = useState<string[]>(['', '', '', '', '', '', '']);

  const setPermissions = useCallback(val => {
    setPermissionStatus(val);
  }, [setPermissionStatus]);

  const setIsModalVisible = useCallback(val => {
    setModalVisible(val);
  }, [setModalVisible]);

  async function fetchAssets() {
    const recentCameraRoll = await MediaLibrary.getAssetsAsync({first: 11});
    setFiles(recentCameraRoll.assets.slice(1).map(file => file.uri));
  }

  function replaceFileState(file: string, index: number) {
    let f = [...fileArray];
    f[index] = file;
    setFileArray(f);
  }

  useEffect(() => {
    fetchAssets();
  }, [fetchAssets]);

  return (
      <View>
        {permissionStatus ?
            <Modal style={styles.bottomModalView} isVisible={modalVisible} backdropOpacity={0}
                   onBackdropPress={() => setModalVisible(false)}>
              <View style={styles.modal}>
                <TouchableOpacity>
                  <Text style={{
                    borderBottomWidth: 1,
                    borderBottomColor: '#FFF',
                    color: '#FFF',
                    textDecorationLine: 'underline',
                    alignSelf: 'flex-end',
                    justifyContent: 'center',
                    paddingTop: 40
                  }}>All photos</Text>
                </TouchableOpacity>
                <ScrollView horizontal={true} scrollEnabled={true}
                            contentContainerStyle={{justifyContent: 'center', alignItems: 'center'}}>
                  {files.map((file, index) => {
                    return (
                        <TouchableWithoutFeedback key={index} onPress={() => replaceFileState(file, index)}>
                          <Image
                              key={file}
                              style={{width: 100, height: 100, marginLeft: 10, marginRight: 10, borderRadius: 4}}
                              source={{uri: file}}
                          />
                        </TouchableWithoutFeedback>
                    );
                  })}
                </ScrollView>
                <Text style={{fontSize: 22, color: '#FFF', marginLeft: 20, marginBottom: 20}}>Your photos</Text>
              </View>
            </Modal> :
            null
        }
        <Text>Upload your photos</Text>
        <View style={{flexDirection: "row", flexWrap: "wrap", justifyContent: 'space-evenly'}}>
          {fileArray.slice(0,6).map((image, index) => {
            console.log(fileArray)
            return (
                image != '' ?
                    <Image
                        key={image}
                        style={{width: 100, height: 100, borderRadius: 100}}
                        source={{uri: image}}
                    /> :
                    <OnboardingPhoto key={index} setStatus={setPermissions} setModal={setIsModalVisible}/>
            )
          })}
        </View>
      </View>
  );
}

It is a modal that has all the users latest images and on click of each image it replaces the empty placeholder image with the users image on the screen. However it constantly rerenders. Id say put it in a useEffect but I do not know where! Any help would be great, thanks!

Answer 1

I think you need to define a key property on the TouchableWithoutFeedback component.

See the guidelines here: https://reactjs.org/docs/lists-and-keys.html

Answer 2

Hooks are ment to be used inside Function Components, that's maybe one of the reasons.