Riduci React re-render con mlyn.

Il problema: hai un'applicazione, in cui uno stato di aggiornamento del componente, che dovrebbe essere visualizzato in una parte assolutamente diversa dell'app. La soluzione più semplice sarebbe quella di "esercitare" il valore attraverso la gerarchia dei componenti.

Supponiamo che la seguente app:

Ha solo 4 componenti:

• App : contenitore dell'applicazione (dichiara lo stato)
• A : Slider
• B : div dove viene visualizzato il valore dello slider
• C : contenitore di B

import React, { useState } from "react";
const A = React.memo(({ progress, setProgress }) => {
  return (
    <input
      type="range"
      value={progress}
      onChange={(e) => {setProgress(e.target.value);}}
    />
  );
});
const B = React.memo(({ progress }) => {
  console.log(">>> render B");
  return <div>{progress}</div>;
});
const C = React.memo(({ progress }) => {
  console.log(">>> render C:", progress);
  return (
    <div style={{ padding: 10, backgroundColor: "yellow" }}>
      <B progress={progress} />
    </div>
  );
});
export const App = React.memo(() => {
  const [progress, setProgress] = useState(0);
  console.log(">>> render App");
  return (
    <div>
      <A progress={progress} setProgress={setProgress} />
      <C progress={progress} setProgress={setProgress} />
    </div>
  );
});

Se vogliamo aggiornare il valore di visualizzazione della diapositiva in B , questo è ciò che accadrà ad ogni aggiornamento

Mlyn risolve questo problema introducendo valori proxy chiamati soggetti. Puoi passare quei soggetti (o parti di essi) ai tuoi figli e iscriverti / aggiornare solo dove necessario. Esaminiamo la migrazione del codice sopra per passaggi:

export const App = () => {
  const progress$ = useSubject(0);
  console.log(">>> render App");
  return (
    <div>
      <A progress$={progress$} />
      <C progress$={progress$} />
    </div>
  );
};

const A = ({ progress$ }) => {
  const progress = useSubjectValue(progress$);
  return (
    <input
      type="range"
      value={progress}
      onChange={(e) => {
        progress$(e.target.value);
      }}
    />
  );
};

Il valore progress$dell'oggetto può essere passato attraverso altri componenti della tua app. Tuttavia, verrà riprodotto solo il componente in cui ti sei abbonato all'oggetto.

const B = ({ progress$ }) => {
  console.log(">>> render B");
  const progress = useSubjectValue(progress$);
  return <div>{progress}</div>;
};
const C = ({ progress$ }) => {
  console.log(">>> render C");
  return (
    <div style={{ padding: 10, backgroundColor: "yellow" }}>
      <B progress$={progress$} />
    </div>
  );
};