re-render.tsx

import React from 'react';
import {
  createContext,
  useContext,
  useState,
} from 'react';

export function HomePage() {
  const [s, setS] = useState(1);
  const setValue = (v: number) =>
    setS(v);
  return (
    <AppCtx.Provider
      value={{
        value: s,
        setter: setValue,
      }}
    >
      <MemoView />
      <SubView />

      <Button />
    </AppCtx.Provider>
  );
}

const AppCtx = createContext({
  value: 1,
  setter: (v: number) => {},
});

function Button() {
  const ctx = useContext(AppCtx);
  return (
    <button
      onClick={() =>
        ctx.setter(ctx.value + 1)
      }
    >
      Test
    </button>
  );
}

const MemoView = React.memo(
  function View() {
    const { value } =
      useContext(AppCtx);
    return (
      <>
        <h1>{value}</h1>
        <SubView />
      </>
    );
  }
);

function SubView() {
  console.log(`Re-rendered`);
  return <div>Hello</div>;
}