Uddeshyo | Student Super App

12. React Hooks (useRef)

📘 কনসেপ্ট (থিওরি)

useRef হুক আপনাকে রেন্ডারগুলোর মাঝে মান ধরে রাখতে (persist) দেয়।
এটি একটি পরিবর্তনযোগ্য মান সংরক্ষণ করতে ব্যবহার করা যেতে পারে যা আপডেট হওয়ার সময় পুনরায় রেন্ডার (re-render) ঘটায় না।
এটি সরাসরি একটি ডম (DOM) এলিমেন্ট অ্যাক্সেস করতেও ব্যবহার করা যেতে পারে।

useRef() শুধুমাত্র একটি আইটেম রিটার্ন করে। এটি current নামের একটি অবজেক্ট রিটার্ন করে। যখন আমরা useRef ইনিশিয়ালাইজ করি তখন আমরা প্রাথমিক মান সেট করি: useRef(0)।

💡 উদাহরণ

useRef দিয়ে DOM এলিমেন্ট অ্যাক্সেস করা:

import { useRef } from "react";

function App() {
  const inputElement = useRef();

  const focusInput = () => {
    inputElement.current.focus();
  };

  return (
    <>
      
      
    
  );
}

🎯 আপনার কাজ (প্র্যাকটিস)

একটি input এবং একটি button দিয়ে একটি কম্পোনেন্ট তৈরি করুন। ইনপুটটি পেতে useRef ব্যবহার করুন। যখন বাটনে ক্লিক করা হবে, কনসোলে inputRef.current.value লগ করুন (আপনি লগিং অনুকরণ করতে পারেন বা শুধু অ্যালার্ট দিতে পারেন)।

main.react

OUTPUT

Run your code to see the output here...