Ref Hookok

Ref Hookok

A ref egy olyan tároló, ami nem okoz újrarenderelést változáskor. Leggyakrabban DOM elemek elérésére, vagy olyan értékek tárolására használjuk, amiket a renderelés nem érint.

useRef

Mire való?

• Közvetlen DOM elem elérés (pl. fókuszálás, görgetés).
• Olyan értékek tárolása, amik renderelések között megmaradnak, de nem kell újrarenderelni miattuk.

Mikor használjuk?

• Input mezőre kell fókuszálni gombkattintáskor.
• Előző state érték tárolása.
• setInterval / setTimeout ID tárolása, hogy le tudd törölni.

import { useRef } from 'react';

function TextInput() {
  const inputRef = useRef(null); // kezdetben null

  function handleFocus() {
    inputRef.current.focus(); // közvetlen DOM hozzáférés
  }

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Fókuszálás</button>
    </div>
  );
}

⚠️ Fontos különbség useState vs useRef:

useImperativeHandle

Mire való?
Meghatározza, hogy egy szülő komponens mit láthat a gyerek komponens ref-jéből (csak bizonyos metódusokat teszel elérhetővé).

Mikor használjuk? Ritkán szükséges – csak akkor, ha egy custom komponensből szeretnél specifikus metódusokat exponálni a szülőnek (pl. saját modal komponens open() / close() metódussal).

import { useRef, useImperativeHandle, forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  const inputRef = useRef(null);

  // Csak a focus() metódust tesszük elérhetővé
  useImperativeHandle(ref, () => ({
    focus() {
      inputRef.current.focus();
    }
  }));

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

function Form() {
  const ref = useRef(null);
  return (
    <>
      <MyInput ref={ref} />
      <button onClick={() => ref.current.focus()}>Fókusz</button>
    </>
  );
}