Sử dụng useMemo và useCallback trong việc tối ưu code - ReactJS (ok)

https://giaphiep.com/blog/su-dung-usememo-va-usecallback-trong-viec-toi-uu-code-reactjs-26947

Sử dụng useMemo và useCallback trong việc tối ưu code - ReactJS

React

Không dùng useCallback

src\Counter.jsx

import { useEffect, useState } from "react";
const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const loggingStatus = () => {
    console.log("Run from ChildComponent");
  };
  const addMore = () => {
    setCount(prev => prev + 1);
  };
  return (
    <div>
      <p>Current: {count}</p>
      <ChildComponent loggingStatus={loggingStatus} />
      <button onClick={addMore}>Click</button>
    </div>
  );
};
const ChildComponent = ({ loggingStatus }) => {
  useEffect(() => {
    loggingStatus();
  }, [loggingStatus]);
  return <div />;
};
export default ParentComponent;

src\App.jsx

import ParentComponent from "./Counter";
function App() {
  return (
    <>
      <ParentComponent />
    </>
  );
}
export default App;

Với useCallback

src\Counter.jsx

import { useCallback, useEffect, useState } from "react";
const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const loggingStatus = useCallback(() => {
    console.log("Run from ChildComponent");
  }, []);
  const addMore = () => {
    setCount(prev => prev + 1);
  };
  return (
    <div>
      <p>Current: {count}</p>
      <ChildComponent loggingStatus={loggingStatus} />
      <button onClick={addMore}>Click</button>
    </div>
  );
};
const ChildComponent = ({ loggingStatus }) => {
  useEffect(() => {
    loggingStatus();
  }, [loggingStatus]);
  return <div />;
};
export default ParentComponent;

Trong bài viết lần này, chúng ta sẽ làm rõ về việc sử dụng useMemo và useCallback để tối ưu hiệu năng trong ứng dụng React

:thinking: Vấn đề

Thực sự useMemo và useCallback có giúp tối ưu hiệu năng trong React App hay không hay chúng chỉ làm mọi thứ trở nên tồi tệ hơn?

:computer: Cách hoạt động

useCallback

useCallback là một Hook được giới thiệu trong React từ bản 16.8. useCallback trả về một function và một array chứa các dependencies (những biến số được truyền vào từ bên ngoài mà function này phụ thuộc khi chạy). useCallback sử dụng cơ chế memorization - ghi nhớ kết quả của một function vào trong memory và sẽ trả về function được ghi nhớ trong trường hợp các dependencies này không thay đổi.

const myFunction = useCallback(() => {
  //do someting
},[dependencies])

Tại sao cần dùng useCallback?

const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const loggingStatus = () => {
    console.log("Run from ChildComponent");
  };
  const addMore = () => {
    setCount(prev => prev + 1);
  };

  return (
    <div>
      <p>Current: {count}</p>
      <ChildComponent loggingStatus={loggingStatus} />
      <button onClick={addMore}>Click</button>
    </div>
  );
};

const ChildComponent = ({ loggingStatus }) => {
  useEffect(() => {
    loggingStatus();
  }, [loggingStatus]);
  return <div />;
};

Để ý ví dụ ở trên, chúng ta có ParentComponent và ChildComponent. Khi nhấn vào button ở ParentComponent, component này sẽ bị render lại do có sự thay đổi về state. Kéo theo đó, ChildComponent cũng bị render lại theo cho dù không có sự thay đổi gì (props truyền vào y nguyên)

useCallback được sinh ra để giải quyết vấn đề này. Nó sẽ ghi nhớ lại function được truyền vào và danh sách các dependencies. Lúc này, khi nhấn vào button, React sẽ render lại ParentComponent và so sánh xem props của ChildComponent có thay đổi không để render tiếp. Vì loggingStatus hoàn toàn không phụ thuộc vào dependency nào, nên giá trị của nó không thay đổi và ChildComponent sẽ không bị render lại.

So sánh hai trường hợp

// Không dùng useCallback
const loggingStatus = () => {
    console.log("Run from ChildComponent");
  };

// Với useCallback
const loggingStatus = useCallback(() => {
    console.log("Run from ChildComponent");
  },[]);

Vâỵ cái giá của việc dùng useCallback là gì? Nếu để hai đoạn code đứng độc lập như vậy, chúng ta có thể khẳng định chắc chắn rằng useCallback sẽ tiêu tốn nhiều memory hơn, cụ thể:

• useCallback phải ghi nhớ function được truyền vào trong nó

• useCallback phải khởi tạo một array chứa những dependencies và ghi nhớ chúng

Cụ thể hơn, trong lần render component thứ 2, loggingStatus sẽ được xoá bỏ trên memory và khởi tạo lại. Tuy nhiên với useCallback, chúng ta vừa phải khởi tạo một function mới, đồng thời ghi nhớ function cũ đã có của lần render đầu. Điều tương tự cũng xảy ra với dependency array. Đứng dưới góc độ hiệu năng của memory, rõ ràng useCallback tiêu tốn nhiều tài nguyên hơn.

useMemo thì sao?

useMemo cũng có cơ chế hoạt động tương tự như useCallback, nhưng thay vì truyền vào một function, chúng ta có thể truyền vào một function trả về mọi kiểu dữ liệu mà chúng ta muốn ghi nhớ:

const myFruit = ['apple', 'orange', 'banana', 'watermelon']
const initialMyFruit = React.useMemo(
  () => ['apple', 'orange', 'banana', 'watermelon'],
[])

initialMyFruit sẽ chỉ được khởi tạo lại trong trường hợp giá trị của một dependency thay đổi.

Tóm lại

Cái gì cũng có cái giá của nó, vì vậy chúng ta cần sử dụng useCallback và useMemo một cách thông thái để tránh bị đồng nghiệp chê cười.

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

Có hai trường hợp như sau:

• Referential equality

• Những tính toán nặng

Referential equality

Vì không có từ nào ở Tiếng Việt đồng nghĩa với “Referential equality” nên mình sẽ giải thích concept này một chút. Làm sao để React biết được có sự thay đổi trong dependencies, state hoặc props để re-render component? React sẽ so sánh như sau:

true === true         // true
false === false       // true
1 === 1               // true
'a' === 'a'           // true
{} === {}             // false
[] === []             // false
() => {} === () => {} // false
const z = {}
z === z               // true

Ở đây có một điểm đáng lưu ý là các object, array và function dù chứa nội dung giống nhau nhưng Javascript vẫn hiểu rằng đây là hai sự vật hiện tượng khác nhau. Ví dụ, bạn và hàng xóm đều có cùng một chiếc xe Mercedes-Maybach S650, dù hai chiếc xe này giống y hệt nhau, tuy nhiên không thể hiểu rằng chiếc xe của hàng xóm là của bạn được.

Tương tự như vậy, khi khởi tạo 2 object, array hay function, dù nội dung của chúng giống y hệt nhau, nhưng bản chất chúng thuộc về một vùng memory khác nhau nên vẫn sẽ là hai sự vật hiện tượng khác nhau.

Có hai trường hợp mà React sẽ sử dụng tới Referential equality:

Dependencies lists

Quay trở lại ví dụ ở trên với một chút thay đổi:

const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const myObject = {
    name: "Minh",
    age: 23
  };
  const addMore = () => {
    setCount(prev => prev + 1);
  };
  return (
    <div>
      <button onClick={addMore}>Click</button>
      <p>Count: {count}</p>
      <ChildComponent myObject={myObject} />
    </div>
  );
};

const ChildComponent = ({ myObject }) => {
  const { name, age } = myObject;
  useEffect(() => {
    console.log(myObject);
  }, [myObject]);
  return <div>{`Tên:${name} ${age} tuổi `}</div>;
};

Lần này, chúng ta khởi tạo myObject từ ParentComponent và truyền xuống ChildComponent thông qua props. Bên cạnh đó, useEffect được dùng để chạy console.log(myObject) mỗi khi có sự thay đổi từ props được truyền vào. Khi ấn nút Click ở ParentComponent, dù không có sự thay đổi trong myObject, tuy nhiên ChildComponent vẫn bị render lại. Lý do cho việc này chính là cơ chế Referential equality của JavaScript.

// Không dùng useMomo

src\Counter.jsx

import { useCallback, useEffect, useMemo, useState } from "react";
const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const myObject = {
    name: "Minh",
    age: 23
  };
  const addMore = () => {
    setCount(prev => prev + 1);
  };
  return (
    <div>
      <button onClick={addMore}>Click</button>
      <p>Count: {count}</p>
      <ChildComponent myObject={myObject} />
    </div>
  );
};
const ChildComponent = ({ myObject }) => {
  const { name, age } = myObject;
  useEffect(() => {
    console.log(myObject);
  }, [myObject]);
  return <div>{`Tên:${name} ${age} tuổi `}</div>;
};
export default ParentComponent;

src\App.jsx

import ParentComponent from "./Counter";
function App() {
  return (
    <>
      <ParentComponent />
    </>
  );
}
export default App;

// Với useMono

src\Counter.jsx

import { useCallback, useEffect, useMemo, useState } from "react";
const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const myObject = useMemo(() => ({
    name: "Minh",
    age: 23
  }), []);
  const addMore = () => {
    setCount(prev => prev + 1);
  };
  return (
    <div>
      <button onClick={addMore}>Click</button>
      <p>Count: {count}</p>
      <ChildComponent myObject={myObject} />
    </div>
  );
};
const ChildComponent = ({ myObject }) => {
  const { name, age } = myObject;
  useEffect(() => {
    console.log(myObject);
  }, [myObject]);
  return <div>{`Tên:${name} ${age} tuổi `}</div>;
};
export default ParentComponent;

Đây chính là lúc useMemo được sử dụng:

 const myObject = useMemo(() => ({
    name: "Minh",
    age: 23
 }),[]);

Những tính toán nặng, đồ thị, animation

Thật ra, trong hầu hết các trường hợp chúng ta sẽ không cần phải bận tâm tới việc component bị re-render do React có tốc độ xử lý rất nhanh và việc tối ưu này sẽ không đem lại quá nhiều sự khác biệt. Tuy nhiên có một trường hợp, useEffect và useMemo nên được dùng tới để hạn chế việc khởi tạo & execute những function “ngốn CPU” như ở dưới đây:

function mySlowFunction(baseNumber) {
	console.time('mySlowFunction');
	let result = 0;	
	for (var i = Math.pow(baseNumber, 7); i >= 0; i--) {		
		result += Math.atan(i) * Math.tan(i);
	};
	console.timeEnd('mySlowFunction');
}
mySlowFunction(8);

Kết luận

Việc sử dụng những API như useMemo hoặc useCallback để tối ưu code không có gì xấu. Tuy nhiên, lạm dụng “tối ưu code” mà không thực sự hiểu rõ vấn đề có thể sẽ khiến hiệu năng của code trở nên tồi tệ hơn. Bên cạnh đó, những concept như useMemo và useCallback có thể làm code trở nên phức tạp và khó đọc, làm giảm hiệu quả khi làm việc chung giữa các thành viên trong team. Lời khuyên của mình là không nên tối ưu một cách máy móc, hãy thực sự hiểu và ứng dụng những API này một cách phù hợp trong từng tình huống khác nhau.

Reference & credits

Bài viết này có tham khảo ý tưởng của một số bài viết khác:

• https://kentcdodds.com/blog/usememo-and-usecallback

• https://viblo.asia/p/immutability-in-reactjs-WAyK8R49lxX

Photo by Jr Korpa on Unsplash

Origin post: https://viblo.asia/p/su-dung-usememo-va-usecallback-trong-viec-toi-uu-code-reactjs-oOVlYM2Ql8W