API memo trong React

Trước khi chúng ta xem xét hook tiếp theo, cần phải đề cập đến một API hữu ích là memo, giúp chúng ta tránh việc render lại component, nếu các props của nó không thay đổi.

Hãy phân tích điều này bằng một ví dụ. Tạo component App, trong đó có hai input, giả sử để nhập tên và họ:

return (
	<div>
		<label>
			tên:
			<input value={name} onChange={(e) => setName(e.target.value)} />
		</label>
		<br />
		<label>
			họ:
			<input value={surn} onChange={(e) => setSurn(e.target.value)} />
		</label>
	</div>
);

Thêm state cho chúng vào đầu component:

const [name, setName] = useState('');
const [surn, setSurn] = useState('');

Tạo thêm một component con Child.js, để nó hiển thị lời chào, trong đó sẽ hiển thị tên được nhập vào. Đồng thời, trong console sẽ hiển thị chuỗi 'child render' khi component này được render mỗi lần:

function Child({ name }) {
	console.log('child render');
	return <h3>Xin chào {name}!</h3>;
}

Thêm Child vào phần giao diện của component chính sau input cuối cùng và sẽ truyền tên cho nó như một prop:

<Child name={name} />

Import nó vào component chính:

import Child from './Child';

Và bây giờ hãy mở console và bắt đầu nhập tên và họ vào các trường. Ở đây chúng ta sẽ thấy rằng ngay cả khi nhập ký tự vào trường họ, component con của chúng ta vẫn sẽ được vẽ lại mỗi lần. Không có vấn đề gì, vì component của chúng ta nhỏ. Nhưng hãy tưởng tượng nếu component này hiển thị một lượng lớn dữ liệu và đồng thời, lại được vẽ lại mỗi lần.

Bây giờ hãy bọc component con trong memo và xem cách render thay đổi như thế nào. Trước tiên import memo vào nó:

import { memo } from 'react';

Sau đó tạo một biến mới và gán Child của chúng ta, được bọc trong memo, cho nó. Chúng ta sẽ có biểu thức hàm sau:

const Child = memo( function Child({ name }) {
	console.log('child render');
	return <h3>Xin chào {name}!</h3>;
});

Mở console và một lần nữa nhập tên và họ vào các trường. Bây giờ chúng ta thấy rằng khi nhập họ, component con của chúng ta không được vẽ lại.

Cần nhớ rằng điều này sẽ không hoạt động nếu các state được component sử dụng thay đổi mặc dù props không đổi, hoặc context sử dụng các thay đổi.

Lấy code của component App, mà chúng ta đã làm trong bài học này, chỉ để lại input đầu tiên trong đó. Tạo một React component Text, chứa một đoạn văn với văn bản 'văn bản dài', và đặt nó trong App sau input.

Trong component Text, thêm dòng console.log('text render');. Hãy đảm bảo rằng khi nhập ký tự vào input, component Text được vẽ lại mỗi lần.

Và bây giờ hãy bọc component Text trong memo. Hãy đảm bảo rằng khi nhập ký tự vào input, component Text không bị vẽ lại một lần nữa.