API memo ใน React

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

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

App.jsxreturn (
  <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 สำหรับพวกมัน ที่ส่วนต้นของคอมโพเนนต์:

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

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

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

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

App.jsx<Child name={name} />

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

App.jsximport Child from './Child';

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

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

Child.jsximport { memo } from 'react';

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

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

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

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