Skip to content

Instantly share code, notes, and snippets.

@Drag13
Last active February 4, 2024 14:55
Show Gist options
  • Save Drag13/7f136121021e6f21772979994fd25a99 to your computer and use it in GitHub Desktop.
Save Drag13/7f136121021e6f21772979994fd25a99 to your computer and use it in GitHub Desktop.
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>;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment