Reduce React re-renderiza com mlyn.

O problema: você tem um aplicativo em que um componente é atualizado e deve ser exibido em uma parte totalmente diferente do aplicativo. A solução mais simples seria "perfurar" o valor por meio da hierarquia de seus componentes.

Suponha o seguinte aplicativo:

Possui apenas 4 componentes:

• App : contêiner do aplicativo (declara o estado)
• R : Slider
• B : div onde o valor do controle deslizante é renderizado
• C : recipiente 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>
  );
});

Se quisermos atualizar o valor de exibição do slide em B , isso é o que acontecerá em cada atualização

Mlyn resolve esse problema introduzindo valores de proxy chamados assuntos. Você pode passar esses assuntos (ou partes deles) para seus filhos e se inscrever / atualizar apenas quando necessário. Vamos revisar a migração do código acima por etapas:

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

O valor do progress$assunto pode ser passado por outros componentes do seu aplicativo. No entanto, apenas o componente no qual você se inscreveu no assunto será renderizado novamente.

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