05. useRef — referencje i persystentne wartości między renderami

useRef — referencje bez re-renderów

useRef zwraca mutable obiekt { current: value } który persystuje między renderami bez powodowania re-renderów. Dwa główne zastosowania: dostęp do elementów DOM (ref na input, video) i przechowywanie mutowalnych wartości (poprzedni stan, ID timera, flagi).

useRef to narzędzie do “ucieczki” z modelu danych React. Czasem potrzebujesz wartości która się zmienia ale NIE powinna powodować re-renderów. Lub musisz bezpośrednio dotknąć elementu DOM (focus, play video). useRef jest odpowiedzią.

1. Wyjaśnić czym jest ref i jak różni się od state
2. Opisać dostęp do elementów DOM przez ref prop
3. Wyjaśnić przechowywanie mutable values (ID timera, poprzedni state)
4. Omówić kiedy NIE używać useRef (zamiast state)

1. useRef API — zwraca { current: initialValue }, .current jest mutable
2. DOM refs — <input ref={inputRef} />, inputRef.current.focus()
3. Uncontrolled inputs — pobieranie wartości inputa przy submit przez ref
4. Mutable values — przechowywanie wartości która nie powoduje re-renderu
5. previousValue pattern — zapamiętywanie poprzedniej wartości stanu

• Struktura minimalna

1. Wstęp — ograniczenia useState gdy potrzebujesz mutable wartości
2. Rozdział 1: DOM refs — ref prop, dostęp do elementów DOM
3. Rozdział 2: Mutable values — bez re-renderu, ID timerów, flagi
4. Rozdział 3: Uncontrolled inputs — useRef vs useState dla formularzy
5. Podsumowanie
6. Bibliografia

useRef to escape hatch z React!

Opisz useRef jako “bezpieczne wyjście” — kiedy React data model nie wystarczy i potrzebujesz dotknąć “surowego” DOM lub przechować coś bez re-renderu.