API memo ใน React

ก่อนที่เราจะพิจารณาฮุคถัดไป จำเป็นต้องกล่าวถึง API ที่มีประโยชน์อย่าง memo ด้วย ซึ่งช่วยเรา หลีกเลี่ยงการเรนเดอร์คอมโพเนนต์ซ้ำ หาก props ของมันยังคงไม่เปลี่ยนแปลง

ลองมาดูตัวอย่างกัน สร้าง คอมโพเนนต์ App ซึ่งจะมี อินพุตสองช่อง สำหรับสมมติว่าใส่ ชื่อและนามสกุล:

return (
	<div>
		<label>
			ชื่อ:
			<input value={name} onChange={(e) => setName(e.target.value)} />
		</label>
		<br />
		<label>
			นามสกุล:
			<input value={surn} onChange={(e) => setSurn(e.target.value)} />
		</label>
	</div>
);

เพิ่ม state สำหรับพวกมัน ที่ส่วนต้นของคอมโพเนนต์:

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

สร้างคอมโพเนนต์ลูกเพิ่ม Child.js ให้มันแสดง คำทักทาย ซึ่งจะแสดง ชื่อที่ป้อนเข้าไป และในคอนโซลจะแสดง ข้อความ 'child render' ทุกครั้งที่ คอมโพเนนต์นี้เรนเดอร์:

function Child({ name }) {
	console.log('child render');
	return <h3>สวัสดี {name}!</h3>;
}

เพิ่ม Child ลงใน markup ของ คอมโพเนนต์หลักหลังอินพุตสุดท้าย และจะส่งชื่อให้มัน เป็น props:

<Child name={name} />

นำเข้า (import) มันในคอมโพเนนต์หลัก:

import Child from './Child';

แล้วมาเปิดคอนโซลและลอง พิมพ์ชื่อและนามสกุลในช่องป้อนข้อมูล ที่นี่ เราจะเห็นว่า แม้จะป้อนอักขระใน ช่องสำหรับนามสกุล คอมโพเนนต์ลูกของเรา ก็จะถูกวาดใหม่ทุกครั้ง ไม่มี ปัญหาเลย เพราะคอมโพเนนต์ของเราเล็ก แต่ลองจินตนาการดู หากคอมโพเนนต์นี้ แสดงข้อมูลจำนวนมาก และในขณะเดียวกัน ถูกวาดใหม่ทุกครั้ง

และตอนนี้ลองห่อหุ้มคอมโพเนนต์ลูก ด้วย memo และดูว่า การเรนเดอร์เปลี่ยนไปอย่างไร เริ่มต้นด้วยการ นำเข้า memo เข้ามาในนั้น:

import { memo } from 'react';

จากนั้นสร้างตัวแปรใหม่และ กำหนดค่า Child ของเราให้กับมัน ซึ่งห่อหุ้ม ด้วย memo เราจะได้ นิพจน์ฟังก์ชัน ดังนี้:

const Child = memo( function Child({ name }) {
	console.log('child render');
	return <h3>สวัสดี {name}!</h3>;
});

เปิดคอนโซลและลอง ป้อนชื่อและนามสกุลในช่องอีกครั้ง ตอนนี้ เราเห็นว่าเมื่อป้อนนามสกุล คอมโพเนนต์ลูกของเราไม่ ถูกวาดใหม่

ต้องจำไว้ว่าสิ่งนี้จะไม่ทำงาน หากเมื่อ props ไม่เปลี่ยนแปลงแต่ state ที่คอมโพเนนต์ใช้อยู่เปลี่ยนแปลง หรือ context ที่มีการเปลี่ยนแปลงถูกใช้งาน

นำโค้ดของคอมโพเนนต์ App ที่เราทำในบทเรียนนี้ เก็บไว้ แค่อินพุตแรก สร้าง React คอมโพเนนต์ Text ที่มีพารากราฟ พร้อมข้อความ 'long text' และ วางมันใน App หลังอินพุต

ในคอมโพเนนต์ Text ให้เพิ่ม บรรทัด console.log('text render'); ตรวจสอบให้แน่ใจว่าเมื่อป้อนอักขระ ลงในอินพุต คอมโพเนนต์ Text ถูกวาดใหม่ทุกครั้ง

และตอนนี้ห่อหุ้มคอมโพเนนต์ Text ด้วย memo ตรวจสอบให้แน่ใจ ว่าเมื่อป้อนอักขระในอินพุต คอมโพเนนต์ Text ไม่ถูกวาดใหม่ ซ้ำอีก