[FIXED] Why are snapPoints memorizades with useMemo react-native-bottom-sheet

Issue

Why the documentation use useCallback and useMemo to memorize the props passed for the BottomSheet, what the performance win with this?

href="https://gorhom.github.io/react-native-bottom-sheet/usage" rel="nofollow noreferrer">https://gorhom.github.io/react-native-bottom-sheet/usage

import React, { useCallback, useMemo, useRef } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';

const App = () => {
  // ref
  const bottomSheetRef = useRef<BottomSheet>(null);

  // variables
  const snapPoints = useMemo(() => ['25%', '50%'], []);

  // callbacks
  const handleSheetChanges = useCallback((index: number) => {
    console.log('handleSheetChanges', index);
  }, []);

  // renders
  return (
    <View style={styles.container}>
      <BottomSheet
        ref={bottomSheetRef}
        index={1}
        snapPoints={snapPoints}
        onChange={handleSheetChanges}
      >
        <View style={styles.contentContainer}>
          <Text>Awesome 🎉</Text>
        </View>
      </BottomSheet>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: 'grey',
  },
  contentContainer: {
    flex: 1,
    alignItems: 'center',
  },
});

export default App;

Solution

I believe this is an unnecessary optimization. At least in this example.

There is no performance boost from memoization since there are no heavy computations inside those functions.

However, it is possible the author used them as a possible placeholder when heavier computations to calculate snap points or change event handler needs to be optimized.

Here's a nice explanation of when these hooks are needed.

https://www.joshwcomeau.com/react/usememo-and-usecallback/

Answered By - Miro Cosic
Answer Checked By - - Dawn Plyler (ReactFix Volunteer)