ReactIntermediate

useRef — DOM ও Mutable Value

useRef দিয়ে DOM access, re-render ছাড়া ডেটা ও আগের value মনে রাখা — বাংলায়।

6টি অংশবাংলা ভাষায়

useRef কী?

`useRef` একটি box যা value ধরে রাখে, কিন্তু value বদলালে re-render হয় না। দুই ব্যবহার: (১) DOM element-এর access, (২) re-render ছাড়া mutable value (যেমন আগের state)।

DOM focusjsx

jsx

import { useRef } from "react";

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

  const focusInput = () => {
    inputRef.current.focus();
    inputRef.current.style.borderColor = "#3b82f6";
  };

  return (
    <>
      <input ref={inputRef} placeholder="সার্চ…" />
      <button onClick={focusInput}>Focus</button>
    </>
  );
}

Previous value

useRef দিয়ে আগের valuejsx

jsx

import { useEffect, useRef, useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  const prevCount = useRef(0);

  useEffect(() => {
    prevCount.current = count; // render-এর পরে আপডেট
  }, [count]);

  return (
    <p>
      এখন: {count} — আগে: {prevCount.current}
    </p>
  );
}

ref-এর সীমা

Ref value-র পরিবর্তন আবার render trigger করে না। যেটা ভিজিবল হতে হবে সেটা state-এ রাখুন; ref-এ শুধু DOM/render-বহির্ভূত কাজ রাখুন।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।