React 19 e le Ref come Prop

Vasco: Ciao a tutti! Oggi io e Mario vogliamo parlarvi di una delle novità più attese e rivoluzionarie introdotte in React 19: la possibilità di utilizzare le ref direttamente come prop. Questo cambiamento elimina la necessità di combinare forwardRef e useImperativeHandle, rendendo il codice molto più leggibile e semplice da mantenere.

Mario: Esatto, Vasco. Chiunque abbia lavorato con React e abbia avuto bisogno di passare una ref a un componente personalizzato sa quanto fosse laborioso gestirle. React 19 semplifica tutto questo con un supporto nativo che ci permette di trattare le ref come una prop qualunque.

Cos'è il supporto alle Ref come Prop?

Vasco: In React 18 e versioni precedenti, se volevi passare una ref a un componente personalizzato, dovevi utilizzare due hook: forwardRef e useImperativeHandle. Con React 19, invece, puoi semplicemente passare la ref come una prop senza configurazioni aggiuntive.

Mario: Proprio così. Questo rende l'utilizzo delle ref più naturale e riduce il codice boilerplate necessario per creare componenti che accettano ref.

Come funzionano le Ref come Prop in React 19?

Vasco: Con React 19, puoi passare una ref direttamente a un componente personalizzato senza bisogno di forwardRef. Ecco un esempio semplice:

import { useRef } from "react";

function CustomInput({ ref }) {
  return  <input ref="{ref}" placeholder="Scrivi qui..." />;
}

export default function App() {
  const inputRef = useRef();

  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>
        Focus sull'input
      </button>
    </div>
  );
}

Mario: Vedi? È molto più leggibile! Non c'è bisogno di aggiungere forwardRef per inoltrare la ref.

E se servono metodi personalizzati?

Vasco: Se hai bisogno di esporre metodi personalizzati tramite la ref, in React 18 dovevi usare forwardRef insieme a useImperativeHandle. Ora non è più necessario. Puoi definire i tuoi metodi direttamente all'interno del componente:

function CustomInput({ ref }) {
  return (
    <input
      ref={(node) => {
        if (node) {
          ref.current = {
            focus: () => node.focus(),
            clear: () => (node.value = ""),
          };
        }
      }}
      placeholder="Scrivi qui..."
    />
  );
}

Mario: Questo approccio semplifica la gestione delle ref senza aggiungere complessità al componente.

Come si faceva prima?

Vasco: In passato, dovevi usare forwardRef per inoltrare la ref e useImperativeHandle per definire i metodi personalizzati. Ecco un esempio con React 18:

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

const CustomInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),
    clear: () => (inputRef.current.value = ""),
  }));

  return  <input ref={inputRef} placeholder="Scrivi qui..." />;
});

export default function App() {
  const inputRef = useRef();

  return (
    <div>
      <CustomInput ref={inputRef} />
        <button onClick={() => inputRef.current.focus()}>
        Focus sull'input
      </button>
    </div>
  );
}

Mario: Funziona, ma è decisamente più complesso. Con React 19, tutto questo è semplificato e più intuitivo.

Vantaggi delle Ref come Prop

Vasco: Vediamo rapidamente i principali vantaggi di questa nuova funzionalità:

1. Semplicità: Non serve più usare forwardRef e useImperativeHandle.
2. Leggibilità: Il codice è più chiaro e dichiarativo.
3. Manutenzione: Riduce il rischio di bug e semplifica la gestione delle ref in componenti complessi.
4. Performance: Meno overhead rispetto all'uso di hook aggiuntivi.

Mario: Inoltre, questa funzionalità migliora la coerenza nel modo in cui le ref vengono passate e utilizzate nei progetti.

Conclusioni

Vasco: In sintesi, il supporto alle ref come prop in React 19 è una delle novità più utili per chi sviluppa applicazioni complesse. Questa funzionalità non solo semplifica il codice, ma rende più piacevole lavorare con le ref nei progetti React.

Mario: E voi? Avete già iniziato a sfruttare questa nuova funzionalità nei vostri progetti? Fatecelo sapere nei commenti e condividete le vostre esperienze! 😊