React createRef: Definitivni Vodič za Izravne Interakcije s Komponentama i DOM Elementima

U prostranom i često složenom krajoliku modernog web razvoja, React se istaknuo kao dominantna snaga, prvenstveno cijenjen zbog svog deklarativnog pristupa izgradnji korisničkih sučelja. Ova paradigma potiče programere da opišu što bi njihovo korisničko sučelje trebalo prikazivati na temelju podataka, umjesto da propisuju kako postići to vizualno stanje izravnim manipulacijama DOM-a. Ova apstrakcija značajno je pojednostavila razvoj korisničkog sučelja, čineći aplikacije predvidljivijima, lakšima za razumijevanje i visoko performansnima.

Međutim, stvarni svijet web aplikacija rijetko je u potpunosti deklarativan. Postoje specifični, ali uobičajeni scenariji gdje izravna interakcija s temeljnim DOM (Document Object Model) elementom ili instancom klasne komponente postaje ne samo prikladna, već apsolutno nužna. Ovi "izlazi u nuždi" iz Reactovog deklarativnog toka poznati su kao refovi. Među različitim mehanizmima koje React nudi za stvaranje i upravljanje tim referencama, React.createRef() ističe se kao temeljni API, posebno relevantan za programere koji rade s klasnim komponentama.

Ovaj sveobuhvatni vodič ima za cilj biti vaš definitivni resurs za razumijevanje, implementaciju i ovladavanje funkcijom React.createRef(). Krenut ćemo u detaljno istraživanje njezine svrhe, zaroniti u njezinu sintaksu i praktične primjene, osvijetliti najbolje prakse te je razlikovati od drugih strategija za upravljanje refovima. Bilo da ste iskusni React programer koji želi učvrstiti svoje razumijevanje imperativnih interakcija ili novak koji želi shvatiti ovaj ključni koncept, ovaj članak će vas opremiti znanjem za izgradnju robusnijih, performansnijih i globalno dostupnih React aplikacija koje elegantno rješavaju složene zahtjeve modernih korisničkih iskustava.

Razumijevanje refova u Reactu: Premošćivanje deklarativnog i imperativnog svijeta

U svojoj srži, React zagovara deklarativni stil programiranja. Vi definirate svoje komponente, njihovo stanje i kako se renderiraju. React zatim preuzima kontrolu, učinkovito ažurirajući stvarni DOM preglednika kako bi odražavao vaše deklarirano korisničko sučelje. Ovaj apstrakcijski sloj iznimno je moćan, štiteći programere od složenosti i performantnih zamki izravne manipulacije DOM-om. Zbog toga se React aplikacije često čine tako glatkima i responzivnima.

Jednosmjerni protok podataka i njegova ograničenja

Arhitektonska snaga Reacta leži u njegovom jednosmjernom protoku podataka. Podaci predvidljivo teku prema dolje od roditeljskih komponenti prema djeci putem propova, a promjene stanja unutar komponente pokreću ponovno renderiranje koje se širi kroz njezino podstablo. Ovaj model potiče predvidljivost i znatno olakšava ispravljanje pogrešaka, jer uvijek znate odakle podaci potječu i kako utječu na korisničko sučelje. Međutim, ne svaka interakcija savršeno se uklapa u ovaj protok podataka odozgo prema dolje.

Razmotrite scenarije kao što su:

• Programsko fokusiranje polja za unos kada korisnik dođe na obrazac.
• Pokretanje metoda play() ili pause() na <video> elementu.
• Mjerenje točnih dimenzija u pikselima renderiranog <div> elementa za dinamičko prilagođavanje izgleda.
• Integracija složene JavaScript biblioteke treće strane (npr. biblioteke za izradu grafikona poput D3.js ili alata za vizualizaciju karata) koja očekuje izravan pristup DOM spremniku.

Ove su radnje inherentno imperativne – uključuju izravno naređivanje elementu da nešto učini, umjesto pukog deklariranja njegovog željenog stanja. Iako Reactov deklarativni model često može apstrahirati mnoge imperativne detalje, on ne eliminira potrebu za njima u potpunosti. Upravo tu na scenu stupaju refovi, pružajući kontrolirani izlaz u nuždi za obavljanje ovih izravnih interakcija.

Kada koristiti refove: Navigacija između imperativnih i deklarativnih interakcija

Najvažnije načelo pri radu s refovima jest koristiti ih štedljivo i samo kada je to apsolutno nužno. Ako se zadatak može obaviti korištenjem standardnih deklarativnih mehanizama Reacta (stanje i propovi), to bi uvijek trebao biti vaš preferirani pristup. Prekomjerno oslanjanje na refove može dovesti do koda koji je teže razumjeti, održavati i ispravljati, potkopavajući same prednosti koje React pruža.

Međutim, za situacije koje doista zahtijevaju izravan pristup DOM čvoru ili instanci komponente, refovi su ispravno i namijenjeno rješenje. Evo detaljnijeg pregleda prikladnih slučajeva upotrebe:

• Upravljanje fokusom, odabirom teksta i reprodukcijom medija: Ovo su klasični primjeri gdje trebate imperativno komunicirati s elementima. Zamislite automatsko fokusiranje trake za pretraživanje pri učitavanju stranice, odabir cijelog teksta u polju za unos ili kontroliranje reprodukcije audio ili video playera. Ove se radnje obično pokreću korisničkim događajima ili metodama životnog ciklusa komponente, a ne samo promjenom propova ili stanja.
• Pokretanje imperativnih animacija: Iako se mnoge animacije mogu rješavati deklarativno pomoću CSS prijelaza/animacija ili React animacijskih biblioteka, neke složene, visoko performansne animacije, posebno one koje uključuju HTML Canvas API, WebGL, ili zahtijevaju fino podešenu kontrolu nad svojstvima elemenata koja se najbolje upravljaju izvan Reactovog ciklusa renderiranja, mogle bi zahtijevati refove.
• Integracija s DOM bibliotekama trećih strana: Mnoge ugledne JavaScript biblioteke (npr. D3.js, Leaflet za karte, razni naslijeđeni UI alati) dizajnirane su za izravnu manipulaciju određenim DOM elementima. Refovi pružaju ključni most, omogućujući Reactu da renderira spremnik, a zatim dajući biblioteci treće strane pristup tom spremniku za vlastitu imperativnu logiku renderiranja.
• Mjerenje dimenzija ili položaja elementa: Za implementaciju naprednih rasporeda, virtualizacije ili prilagođenih ponašanja pri pomicanju, često su vam potrebne precizne informacije o veličini elementa, njegovom položaju u odnosu na vidljivi dio prozora (viewport) ili njegovoj visini pomicanja (scroll height). API-ji poput getBoundingClientRect() dostupni su samo na stvarnim DOM čvorovima, što refove čini neophodnima za takve izračune.

S druge strane, trebali biste izbjegavati korištenje refova za zadatke koji se mogu postići deklarativno. To uključuje:

• Mijenjanje stila komponente (koristite stanje za uvjetno stiliziranje).
• Mijenjanje tekstualnog sadržaja elementa (prosljeđujte kao prop ili ažurirajte stanje).
• Složenu komunikaciju između komponenti (propovi i povratni pozivi (callbacks) općenito su bolji).
• Bilo koji scenarij u kojem pokušavate replicirati funkcionalnost upravljanja stanjem.

Zaranjanje u React.createRef(): Moderni pristup za klasne komponente

React.createRef() uveden je u Reactu 16.3, pružajući eksplicitniji i čišći način upravljanja refovima u usporedbi sa starijim metodama poput string refova (sada zastarjeli) i callback refova (još uvijek valjani, ali često opširniji). Dizajniran je da bude primarni mehanizam za stvaranje refova za klasne komponente, nudeći objektno orijentirani API koji se prirodno uklapa u strukturu klase.

Sintaksa i osnovna upotreba: Proces u tri koraka

Tijek rada za korištenje createRef() je jednostavan i uključuje tri ključna koraka:

1. Stvaranje ref objekta: U konstruktoru vaše klasne komponente, inicijalizirajte instancu refa pozivom React.createRef() i dodijelite njezinu povratnu vrijednost svojstvu instance (npr. this.myRef).
2. Pridruživanje refa: U render metodi vaše komponente, proslijedite stvoreni ref objekt ref atributu React elementa (bilo HTML elementa ili klasne komponente) na koji želite referencirati.
3. Pristup cilju: Jednom kada je komponenta montirana, referencirani DOM čvor ili instanca komponente bit će dostupni putem svojstva .current vašeg ref objekta (npr. this.myRef.current).

import React from 'react';

class FocusInputOnMount extends React.Component {
constructor(props) {
super(props);

this.inputElementRef = React.createRef(); // Korak 1: Stvorite ref objekt u konstruktoru
console.log('Konstruktor: Vrijednost ref.current je inicijalno:', this.inputElementRef.current); // null
}

componentDidMount() {

if (this.inputElementRef.current) {
this.inputElementRef.current.focus();
console.log('ComponentDidMount: Polje je fokusirano. Trenutna vrijednost:', this.inputElementRef.current.value);
}
}

handleButtonClick = () => {

if (this.inputElementRef.current) {
alert(`Vrijednost polja: ${this.inputElementRef.current.value}`);
}
};

render() {
console.log('Render: Vrijednost ref.current je:', this.inputElementRef.current); // Još uvijek null pri početnom renderiranju
return (
<div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px' }}>
<h3>Polje za unos s automatskim fokusom</h3>
<label htmlFor="focusInput">Unesite svoje ime:</label><br />
<input
id="focusInput"
type="text"
ref={this.inputElementRef} // Korak 2: Pridružite ref <input> elementu
placeholder="Vaše ime ovdje..."
style={{ margin: '10px 0', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
/><br />
<button
onClick={this.handleButtonClick}
style={{ padding: '10px 15px', background: '#007bff', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
>
Prikaži vrijednost polja
</button>
<p><em>Ovo polje će automatski dobiti fokus kada se komponenta učita.</em></p>
</div>
);
}
}

U ovom primjeru, this.inputElementRef je objekt kojim će React interno upravljati. Kada se <input> element renderira i montira u DOM, React dodjeljuje taj stvarni DOM čvor svojstvu this.inputElementRef.current. Metoda životnog ciklusa componentDidMount idealno je mjesto za interakciju s refovima jer jamči da su komponenta i njezina djeca renderirani u DOM-u i da je svojstvo .current dostupno i popunjeno.

Pridruživanje refa DOM elementu: Izravan pristup DOM-u

Kada pridružite ref standardnom HTML elementu (npr. <div>, <p>, <button>, <img>), svojstvo .current vašeg ref objekta sadržavat će stvarni temeljni DOM element. To vam daje neograničen pristup svim standardnim DOM API-jima preglednika, omogućujući vam izvođenje radnji koje su obično izvan Reactove deklarativne kontrole. Ovo je posebno korisno za globalne aplikacije gdje precizan raspored, pomicanje ili upravljanje fokusom mogu biti ključni u različitim korisničkim okruženjima i tipovima uređaja.

import React from 'react';

class ScrollToElementExample extends React.Component {
constructor(props) {
super(props);
this.targetDivRef = React.createRef();
this.state = { showScrollButton: false };
}

componentDidMount() {
// Prikaži gumb za pomicanje samo ako ima dovoljno sadržaja za pomicanje
// Ova provjera također osigurava da je ref već postavljen.
if (this.targetDivRef.current && window.innerHeight < document.body.scrollHeight) {
this.setState({ showScrollButton: true });
}
}

handleScrollToTarget = () => {
if (this.targetDivRef.current) {
// Korištenje scrollIntoView za glatko pomicanje, široko podržano u svim preglednicima globalno.
this.targetDivRef.current.scrollIntoView({
behavior: 'smooth', // Animira pomicanje za bolje korisničko iskustvo
block: 'start' // Poravnava vrh elementa s vrhom vidljivog dijela prozora
});
console.log('Pomičem na ciljni div!');
} else {
console.warn('Ciljni div još nije dostupan za pomicanje.');
}
};

render() {
return (
<div style={{ padding: '15px' }}>
<h2>Pomicanje na određeni element pomoću refa</h2>
<p>Ovaj primjer demonstrira kako programski pomaknuti prikaz na DOM element koji nije vidljiv na ekranu.</p>

{this.state.showScrollButton && (
<button
onClick={this.handleScrollToTarget}
style={{ marginBottom: '20px', padding: '10px 20px', background: '#28a745', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
>
Pomakni se dolje do ciljanog područja
</button>
)}

<div style={{ height: '1500px', background: '#f8f9fa', padding: '20px', marginBottom: '20px', border: '1px dashed #6c757d' }}>
<p>Sadržaj za popunjavanje prostora kako bi se stvorila vertikalna traka za pomicanje.</p>
<p>Zamislite dugačke članke, složene obrasce ili detaljne nadzorne ploče koje zahtijevaju od korisnika navigaciju kroz opsežan sadržaj. Programsko pomicanje osigurava da korisnici mogu brzo doći do relevantnih odjeljaka bez ručnog napora, poboljšavajući pristupačnost i korisnički tok na svim uređajima i veličinama zaslona.</p>
<p>Ova je tehnika posebno korisna u višestraničnim obrascima, čarobnjacima korak-po-korak ili jednostraničnim aplikacijama s dubokom navigacijom.</p>
</div>

<div
ref={this.targetDivRef} // Pridružite ref ovdje
style={{ minHeight: '300px', background: '#e9ecef', padding: '30px', border: '2px solid #007bff', borderRadius: '10px', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center' }}
>
<h3>Stigli ste do ciljanog područja!</h3>
<p>Ovo je odjeljak na koji smo se programski pomaknuli.</p>
<p>Sposobnost precizne kontrole ponašanja pomicanja ključna je za poboljšanje korisničkog iskustva, posebno na mobilnim uređajima gdje je prostor na zaslonu ograničen, a precizna navigacija od presudne važnosti.</p>
</div>
</div>
);
}
}

Ovaj primjer lijepo ilustrira kako createRef pruža kontrolu nad interakcijama na razini preglednika. Takve mogućnosti programskog pomicanja ključne su u mnogim aplikacijama, od navigacije dugačkom dokumentacijom do vođenja korisnika kroz složene radne procese. Opcija behavior: 'smooth' u scrollIntoView osigurava ugodan, animirani prijelaz, poboljšavajući korisničko iskustvo univerzalno.

Pridruživanje refa klasnoj komponenti: Interakcija s instancama

Osim nativnih DOM elemenata, ref možete pridružiti i instanci klasne komponente. Kada to učinite, svojstvo .current vašeg ref objekta sadržavat će stvarnu instanciranu klasnu komponentu. To omogućuje roditeljskoj komponenti da izravno poziva metode definirane unutar dječje klasne komponente ili pristupa njezinim svojstvima instance. Iako moćna, ovu mogućnost treba koristiti s iznimnim oprezom, jer omogućuje prekidanje tradicionalnog jednosmjernog protoka podataka, što potencijalno može dovesti do manje predvidljivog ponašanja aplikacije.

import React from 'react';

// Dječja klasna komponenta
class DialogBox extends React.Component {
constructor(props) {
super(props);
this.state = { isOpen: false, message: '' };
}

// Metoda izložena roditelju putem refa
open(message) {
this.setState({ isOpen: true, message });
}

close = () => {
this.setState({ isOpen: false, message: '' });
};

render() {
if (!this.state.isOpen) return null;

return (
<div style={{ position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', padding: '25px 35px', background: 'white', border: '1px solid #ddd', borderRadius: '8px', boxShadow: '0 5px 15px rgba(0,0,0,0.2)', zIndex: 1000, maxWidth: '400px', width: '90%', textAlign: 'center' }}>
<h4>Poruka od roditelja</h4>
<p>{this.state.message}</p>
<button
onClick={this.close}
style={{ marginTop: '15px', padding: '8px 15px', background: '#dc3545', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
>
Zatvori
</button>
</div>
);
}
}

// Roditeljska klasna komponenta
class AppWithDialog extends React.Component {
constructor(props) {
super(props);
this.dialogRef = React.createRef();
}

handleOpenDialog = () => {
if (this.dialogRef.current) {
// Pristup instanci dječje komponente i poziv njezine metode 'open'
this.dialogRef.current.open('Pozdrav od roditeljske komponente! Ovaj dijalog je otvoren imperativno.');
}
};

render() {
return (
<div style={{ padding: '20px', textAlign: 'center' }}>
<h2>Komunikacija roditelj-dijete putem refa</h2>
<p>Ovo demonstrira kako roditeljska komponenta može imperativno kontrolirati metodu svoje dječje klasne komponente.</p>
<button
onClick={this.handleOpenDialog}
style={{ padding: '12px 25px', background: '#007bff', color: 'white', border: 'none', borderRadius: '6px', cursor: 'pointer', fontSize: '1.1em' }}
>
Otvori imperativni dijalog
</button>
<DialogBox ref={this.dialogRef} /> // Pridružite ref instanci klasne komponente
</div>
);
}
}

Ovdje, AppWithDialog može izravno pozvati metodu open komponente DialogBox putem njezinog refa. Ovaj uzorak može biti koristan za pokretanje radnji poput prikazivanja modala, resetiranja obrasca ili programskog upravljanja vanjskim UI elementima enkapsuliranim unutar dječje komponente. Međutim, općenito se preporučuje favoriziranje komunikacije temeljene na propovima za većinu scenarija, prosljeđujući podatke i povratne pozive (callbacks) od roditelja prema djetetu kako bi se održao jasan i predvidljiv protok podataka. Posegnite za refovima za metode dječje komponente samo kada su te radnje doista imperativne i ne uklapaju se u tipičan tijek propova/stanja.

Pridruživanje refa funkcionalnoj komponenti (Ključna razlika)

Uobičajena je zabluda, i važna točka razlikovanja, da ne možete izravno pridružiti ref koristeći createRef() funkcionalnoj komponenti. Funkcionalne komponente, po svojoj prirodi, nemaju instance na isti način kao klasne komponente. Ako pokušate dodijeliti ref izravno funkcionalnoj komponenti (npr. <MyFunctionalComponent ref={this.myRef} />), React će izdati upozorenje u razvojnom načinu rada jer ne postoji instanca komponente koju bi mogao dodijeliti .current svojstvu.

Ako je vaš cilj omogućiti roditeljskoj komponenti (koja može biti klasna komponenta koja koristi createRef ili funkcionalna komponenta koja koristi useRef) da pristupi DOM elementu renderiranom unutar dječje funkcionalne komponente, morate koristiti React.forwardRef. Ova komponenta višeg reda (higher-order component) omogućuje funkcionalnim komponentama da izlože ref određenom DOM čvoru ili imperativnom handleu unutar sebe.

Alternativno, ako radite unutar funkcionalne komponente i trebate stvoriti i upravljati refom, odgovarajući mehanizam je useRef hook, o kojem će se ukratko raspravljati u kasnijem odjeljku za usporedbu. Ključno je zapamtiti da je createRef fundamentalno vezan za klasne komponente i njihovu prirodu temeljenu na instancama.

Pristup DOM čvoru ili instanci komponente: Objašnjenje svojstva `.current`

Srž interakcije s refovima vrti se oko svojstva .current ref objekta stvorenog pomoću React.createRef(). Razumijevanje njegovog životnog ciklusa i onoga što može sadržavati od presudne je važnosti za učinkovito upravljanje refovima.

Svojstvo `.current`: Vaš pristupnik imperativnoj kontroli

Svojstvo .current je promjenjivi (mutable) objekt kojim React upravlja. Služi kao izravna veza s referenciranim elementom ili instancom komponente. Njegova se vrijednost mijenja tijekom životnog ciklusa komponente:

• Inicijalizacija: Kada prvi put pozovete React.createRef() u konstruktoru, stvara se ref objekt, a njegovo svojstvo .current inicijalizira se na null. To je zato što se u ovoj fazi komponenta još nije renderirala i ne postoji DOM element ili instanca komponente na koju bi ref mogao pokazivati.
• Montiranje (Mounting): Jednom kada se komponenta renderira u DOM-u i stvori se element s ref atributom, React dodjeljuje stvarni DOM čvor ili instancu klasne komponente svojstvu .current vašeg ref objekta. To se obično događa odmah nakon završetka render metode i prije poziva componentDidMount. Stoga je componentDidMount najsigurnije i najčešće mjesto za pristup i interakciju s .current.
• Demontiranje (Unmounting): Kada se komponenta demontira iz DOM-a, React automatski resetira svojstvo .current natrag na null. To je ključno za sprječavanje curenja memorije i osiguravanje da vaša aplikacija ne drži reference na elemente koji više ne postoje u DOM-u.
• Ažuriranje: U rijetkim slučajevima kada se ref atribut promijeni na elementu tijekom ažuriranja, svojstvo current starog refa bit će postavljeno na null prije nego što se postavi svojstvo current novog refa. Ovo ponašanje je manje uobičajeno, ali važno ga je napomenuti za složene dinamičke dodjele refova.

import React from 'react';

class RefLifecycleLogger extends React.Component {
constructor(props) {
super(props);
this.myDivRef = React.createRef();
console.log('1. Konstruktor: this.myDivRef.current je', this.myDivRef.current); // null
}

componentDidMount() {
console.log('3. componentDidMount: this.myDivRef.current je', this.myDivRef.current); // Stvarni DOM element
if (this.myDivRef.current) {
this.myDivRef.current.style.backgroundColor = '#d4edda'; // Imperativno stiliziranje za demonstraciju
this.myDivRef.current.innerText += ' - Ref je aktivan!';
}
}

componentDidUpdate(prevProps, prevState) {
console.log('4. componentDidUpdate: this.myDivRef.current je', this.myDivRef.current); // Stvarni DOM element (nakon ažuriranja)
}

componentWillUnmount() {
console.log('5. componentWillUnmount: this.myDivRef.current je', this.myDivRef.current); // Stvarni DOM element (neposredno prije postavljanja na null)
// U ovom trenutku, mogli biste obaviti čišćenje ako je potrebno
}

render() {
// Pri početnom renderiranju, this.myDivRef.current je još uvijek null jer DOM još nije stvoren.
// Pri sljedećim renderiranjima (nakon montiranja), sadržavat će element.
console.log('2. Render: this.myDivRef.current je', this.myDivRef.current);
return (
<div
ref={this.myDivRef}
style={{ padding: '20px', border: '1px solid #28a745', margin: '20px', minHeight: '80px', display: 'flex', alignItems: 'center' }}
>
<p>Ovo je div na koji je pridružen ref.</p>
</div>
);
}
}

Promatranje ispisa u konzoli za RefLifecycleLogger pruža jasan uvid u to kada this.myDivRef.current postaje dostupan. Ključno je uvijek provjeriti je li this.myDivRef.current različit od null prije nego što pokušate s njim komunicirati, posebno u metodama koje bi se mogle izvršiti prije montiranja ili nakon demontiranja.

Što `.current` može sadržavati? Istraživanje sadržaja vašeg refa

Tip vrijednosti koju current sadrži ovisi o tome na što ste pridružili ref:

• Kada je pridružen HTML elementu (npr. <div>, <input>): Svojstvo .current sadržavat će stvarni temeljni DOM element. Ovo je nativni JavaScript objekt, koji pruža pristup cijelom njegovom rasponu DOM API-ja. Na primjer, ako pridružite ref <input type="text"> elementu, .current će biti HTMLInputElement objekt, što vam omogućuje pozivanje metoda poput .focus(), čitanje svojstava poput .value, ili mijenjanje atributa poput .placeholder. Ovo je najčešći slučaj upotrebe refova.

  this.inputRef.current.focus();
  this.videoRef.current.play();
  const { width, height } = this.divRef.current.getBoundingClientRect();

• Kada je pridružen klasnoj komponenti (npr. <MyClassComponent />): Svojstvo .current sadržavat će instancu te klasne komponente. To znači da možete izravno pozivati metode definirane unutar te dječje komponente (npr. childRef.current.someMethod()) ili čak pristupati njezinom stanju ili propovima (iako se izravan pristup stanju/propovima djeteta putem refa općenito ne preporučuje u korist ažuriranja propova i stanja). Ova mogućnost je moćna za pokretanje specifičnih ponašanja u dječjim komponentama koja se ne uklapaju u standardni model interakcije temeljen na propovima.

  this.childComponentRef.current.resetForm();
  // Rijetko, ali moguće: console.log(this.childComponentRef.current.state.someValue);

• Kada je pridružen funkcionalnoj komponenti (putem forwardRef): Kao što je prethodno navedeno, refovi se ne mogu izravno pridružiti funkcionalnim komponentama. Međutim, ako je funkcionalna komponenta omotana s React.forwardRef, tada će svojstvo .current sadržavati bilo koju vrijednost koju funkcionalna komponenta eksplicitno izloži putem proslijeđenog refa. To je obično DOM element unutar funkcionalne komponente, ili objekt koji sadrži imperativne metode (koristeći useImperativeHandle hook u kombinaciji s forwardRef).

  // U roditelju, myForwardedRef.current bi bio izloženi DOM čvor ili objekt
  this.myForwardedRef.current.focus();
  this.myForwardedRef.current.customResetMethod();

Praktični primjeri upotrebe `createRef` u akciji

Da bismo doista shvatili korisnost React.createRef(), istražimo detaljnije, globalno relevantne scenarije u kojima se pokazuje nezamjenjivim, nadilazeći jednostavno upravljanje fokusom.

1. Upravljanje fokusom, odabirom teksta ili reprodukcijom medija u različitim kulturama

Ovo su glavni primjeri imperativnih UI interakcija. Zamislite višefazni obrazac dizajniran za globalnu publiku. Nakon što korisnik završi jedan odjeljak, možda ćete htjeti automatski prebaciti fokus na prvo polje za unos sljedećeg odjeljka, bez obzira na jezik ili zadani smjer teksta (s lijeva na desno ili s desna na lijevo). Refovi pružaju potrebnu kontrolu.

import React from 'react';

class DynamicFocusForm extends React.Component {
constructor(props) {
super(props);
this.firstNameRef = React.createRef();
this.lastNameRef = React.createRef();
this.emailRef = React.createRef();
this.state = { currentStep: 1 };
}

componentDidMount() {
// Fokusiraj prvo polje kada se komponenta montira
this.firstNameRef.current.focus();
}

handleNextStep = (nextRef) => {
this.setState(prevState => ({ currentStep: prevState.currentStep + 1 }), () => {
// Nakon ažuriranja stanja i ponovnog renderiranja komponente, fokusiraj sljedeće polje
if (nextRef.current) {
nextRef.current.focus();
}
});
};

render() {
const { currentStep } = this.state;
const formSectionStyle = { border: '1px solid #0056b3', padding: '20px', margin: '15px 0', borderRadius: '8px', background: '#e7f0fa' };
const inputStyle = { width: '100%', padding: '10px', margin: '8px 0', border: '1px solid #ccc', borderRadius: '4px' };
const buttonStyle = { padding: '10px 20px', background: '#007bff', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', marginTop: '10px' };

return (
<div style={{ maxWidth: '600px', margin: '30px auto', padding: '25px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)', borderRadius: '10px', background: 'white' }}>
<h2>Višefazni obrazac s fokusom upravljanim refovima</h2>
<p>Trenutni korak: <strong>{currentStep}</strong></p>

{currentStep === 1 && (
<div style={formSectionStyle}>
<h3>Osobni podaci</h3>
<label htmlFor="firstName">Ime:</label>
<input id="firstName" type="text" ref={this.firstNameRef} style={inputStyle} placeholder="npr. Ivan" />

<label htmlFor="lastName">Prezime:</label>
<input id="lastName" type="text" ref={this.lastNameRef} style={inputStyle} placeholder="npr. Horvat" />

<button onClick={() => this.handleNextStep(this.emailRef)} style={buttonStyle}>Dalje &rarr;</button>
</div>
)}

{currentStep === 2 && (
<div style={formSectionStyle}>
<h3>Kontakt informacije</h3>
<label htmlFor="email">Email:</label>
<input id="email" type="email" ref={this.emailRef} style={inputStyle} placeholder="npr. ivan.horvat@example.com" />

<p>... ostala polja za kontakt ...</p>

<button onClick={() => alert('Obrazac je poslan!')} style={buttonStyle}>Pošalji</button>
</div>
)}

<p><em>Ova interakcija značajno poboljšava pristupačnost i korisničko iskustvo, posebno za korisnike koji se oslanjaju na navigaciju tipkovnicom ili pomoćne tehnologije globalno.</em></p>
</div>
);
}
}

Ovaj primjer demonstrira praktičan višefazni obrazac gdje se createRef koristi za programsko upravljanje fokusom. To osigurava glatko i pristupačno korisničko putovanje, što je ključno razmatranje za aplikacije koje se koriste u različitim jezičnim i kulturnim kontekstima. Slično tome, za media playere, refovi vam omogućuju izradu prilagođenih kontrola (reprodukcija, pauza, glasnoća, premotavanje) koje izravno komuniciraju s nativnim API-jima HTML5 <video> ili <audio> elemenata, pružajući dosljedno iskustvo neovisno o zadanim postavkama preglednika.

2. Pokretanje imperativnih animacija i interakcija s Canvasom

Iako su deklarativne animacijske biblioteke izvrsne za mnoge UI efekte, neke napredne animacije, posebno one koje koriste HTML5 Canvas API, WebGL ili zahtijevaju fino podešenu kontrolu nad svojstvima elemenata koja se najbolje upravljaju izvan Reactovog ciklusa renderiranja, imaju veliku korist od refova. Na primjer, stvaranje vizualizacije podataka u stvarnom vremenu ili igre na Canvas elementu uključuje izravno crtanje na međuspremnik piksela (pixel buffer), što je inherentno imperativan proces.

import React from 'react';

class CanvasAnimator extends React.Component {
constructor(props) {
super(props);
this.canvasRef = React.createRef();
this.animationFrameId = null;
}

componentDidMount() {
this.startAnimation();
}

componentWillUnmount() {
this.stopAnimation();
}

startAnimation = () => {
const canvas = this.canvasRef.current;
if (!canvas) return;

const ctx = canvas.getContext('2d');
let angle = 0;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 50;

const animate = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Očisti platno

// Nacrtaj rotirajući kvadrat
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate(angle);
ctx.fillStyle = '#6f42c1';
ctx.fillRect(-radius / 2, -radius / 2, radius, radius);
ctx.restore();

angle += 0.05; // Povećaj kut za rotaciju

this.animationFrameId = requestAnimationFrame(animate);
};

this.animationFrameId = requestAnimationFrame(animate);
};

stopAnimation = () => {
if (this.animationFrameId) {
cancelAnimationFrame(this.animationFrameId);
}
};

render() {
return (
<div style={{ textAlign: 'center', margin: '30px auto', border: '1px solid #ced4da', padding: '20px', borderRadius: '8px', background: '#f8f9fa' }}>
<h3>Imperativna Canvas animacija s createRef</h3>
<p>Ova canvas animacija kontrolira se izravno pomoću API-ja preglednika putem refa.</p>
<canvas ref={this.canvasRef} width="300" height="200" style={{ border: '1px solid #adb5bd', background: 'white' }}>
Vaš preglednik ne podržava HTML5 canvas tag.
</canvas>
<p><em>Takva izravna kontrola ključna je za grafiku visokih performansi, igre ili specijalizirane vizualizacije podataka koje se koriste u raznim industrijama diljem svijeta.</em></p>
</div>
);
}
}

Ova komponenta pruža canvas element i koristi ref za dobivanje izravnog pristupa njegovom 2D kontekstu za renderiranje. Animacijska petlja, pokretana s `requestAnimationFrame`, zatim imperativno crta i ažurira rotirajući kvadrat. Ovaj je uzorak temeljni za izgradnju interaktivnih nadzornih ploča s podacima, online alata za dizajn ili čak ležernih igara koje zahtijevaju precizno renderiranje sličicu po sličicu, neovisno o geografskoj lokaciji korisnika ili mogućnostima uređaja.

3. Integracija s DOM bibliotekama trećih strana: Besprijekoran most

Jedan od najuvjerljivijih razloga za korištenje refova jest integracija Reacta s vanjskim JavaScript bibliotekama koje izravno manipuliraju DOM-om. Mnoge moćne biblioteke, posebno starije ili one usmjerene na specifične zadatke renderiranja (poput izrade grafikona, mapiranja ili uređivanja obogaćenog teksta), rade tako da uzimaju DOM element kao cilj i zatim same upravljaju njegovim sadržajem. React bi se u svom deklarativnom načinu rada inače sukobio s tim bibliotekama pokušavajući kontrolirati isto DOM podstablo. Refovi sprječavaju ovaj sukob pružajući određeni 'spremnik' za vanjsku biblioteku.

import React from 'react';
import * as d3 from 'd3'; // Pretpostavlja se da je D3.js instaliran i uvezen

class D3BarChart extends React.Component {
constructor(props) {
super(props);
this.chartContainerRef = React.createRef();
}

// Kada se komponenta montira, nacrtaj grafikon
componentDidMount() {
this.drawChart();
}

// Kada se komponenta ažurira (npr. props.data se promijeni), ažuriraj grafikon
componentDidUpdate(prevProps) {
if (prevProps.data !== this.props.data) {
this.drawChart();
}
}

// Kada se komponenta demontira, očisti D3 elemente kako bi se spriječilo curenje memorije
componentWillUnmount() {
d3.select(this.chartContainerRef.current).selectAll('*').remove();
}

drawChart = () => {
const data = this.props.data || [40, 80, 20, 100, 60, 90]; // Zadani podaci
const node = this.chartContainerRef.current;
if (!node) return; // Osiguraj da je ref dostupan

// Očisti sve prethodne elemente grafikona koje je nacrtao D3
d3.select(node).selectAll('*').remove();

const margin = { top: 20, right: 20, bottom: 30, left: 40 };
const width = 460 - margin.left - margin.right;
const height = 300 - margin.top - margin.bottom;

const svg = d3.select(node)
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);

// Postavljanje skala
const x = d3.scaleBand()
.range([0, width])
.padding(0.1);

const y = d3.scaleLinear()
.range([height, 0]);

x.domain(data.map((d, i) => i)); // Koristi indeks kao domenu radi jednostavnosti
y.domain([0, d3.max(data)]);

// Dodaj stupce
svg.selectAll('.bar')
.data(data)
.enter().append('rect')
.attr('class', 'bar')
.attr('x', (d, i) => x(i))
.attr('width', x.bandwidth())
.attr('y', d => y(d))
.attr('height', d => height - y(d))
.attr('fill', '#17a2b8');

// Dodaj X os
svg.append('g')
.attr('transform', `translate(0,${height})`)
.call(d3.axisBottom(x));

// Dodaj Y os
svg.append('g')
.call(d3.axisLeft(y));
};

render() {
return (
<div style={{ textAlign: 'center', margin: '30px auto', border: '1px solid #00a0b2', padding: '20px', borderRadius: '8px', background: '#e0f7fa' }}>
<h3>Integracija D3.js grafikona s React createRef</h3>
<p>Ova vizualizacija podataka renderirana je pomoću D3.js unutar spremnika kojim upravlja React.</p>
<div ref={this.chartContainerRef} /> // D3.js će renderirati u ovaj div
<p><em>Integracija takvih specijaliziranih biblioteka ključna je za aplikacije s velikom količinom podataka, pružajući moćne analitičke alate korisnicima u različitim industrijama i regijama.</em></p>
</div>
);
}
}

Ovaj opsežan primjer prikazuje integraciju D3.js stupčastog grafikona unutar React klasne komponente. chartContainerRef pruža D3.js-u specifičan DOM čvor koji mu je potreban za izvođenje renderiranja. React upravlja životnim ciklusom spremnika <div>, dok D3.js upravlja njegovim internim sadržajem. Metode `componentDidUpdate` i `componentWillUnmount` ključne su za ažuriranje grafikona kada se podaci promijene i za obavljanje potrebnog čišćenja, sprječavajući curenje memorije i osiguravajući responzivno iskustvo. Ovaj je uzorak univerzalno primjenjiv, omogućujući programerima da iskoriste najbolje od Reactovog modela komponenti i specijaliziranih, visoko performansnih biblioteka za vizualizaciju za globalne nadzorne ploče i analitičke platforme.

4. Mjerenje dimenzija ili položaja elementa za dinamičke rasporede

Za vrlo dinamične ili responzivne rasporede, ili za implementaciju značajki poput virtualiziranih lista koje renderiraju samo vidljive stavke, poznavanje preciznih dimenzija i položaja elemenata je ključno. Refovi vam omogućuju pristup metodi getBoundingClientRect(), koja pruža ove ključne informacije izravno iz DOM-a.

import React from 'react';

class ElementDimensionLogger extends React.Component {
constructor(props) {
super(props);
this.measurableDivRef = React.createRef();
this.state = {
width: 0,
height: 0,
top: 0,
left: 0,
message: 'Kliknite gumb za mjerenje!'
};
}

componentDidMount() {
// Početno mjerenje je često korisno, ali može se pokrenuti i korisničkom akcijom
this.measureElement();
// Za dinamičke rasporede, mogli biste slušati događaje promjene veličine prozora
window.addEventListener('resize', this.measureElement);
}

componentWillUnmount() {
window.removeEventListener('resize', this.measureElement);
}

measureElement = () => {
if (this.measurableDivRef.current) {
const rect = this.measurableDivRef.current.getBoundingClientRect();
this.setState({
width: Math.round(rect.width),
height: Math.round(rect.height),
top: Math.round(rect.top),
left: Math.round(rect.left),
message: 'Dimenzije ažurirane.'
});
} else {
this.setState({ message: 'Element još nije renderiran.' });
}
};

render() {
const { width, height, top, left, message } = this.state;
const boxStyle = {
width: '70%',
minHeight: '150px', border: '3px solid #ffc107', margin: '25px auto', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', background: '#fff3cd', borderRadius: '8px', textAlign: 'center' };
return (
<div style={{ maxWidth: '700px', margin: '30px auto', padding: '25px', boxShadow: '0 4px 12px rgba(0,0,0,0.08)', borderRadius: '10px', background: 'white' }}>
<h3>Mjerenje dimenzija elementa s createRef</h3>
<p>Ovaj primjer dinamički dohvaća i prikazuje veličinu i položaj ciljnog elementa.</p>
<div ref={this.measurableDivRef} style={boxStyle}>
<p><strong>Ja sam element koji se mjeri.</strong></p>
<p>Promijenite veličinu prozora preglednika da vidite kako se mjere mijenjaju pri osvježavanju/ručnom pokretanju.</p>
</div>
<button
onClick={this.measureElement}
style={{ padding: '10px 20px', background: '#6c757d', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', marginBottom: '15px' }}
>
Izmjeri sada
</button>
<div style={{ background: '#f0f0f0', padding: '15px', borderRadius: '6px' }}>
<p><strong>Dimenzije uživo:</strong></p>
<ul style={{ listStyleType: 'none', padding: 0, textAlign: 'left', margin: '0 auto', maxWidth: '300px' }}>
<li>Širina: <b>{width}px</b></li>
<li>Visina: <b>{height}px</b></li>
<li>Položaj odozgo (Viewport): <b>{top}px</b></li>
<li>Položaj s lijeva (Viewport): <b>{left}px</b></li>
</ul>
<p><em>Točno mjerenje elemenata ključno je za responzivne dizajne i optimizaciju performansi na različitim uređajima globalno.</em></p>
</div>
</div>
);
}
}

Ova komponenta koristi createRef kako bi dobila getBoundingClientRect() div elementa, pružajući njegove dimenzije i položaj u stvarnom vremenu. Ove informacije su neprocjenjive za implementaciju složenih prilagodbi rasporeda, određivanje vidljivosti u virtualiziranoj listi za pomicanje, ili čak za osiguravanje da su elementi unutar određenog područja vidljivog dijela prozora. Za globalnu publiku, gdje se veličine zaslona, rezolucije i okruženja preglednika znatno razlikuju, precizna kontrola rasporeda temeljena na stvarnim DOM mjerenjima ključni je faktor u isporuci dosljednog i visokokvalitetnog korisničkog iskustva.

Najbolje prakse i upozorenja za korištenje `createRef`

Iako createRef nudi moćnu imperativnu kontrolu, njegova zlouporaba može dovesti do koda koji je teško upravljati i ispravljati. Pridržavanje najboljih praksi ključno je za odgovorno korištenje njegove moći.

1. Prioritizirajte deklarativne pristupe: Zlatno pravilo

Uvijek imajte na umu da su refovi "izlaz u nuždi", a ne primarni način interakcije u Reactu. Prije nego što posegnete za refom, zapitajte se: Može li se ovo postići sa stanjem i propovima? Ako je odgovor da, onda je to gotovo uvijek bolji, "React-idiomatski" pristup. Na primjer, ako želite promijeniti vrijednost unosa, koristite kontrolirane komponente sa stanjem, a ne ref za izravno postavljanje inputRef.current.value.

2. Refovi su za imperativne interakcije, a ne za upravljanje stanjem

Refovi su najprikladniji za zadatke koji uključuju izravne, imperativne akcije na DOM elementima ili instancama komponenti. Oni su naredbe: "fokusiraj ovo polje", "pokreni ovaj video", "pomakni se na ovaj odjeljak". Nisu namijenjeni za mijenjanje deklarativnog korisničkog sučelja komponente na temelju stanja. Izravno manipuliranje stilom ili sadržajem elementa putem refa kada bi se to moglo kontrolirati propovima ili stanjem može dovesti do toga da Reactov virtualni DOM postane neusklađen sa stvarnim DOM-om, uzrokujući nepredvidivo ponašanje i probleme s renderiranjem.

3. Refovi i funkcionalne komponente: Prihvatite `useRef` i `forwardRef`

Za moderni razvoj u Reactu unutar funkcionalnih komponenti, React.createRef() nije alat koji ćete koristiti. Umjesto toga, oslanjat ćete se na useRef hook. useRef hook pruža promjenjivi (mutable) ref objekt sličan createRef, čije se .current svojstvo može koristiti za iste imperativne interakcije. Održava svoju vrijednost kroz ponovna renderiranja komponente bez da sam uzrokuje ponovno renderiranje, što ga čini savršenim za držanje reference na DOM čvor ili bilo koju promjenjivu vrijednost koja treba opstati kroz renderiranja.

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

function FunctionalComponentWithRef() {
const myInputRef = useRef(null); // Inicijaliziraj s null

useEffect(() => {
// Ovo se izvršava nakon što se komponenta montira
if (myInputRef.current) {
myInputRef.current.focus();
console.log('Polje u funkcionalnoj komponenti je fokusirano!');
}
}, []); // Prazan niz ovisnosti osigurava da se izvrši samo jednom pri montiranju

const handleLogValue = () => {
if (myInputRef.current) {
alert(`Vrijednost polja: ${myInputRef.current.value}`);
}
};

return (
<div style={{ margin: '20px', padding: '20px', border: '1px solid #009688', borderRadius: '8px', background: '#e0f2f1' }}>
<h3>Korištenje useRef u funkcionalnoj komponenti</h3>
<label htmlFor="funcInput">Upišite nešto:</label><br />
<input id="funcInput" type="text" ref={myInputRef} placeholder="Automatski sam fokusiran!" style={{ padding: '8px', margin: '10px 0', borderRadius: '4px', border: '1px solid #ccc' }} /><br />
<button onClick={handleLogValue} style={{ padding: '10px 15px', background: '#009688', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}>
Zabilježi vrijednost polja
</button>
<p><em>Za nove projekte, `useRef` je idiomatski izbor za refove u funkcionalnim komponentama.</em></p>
</div>
);
}

Ako trebate da roditeljska komponenta dobije ref na DOM element unutar dječje funkcionalne komponente, tada je React.forwardRef vaše rješenje. To je komponenta višeg reda koja vam omogućuje da "proslijedite" ref od roditelja do DOM elementa jednog od njegove djece, održavajući enkapsulaciju funkcionalne komponente dok i dalje omogućuje imperativni pristup kada je to potrebno.

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

// Funkcionalna komponenta koja eksplicitno prosljeđuje ref svom nativnom input elementu
const ForwardedInput = React.forwardRef((props, ref) => (
<input type="text" ref={ref} className="forwarded-input" placeholder={props.placeholder} style={{ padding: '10px', margin: '8px 0', border: '1px solid #ccc', borderRadius: '4px', width: '100%' }} />
));

class ParentComponentUsingForwardRef extends React.Component {
constructor(props) {
super(props);
this.parentInputRef = React.createRef();
}

componentDidMount() {
if (this.parentInputRef.current) {
this.parentInputRef.current.focus();
console.log('Polje unutar funkcionalne komponente fokusirano iz roditelja (klasne komponente) putem proslijeđenog refa!');
}
}

render() {
return (
<div style={{ margin: '20px', padding: '20px', border: '1px solid #6f42c1', borderRadius: '8px', background: '#f5eef9' }}>
<h3>Primjer prosljeđivanja refa s createRef (roditeljska klasna komponenta)</h3>
<label>Unesite detalje:</label>
<ForwardedInput ref={this.parentInputRef} placeholder="Ovo polje je unutar funkcionalne komponente" />
<p><em>Ovaj je uzorak ključan za stvaranje ponovno iskoristivih biblioteka komponenti koje trebaju izložiti izravan pristup DOM-u.</em></p>
</div>
);
}
}

Ovo demonstrira kako klasna komponenta koja koristi createRef može učinkovito komunicirati s DOM elementom ugniježđenim unutar funkcionalne komponente koristeći forwardRef. To čini funkcionalne komponente jednako sposobnima za sudjelovanje u imperativnim interakcijama kada je to potrebno, osiguravajući da moderne React kodne baze i dalje mogu imati koristi od refova.

4. Kada ne koristiti refove: Održavanje integriteta Reacta

• Za kontrolu stanja dječje komponente: Nikada ne koristite ref za izravno čitanje ili ažuriranje stanja dječje komponente. Time se zaobilazi Reactovo upravljanje stanjem, čineći vašu aplikaciju nepredvidivom. Umjesto toga, prosljeđujte stanje kao propove i koristite povratne pozive (callbacks) kako biste omogućili djeci da zatraže promjene stanja od roditelja.
• Kao zamjenu za propove: Iako možete pozivati metode na dječjoj klasnoj komponenti putem refa, razmislite bi li prosljeđivanje rukovatelja događajima (event handler) kao prop djetetu postiglo isti cilj na "React-idiomatskiji" način. Propovi promiču jasan protok podataka i čine interakcije komponenti transparentnima.
• Za jednostavne DOM manipulacije koje React može obraditi: Ako želite promijeniti tekst, stil elementa ili dodati/ukloniti klasu na temelju stanja, učinite to deklarativno. Na primjer, da biste prebacili klasu active, uvjetno je primijenite u JSX-u: <div className={isActive ? 'active' : ''}>, umjesto divRef.current.classList.add('active').

5. Razmatranja o performansama i globalni doseg

Iako je createRef sam po sebi performantan, operacije koje se izvode pomoću current mogu imati značajne posljedice na performanse. Za korisnike na slabijim uređajima ili sporijim mrežnim vezama (što je uobičajeno u mnogim dijelovima svijeta), neučinkovite DOM manipulacije mogu dovesti do trzanja, neresponzivnih korisničkih sučelja i lošeg korisničkog iskustva. Kada koristite refove za zadatke poput animacija, složenih izračuna rasporeda ili integracije teških biblioteka trećih strana:

• Debounce/Throttle događaje: Ako koristite refove za mjerenje dimenzija na window.resize ili scroll događajima, osigurajte da su ti rukovatelji debouncani ili throttledani kako biste spriječili prekomjerne pozive funkcija i čitanja DOM-a.
• Grupirajte čitanja/pisanja DOM-a: Izbjegavajte izmjenjivanje operacija čitanja DOM-a (npr. getBoundingClientRect()) s operacijama pisanja DOM-a (npr. postavljanje stilova). To može uzrokovati "layout thrashing". Alati poput fastdom mogu pomoći u učinkovitom upravljanju time.
• Odgodite nekritične operacije: Koristite requestAnimationFrame za animacije i setTimeout(..., 0) ili requestIdleCallback za manje kritične DOM manipulacije kako biste osigurali da ne blokiraju glavnu nit i ne utječu na responzivnost.
• Birajte mudro: Ponekad performanse biblioteke treće strane mogu biti usko grlo. Procijenite alternative ili razmislite o lijenom učitavanju (lazy-loading) takvih komponenti za korisnike na sporijim vezama, osiguravajući da osnovno iskustvo ostane performantno globalno.

`createRef` vs. Callback Refovi vs. `useRef`: Detaljna usporedba

React je nudio različite načine rukovanja refovima tijekom svoje evolucije. Razumijevanje nijansi svakog od njih ključno je za odabir najprikladnije metode za vaš specifični kontekst.

1. `React.createRef()` (Klasne komponente - moderno)

• Mehanizam: Stvara ref objekt ({ current: null }) u konstruktoru instance komponente. React dodjeljuje DOM element ili instancu komponente svojstvu .current nakon montiranja.
• Primarna upotreba: Isključivo unutar klasnih komponenti. Inicijalizira se jednom po instanci komponente.
• Popunjavanje refa: .current se postavlja na element/instancu nakon što se komponenta montira, i resetira se na null pri demontiranju.
• Najbolje za: Sve standardne zahtjeve za refove u klasnim komponentama gdje trebate referencirati DOM element ili instancu dječje klasne komponente.
• Prednosti: Jasna, jednostavna objektno orijentirana sintaksa. Nema brige oko ponovnog stvaranja inline funkcije koje uzrokuje dodatne pozive (kao što se može dogoditi s callback refovima).
• Nedostaci: Nije upotrebljivo s funkcionalnim komponentama. Ako se ne inicijalizira u konstruktoru (npr. u render metodi), novi ref objekt mogao bi se stvoriti pri svakom renderiranju, što dovodi do potencijalnih problema s performansama ili netočnih vrijednosti refa. Zahtijeva pamćenje dodjele svojstvu instance.

2. Callback Refovi (Klasne i funkcionalne komponente - fleksibilno/naslijeđeno)

• Mehanizam: Prosljeđujete funkciju izravno ref propu. React poziva tu funkciju s montiranim DOM elementom ili instancom komponente, a kasnije s null kada se demontira.
• Primarna upotreba: Može se koristiti i u klasnim i u funkcionalnim komponentama. U klasnim komponentama, povratni poziv (callback) obično je vezan za this ili definiran kao arrow funkcija kao svojstvo klase. U funkcionalnim komponentama, često se definira inline ili memoizira.
• Popunjavanje refa: Povratnu funkciju poziva React izravno. Vi ste odgovorni za pohranjivanje reference (npr. this.myInput = element;).
• Najbolje za: Scenarije koji zahtijevaju finiju kontrolu nad time kada se refovi postavljaju i uklanjaju, ili za napredne uzorke poput dinamičkih lista refova. To je bio primarni način upravljanja refovima prije createRef i useRef.
• Prednosti: Pruža maksimalnu fleksibilnost. Daje vam trenutačni pristup refu kada je dostupan (unutar povratne funkcije). Može se koristiti za pohranjivanje refova u nizu ili mapi za dinamičke zbirke elemenata.
• Disadvantages: Ako je povratni poziv definiran inline unutar render metode (npr. ref={el => this.myRef = el}), bit će pozvan dvaput tijekom ažuriranja (jednom s null, zatim s elementom), što može uzrokovati probleme s performansama ili neočekivane nuspojave ako se ne rukuje pažljivo (npr. pretvaranjem povratnog poziva u metodu klase ili korištenjem useCallback u funkcionalnim komponentama).

class CallbackRefDetailedExample extends React.Component {
constructor(props) {
super(props);
this.inputElement = null;
}

// Ovu metodu će pozvati React da postavi ref
setInputElementRef = element => {
if (element) {
console.log('Ref element je:', element);
}
this.inputElement = element; // Pohrani stvarni DOM element
};

componentDidMount() {
if (this.inputElement) {
this.inputElement.focus();
}
}

render() {
return (
<div>
<label>Callback Ref unos:</label>
<input type="text" ref={this.setInputElementRef} />
</div>
);
}
}

3. `useRef` Hook (Funkcionalne komponente - moderno)

• Mehanizam: React Hook koji vraća promjenjivi (mutable) ref objekt ({ current: initialValue }). Vraćeni objekt opstaje tijekom cijelog životnog vijeka funkcionalne komponente.
• Primarna upotreba: Isključivo unutar funkcionalnih komponenti.
• Popunjavanje refa: Slično kao createRef, React dodjeljuje DOM element ili instancu komponente (ako je proslijeđena) svojstvu .current nakon montiranja i postavlja ga na null pri demontiranju. Vrijednost .current također se može ručno ažurirati.
• Najbolje za: Svo upravljanje refovima u funkcionalnim komponentama. Također korisno za držanje bilo koje promjenjive vrijednosti koja treba opstati kroz renderiranja bez pokretanja ponovnog renderiranja (npr. ID-ovi tajmera, prethodne vrijednosti).
• Prednosti: Jednostavno, idiomatski za Hookove. Ref objekt opstaje kroz renderiranja, izbjegavajući probleme s ponovnim stvaranjem. Može pohraniti bilo koju promjenjivu vrijednost, ne samo DOM čvorove.
• Nedostaci: Radi samo unutar funkcionalnih komponenti. Zahtijeva eksplicitni useEffect za interakcije s refovima vezane uz životni ciklus (poput fokusiranja pri montiranju).

Ukratko:

• Ako pišete klasnu komponentu i trebate ref, React.createRef() je preporučeni i najjasniji izbor.
• Ako pišete funkcionalnu komponentu i trebate ref, useRef Hook je moderno, idiomatsko rješenje.
• Callback refovi su i dalje valjani, ali su općenito opširniji i skloni suptilnim problemima ako se ne implementiraju pažljivo. Korisni su za napredne scenarije ili pri radu sa starijim kodnim bazama ili kontekstima gdje hookovi nisu dostupni.
• Za prosljeđivanje refova kroz komponente (posebno funkcionalne), React.forwardRef() je ključan, često se koristi u kombinaciji s createRef ili useRef u roditeljskoj komponenti.

Globalna razmatranja i napredna pristupačnost s refovima

Iako se često raspravlja u tehničkom vakuumu, upotreba refova u kontekstu globalno orijentirane aplikacije nosi važne implikacije, posebno u pogledu performansi i pristupačnosti za različite korisnike.

1. Optimizacija performansi za različite uređaje i mreže

Utjecaj samog createRef na veličinu paketa (bundle size) je minimalan, jer je to mali dio React jezgre. Međutim, operacije koje izvodite sa svojstvom current mogu imati značajne posljedice na performanse. Za korisnike na slabijim uređajima ili sporijim mrežnim vezama (što je uobičajeno u mnogim dijelovima svijeta), neučinkovite DOM manipulacije mogu dovesti do trzanja, neresponzivnih korisničkih sučelja i lošeg korisničkog iskustva. Kada koristite refove za zadatke poput animacija, složenih izračuna rasporeda ili integracije teških biblioteka trećih strana:

• Debounce/Throttle događaje: Ako koristite refove za mjerenje dimenzija na window.resize ili scroll događajima, osigurajte da su ti rukovatelji debouncani ili throttledani kako biste spriječili prekomjerne pozive funkcija i čitanja DOM-a.
• Grupirajte čitanja/pisanja DOM-a: Izbjegavajte izmjenjivanje operacija čitanja DOM-a (npr. getBoundingClientRect()) s operacijama pisanja DOM-a (npr. postavljanje stilova). To može uzrokovati "layout thrashing". Alati poput fastdom mogu pomoći u učinkovitom upravljanju time.
• Odgodite nekritične operacije: Koristite requestAnimationFrame za animacije i setTimeout(..., 0) ili requestIdleCallback za manje kritične DOM manipulacije kako biste osigurali da ne blokiraju glavnu nit i ne utječu na responzivnost.
• Birajte mudro: Ponekad performanse biblioteke treće strane mogu biti usko grlo. Procijenite alternative ili razmislite o lijenom učitavanju (lazy-loading) takvih komponenti za korisnike na sporijim vezama, osiguravajući da osnovno iskustvo ostane performantno globalno.

2. Poboljšanje pristupačnosti (ARIA atributi i navigacija tipkovnicom)

Refovi su ključni u izgradnji visoko pristupačnih web aplikacija, posebno pri stvaranju prilagođenih UI komponenti koje nemaju nativne ekvivalente u pregledniku ili pri nadjačavanju zadanih ponašanja. Za globalnu publiku, pridržavanje Smjernica za pristupačnost web sadržaja (WCAG) nije samo dobra praksa, već često i zakonska obveza. Refovi omogućuju:

• Programsko upravljanje fokusom: Kao što se vidi s poljima za unos, refovi vam omogućuju postavljanje fokusa, što je ključno za korisnike tipkovnice i navigaciju čitačem zaslona. To uključuje upravljanje fokusom unutar modala, padajućih izbornika ili interaktivnih widgeta.
• Dinamički ARIA atributi: Možete koristiti refove za dinamičko dodavanje ili ažuriranje ARIA (Accessible Rich Internet Applications) atributa (npr. aria-expanded, aria-controls, aria-live) na DOM elementima. To pruža semantičke informacije pomoćnim tehnologijama koje se možda ne mogu zaključiti samo iz vizualnog korisničkog sučelja.

  class CollapsibleSection extends React.Component {
  constructor(props) {
  super(props);
  this.buttonRef = React.createRef();
  this.state = { isExpanded: false };
  }
  
  toggleExpanded = () => {
  this.setState(prevState => ({ isExpanded: !prevState.isExpanded }), () => {
  if (this.buttonRef.current) {
  // Dinamički ažuriraj ARIA atribut na temelju stanja
  this.buttonRef.current.setAttribute('aria-expanded', this.state.isExpanded);
  }
  });
  };
  
  componentDidMount() {
  if (this.buttonRef.current) {
  this.buttonRef.current.setAttribute('aria-controls', `section-${this.props.id}`);
  this.buttonRef.current.setAttribute('aria-expanded', this.state.isExpanded);
  }
  }
  
  render() {
  const { id, title, children } = this.props;
  const { isExpanded } = this.state;
  return (
  <div style={{ margin: '20px auto', maxWidth: '600px', border: '1px solid #0056b3', borderRadius: '8px', background: '#e7f0fa', overflow: 'hidden' }}>
  <h4>
  <button
  ref={this.buttonRef} // Ref na gumb za ARIA atribute
  onClick={this.toggleExpanded}
  style={{ background: 'none', border: 'none', padding: '15px 20px', width: '100%', textAlign: 'left', cursor: 'pointer', fontSize: '1.2em', color: '#0056b3', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
  id={`section-header-${id}`}
  >
  {title} <span>▼</span>
  </button>
  </h4>
  {isExpanded && (
  <div id={`section-${id}`} role="region" aria-labelledby={`section-header-${id}`} style={{ padding: '0 20px 20px', borderTop: '1px solid #a7d9f7' }}>
  {children}
  </div>
  )}
  </div>
  );
  }
  }

• Kontrola interakcije tipkovnicom: Za prilagođene padajuće izbornike, klizače ili druge interaktivne elemente, možda ćete trebati implementirati specifične rukovatelje događajima tipkovnice (npr. tipke sa strelicama za navigaciju unutar liste). Refovi pružaju pristup ciljnom DOM elementu gdje se ti slušači događaja mogu pridružiti i upravljati.

Promišljenom primjenom refova, programeri mogu osigurati da su njihove aplikacije upotrebljive i uključive za osobe s invaliditetom diljem svijeta, znatno proširujući njihov globalni doseg i utjecaj.

3. Internazionalizacija (I18n) i lokalizirane interakcije

Pri radu s internazionalizacijom (i18n), refovi mogu igrati suptilnu, ali važnu ulogu. Na primjer, u jezicima koji koriste pismo s desna na lijevo (RTL) (poput arapskog, hebrejskog ili perzijskog), prirodni redoslijed tabulatora i smjer pomicanja mogu se razlikovati od jezika s lijeva na desno (LTR). Ako programski upravljate fokusom ili pomicanjem pomoću refova, ključno je osigurati da vaša logika poštuje smjer teksta dokumenta ili elementa (dir atribut).

• RTL-svjesno upravljanje fokusom: Iako preglednici općenito ispravno rukuju zadanim redoslijedom tabulatora za RTL, ako implementirate prilagođene "zamke za fokus" (focus traps) ili sekvencijalno fokusiranje, temeljito testirajte svoju logiku temeljenu na refovima u RTL okruženjima kako biste osigurali dosljedno i intuitivno iskustvo.
• Mjerenje rasporeda u RTL-u: Kada koristite getBoundingClientRect() putem refa, budite svjesni da su svojstva left i right relativna u odnosu na vidljivi dio prozora. Za izračune rasporeda koji ovise o vizualnom početku/kraju, uzmite u obzir document.dir ili izračunati stil elementa kako biste prilagodili svoju logiku za RTL rasporede.
• Integracija biblioteka trećih strana: Osigurajte da su sve biblioteke trećih strana integrirane putem refova (npr. biblioteke za izradu grafikona) same po sebi svjesne i18n-a i da ispravno rukuju RTL rasporedima ako ih vaša aplikacija podržava. Odgovornost za osiguravanje toga često pada na programera koji integrira biblioteku u React komponentu.

Zaključak: Ovladavanje imperativnom kontrolom s `createRef` za globalne aplikacije

React.createRef() je više od samo "izlaza u nuždi" u Reactu; to je vitalan alat koji premošćuje jaz između Reactove moćne deklarativne paradigme i imperativne stvarnosti interakcija s DOM-om preglednika. Iako je njegovu ulogu u novijim funkcionalnim komponentama u velikoj mjeri preuzeo useRef hook, createRef ostaje standardan i najidiomatskiji način upravljanja refovima unutar klasnih komponenti, koje i dalje čine značajan dio mnogih poslovnih aplikacija diljem svijeta.

Temeljitim razumijevanjem njegovog stvaranja, pridruživanja i ključne uloge svojstva .current, programeri se mogu pouzdano nositi s izazovima kao što su programsko upravljanje fokusom, izravna kontrola medija, besprijekorna integracija s različitim bibliotekama trećih strana (od D3.js grafikona do prilagođenih uređivača obogaćenog teksta) i precizno mjerenje dimenzija elemenata. Ove sposobnosti nisu samo tehnički pothvati; one su temeljne za izgradnju aplikacija koje su performansne, pristupačne i jednostavne za korištenje za širok spektar globalnih korisnika, uređaja i kulturnih konteksta.

Sjetite se da ovu moć koristite razborito. Uvijek prvo favorizirajte Reactov deklarativni sustav stanja i propova. Kada je imperativna kontrola doista potrebna, createRef (za klasne komponente) ili useRef (za funkcionalne komponente) nudi robustan i dobro definiran mehanizam za njezino postizanje. Ovladavanje refovima osnažuje vas da se nosite s rubnim slučajevima i zamršenostima modernog web razvoja, osiguravajući da vaše React aplikacije mogu pružiti iznimna korisnička iskustva bilo gdje u svijetu, uz očuvanje temeljnih prednosti Reactove elegantne arhitekture temeljene na komponentama.

Daljnje učenje i istraživanje

• Službena React dokumentacija o refovima: Za najnovije informacije izravno iz izvora, konzultirajte <em>https://react.dev/learn/manipulating-the-dom-with-refs</em>
• Razumijevanje Reactovog `useRef` Hooka: Da biste dublje zaronili u ekvivalent za funkcionalne komponente, istražite <em>https://react.dev/reference/react/useRef</em>
• Prosljeđivanje refova s `forwardRef`: Naučite kako učinkovito prosljeđivati refove kroz komponente: <em>https://react.dev/reference/react/forwardRef</em>
• Smjernice za pristupačnost web sadržaja (WCAG): Ključno za globalni web razvoj: <em>https://www.w3.org/WAI/WCAG22/quickref/</em>
• Optimizacija performansi u Reactu: Najbolje prakse za aplikacije visokih performansi: <em>https://react.dev/learn/optimizing-performance</em>