การใช้งาน React Refs และ useRef Hook

React ใช้แนวทางแบบ declarative เมื่อคุณอัปเดต state ตัว React จะอัปเดต UI ให้โดยอัตโนมัติ ซึ่งวิธีนี้ใช้ได้ดีกับงานส่วนใหญ่

แต่ในบางครั้ง คุณจำเป็นต้องก้าวข้าม Virtual DOM ออกไป เช่น เมื่อคุณต้องการเข้าถึง HTML element จริงๆ โดยตรง นี่คือจุดที่ Refs และ useRef hook เข้ามามีบทบาท

What is a Ref? Ref คือตัวชี้ (pointer) ที่เชื่อมต่อ React เข้ากับ native DOM node โดยตรง

Why use useRef instead of useState? การอัปเดต State จะทำให้เกิดการ re-render ซึ่งหมายความว่า React จะวาด component บนหน้าจอใหม่ การอัปเดต Ref จะไม่ทำให้เกิดการ re-render จึงเหมาะอย่างยิ่งสำหรับค่าที่มีการเปลี่ยนแปลงแต่ไม่จำเป็นต้องแสดงผลบน UI ในทันที

กรณีการใช้งานทั่วไป: • การโฟกัสช่อง input โดยอัตโนมัติ • การควบคุมองค์ประกอบวิดีโอหรือเสียง (play/pause) • การวัดความกว้างหรือความสูงของ element • การเก็บ timer ID สำหรับ intervals หรือ timeouts

วิธีการใช้งาน useRef:

  1. Import useRef จาก React
  2. กำหนดค่าเริ่มต้น: const myRef = useRef(null)
  3. เชื่อมต่อกับ element: <input ref={myRef} />
  4. เข้าถึงค่าผ่าน: myRef.current

Example 1: Auto-focusing an input เมื่อผู้ใช้เข้ามาในหน้าเว็บ คุณต้องการให้เคอร์เซอร์ไปอยู่ที่ช่องกรอกข้อความทันที คุณสามารถใช้ useEffect เพื่อเรียก myRef.current.focus() หลังจากที่ component ถูก mount แล้ว

Example 2: A Stopwatch หากคุณเก็บ setInterval ID ไว้ใน state ตัว component จะ re-render ทุกครั้งที่เวลาเดิน ซึ่งทำให้ทำงานช้าลง แต่ถ้าคุณเก็บ ID ไว้ใน ref ตัว component จะยังคงทำงานได้อย่างรวดเร็ว โดยที่ค่าดังกล่าวยังคงอยู่ครบถ้วนในทุกๆ การ render โดยไม่สร้างภาระงานส่วนเกินให้กับเบราว์เซอร์

State vs Ref: • State: ทำให้เกิด re-render ใช้สำหรับข้อมูล UI การอัปเดตเป็นแบบ asynchronous • Ref: ไม่ทำให้เกิด re-render ใช้สำหรับการเข้าถึง DOM และหน่วยความจำ การอัปเดตเป็นแบบ synchronous

Pro Tips for Seniors: • หลีกเลี่ยงการใช้งานที่มากเกินไป ควรใช้ refs เฉพาะเมื่อตรรกะแบบ declarative ไม่สามารถตอบโจทย์ได้เท่านั้น • จัดการหน่วยความจำให้เรียบร้อย (Clean up memory) โดยการเคลียร์ intervals หรือ event listeners ใน cleanup function เสมอ • อย่าเขียนค่าลงใน refs ระหว่างการ rendering ให้ทำการอัปเดต ref.current ภายใน useEffect หรือ event handlers เท่านั้น เพื่อป้องกันการเกิด side effects • ใช้ forwardRef หากคุณต้องการส่ง ref ไปยัง custom child component คุณต้องครอบ child นั้นด้วย React.forwardRef

Source: https://dev.to/banti_kevat_8e2d123bb7994/react-me-refs-aur-useref-hook-kaise-use-karein-2dde