useMemo và useCallback là 2 hook trong React Native được sử dụng để optimize performance của các component bằng cách memorize lại các giá trị và hàm. Mặc dù cả 2 đều giúp tránh việc tính toán lại không cần thiết, chúng có mục đích sử dụng khác nhau

useMemo

useMemo được sử dụng để memorize lại kết quả của một hàm tính toán. Nó chỉ tính toán lại giá trị khi một trong các dependencies thay đổi

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• useMemo nhận vào 2 đối số:

  • Một function tính toán giá trị () => computeExpensiveValue(a, b)

  • Một array các dependencies [a,b]

• Closure là một khái niệm trong JavaScript mô tả hiện tượng một hàm "ghi nhớ" được ngữ cảnh (scope) nơi nó được tạo ra, ngay cả khi hàm đó được gọi bên ngoài ngữ cảnh ban đầu.

• Khi sử dụng useMemo:

  • Function tính toán chỉ được gọi lại khi một trong các dependencies thay đổi

  • Giá trị tính toán sẽ được memorize thông qua closure và trả về trong các lần render sau nếu các dependencies không thay đổi

useCallback

useCallback được sử dụng để ghi nhớ một hàm (callback). Nó chỉ tạo lại callback khi một trong các dependencies thay đổi

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

• useCallback nhận vào 2 đối số:

  • Một callback cần memorize () => doSomething(a, b)

  • Một array các dependencies [a,b]

• Khi sử dụng useCallback:

  • Callback chỉ được tạo lại khi một trong các dependencies thay đổi

  • Callback được memorize thông qua closure và giữ nguyên tham chiếu trong các lần render sau nếu các dependencies không thay đổi

Khi nào nên sử dụng useMemo và useCallback

• Dùng useMemo khi:

  • Bạn có một giá trị tính toán tốn kém tài nguyên và không muốn tính toán lại giá trị đó trong mỗi lần render nếu không cần thiết

• Dùng useCallback khi:

  • Bạn có một callback được truyền xuống các component con dưới dạng props và không muốn callback này thay đổi tham chiếu trong mỗi lần render nếu không cần thiết

  • Điều này giúp tránh việc các component con không cần thiết bị render lại