He revisado un par de artículos sobre useCallback y useMemo sobre cuándo usar y cuándo no usar, pero en su mayoría he visto código muy contrived . Estaba mirando un código en mi empresa donde noté que alguien había hecho esto:
const takePhoto = useCallback(() => { launchCamera({ mediaType: "photo", cameraType: "front" }, onPickImage); }, []); const pickPhotoFromLibrary = async () => { launchImageLibrary({ mediaType: "photo" }, onPickImage); } const onUploadPress = useCallback(() => { Alert.alert( "Upload Photo", "From where would you like to take your photo?", [ { text: "Camera", onPress: () => takePhoto() }, { text: "Library", onPress: () => pickPhotoFromLibrary() }, ] ); }, [pickPhotoFromLibrary, takePhoto]);Así se llama onUploadPress:
<TouchableOpacity style={styles.retakeButton} onPress={onUploadPress} > ¿Crees que esta es la forma correcta de llamarlo? Según mi comprensión de esos artículos, esto parece incorrecto. ¿Alguien puede decirme cuándo usar useCallback y quizás también explicar useCallback en términos más humanos?
Artículo que leí: https://kentcdodds.com/blog/usememo-and-usecallback .
useCallback devuelve una función JavaScript normal, con respecto a cómo usarla. Es la misma función que la que obtiene como primer parámetro respecto a lo que hace. Aunque la función devuelta se memoriza. Lo que significa que cuando su componente se vuelve a renderizar, React no recreará esa función (que es el comportamiento de una función normal dentro de un componente).
React recreará una nueva versión de esa función si cambia una de las variables dentro de la matriz (el segundo parámetro de useCallback ). Vale la pena si tiene esa función en la matriz de dependencias de un useEffect por ejemplo. También vale la pena si lo pasa a un componente que está memorizado con React.memo .
La devolución de llamada de un
useEffectse llama en el primer renderizado y cada vez que cambia una de las variables dentro de la matriz de dependencias. Y dado que normalmente se crea una nueva versión de esa función cada vez que el componente se vuelve a renderizar, la devolución de llamada podría llamarse infinitamente. Es por eso queuseCallbackse usa para memorizar esa función.
Un componente memorizado se volverá a renderizar solo si su
stateopropscambian, no porque su padre se vuelva a renderizar. Y debido a que normalmente se crea una nueva versión de esa función pasada cuando el padre vuelve a renderizar, el componente secundario obtiene una nueva referencia de esa función, por lo que se vuelve a renderizar. Es por eso queuseCallbackse usa para memorizar la función pasada.
Memoizar no es gratis. Memorizar mal es peor que no memorizar nada. Aquí está el recurso más completo y más corto que he visto para comprender en profundidad, el proceso de renderizado de React para saber cuándo memorizar y cuándo no: React Render Tutorial .
En su caso, usar useCallback para onUploadPress es una pérdida de rendimiento, pickPhotoFromLibrary , una función no memorizada está en la matriz de dependencia. Es una pérdida de rendimiento también porque TouchableOpacity no se memoriza con React.memo .