• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

120
Views
¿Cuándo usar useCallback?

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 .

about 3 years ago · Santiago Trujillo
1 answers
Answer question

0

1. Información general

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 useEffect se 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 que useCallback se usa para memorizar esa función.

Un componente memorizado se volverá a renderizar solo si su state o props cambian, 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 que useCallback se usa para memorizar la función pasada.

2. Nota importante

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 .

3. Su caso de uso

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 .

about 3 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error