Réduisez les rendus de React avec mlyn.

Le problème : vous avez une application, où un composant se met à jour, qui devrait être affichée dans une partie absolument différente de l'application. La solution la plus simple consisterait à « propager » la valeur dans la hiérarchie de vos composants.

Supposons l'application suivante :

Il n'a que 4 composants :

• App : conteneur d'application (déclare l'état)
• A : curseur
• B : div où la valeur du curseur est rendue
• C : conteneur de 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>
  );
});

Si nous voulons mettre à jour la valeur d'affichage de la diapositive en B , c'est ce qui se passera à chaque mise à jour

Mlyn résout ce problème en introduisant des valeurs proxy appelées sujets. Vous pouvez transmettre ces sujets (ou des parties d'entre eux) à vos enfants et vous abonner / mettre à jour uniquement si nécessaire. Passons en revue la migration du code ci-dessus par étapes :

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);
      }}
    />
  );
};

La valeur de progress$subject peut être transmise à d'autres composants de votre application. Cependant, seul le composant dans lequel vous vous êtes abonné au sujet sera re-rendu.

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>
  );
};