Escape Hatches ใน React

Escape Hatches คือวิธีการที่ React เปิดให้เราสามารถเข้าถึงและจัดการกับ DOM โดยตรงได้ในบางกรณี แม้ว่าโดยปกติแล้ว React จะจัดการเรื่องนี้ให้เราเองก็ตาม

การใช้ useRef

useRef เป็น Hook ที่ใช้สำหรับเก็บค่าที่สามารถเปลี่ยนแปลงได้โดยไม่ทำให้เกิดการ re-render และยังใช้เพื่ออ้างอิงถึง DOM elements โดยตรง

import React, { useRef, useEffect } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    // ใช้ ref เพื่อเข้าถึง DOM node โดยตรง
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} />;
}

export default FocusInput;

useEffect สำหรับ Side Effects

useEffect ใช้สำหรับจัดการกับ side effects ในคอมโพเนนต์ เช่น การเปลี่ยนแปลง DOM โดยตรง การตั้งค่า subscriptions หรือ timers