Consider if context propagation and memo gives performance improvement

[avkonst]

/* eslint-env browser */

import React from "react";
import ReactDOM from "react-dom";

const bitForA = 1 << 0;
const bitForB = 1 << 1;

const MyContext = React.createContext({ a: 1, b: 1 }, (prev, next) => {
  console.log("prev", JSON.stringify(prev));
  console.log("next", JSON.stringify(next));
  let changedBits = 0;
  if (prev.a !== next.a) changedBits |= bitForA;
  if (prev.b !== next.b) changedBits |= bitForB;
  return changedBits;
});

const ComponentA = () => {
  const context = React.useContext(MyContext, bitForA);
  return (
    <p>
      Value A: {context.a} {Math.random()}
    </p>
  );
};
const ComponentB = () => {
  const context = React.useContext(MyContext, bitForB);
  return (
    <p>
      Value B: {context.b} {Math.random()}
    </p>
  );
};

const Main = React.memo(() => (
  <React.Fragment>
    <ComponentA />
    <ComponentB />
  </React.Fragment>
));

const App = () => {
  const [state, setState] = React.useState({ a: 1, b: 1 });
  return (
    <MyContext.Provider value={state}>
      <Main />
      <button onClick={() => setState({ ...state, a: state.a + 1 })}>
        Increment A
      </button>
      <button onClick={() => setState({ ...state, b: state.b + 1 })}>
        Increment B
      </button>
    </MyContext.Provider>
  );
};

ReactDOM.unstable_createRoot(document.getElementById("app")).render(<App />);