mlynでReactの再レンダリングを減らします。

問題：コンポーネントが状態を更新するアプリケーションがあり、アプリのまったく異なる部分に表示される必要があります。最も簡単な解決策は、コンポーネント階層を介して値を「プロップドリル」することです。

次のアプリを想定します。

コンポーネントは4つだけです。

• アプリ：アプリケーションコンテナ（状態を宣言します）
• A：スライダー
• B：スライダーの値がレンダリングされるdiv
• C：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>
  );
});

Bのスライドの表示値を更新する場合、これはすべての更新で発生します。

Mlynは、サブジェクトと呼ばれるプロキシ値を導入することでこの問題を解決します。あなたはそれらの主題（またはそれらの一部）をあなたの子供に渡し、必要な場合にのみ購読/更新することができます。上記のコードの移行を手順ごとに確認してみましょう。

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

progress$件名の値は、アプリの他のコンポーネントを介して渡すことができます。ただし、サブジェクトをサブスクライブしたコンポーネントのみが再レンダリングされます。

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