context-chain.jsx

import { useState, useContext, createContext } from "react"

const CounterContext = createContext()
const CounterProvider = CounterContext.Provider

const useCounter = () => useContext(CounterContext)

const useNewCounter = () => {
	const [count, setCount] = useState(0)
	return {
		count,
		up: () => setCount(x => x + 1)
	}
}

const useChainCounter = () => {
	const parent_counter = useCounter()
	const counter = useNewCounter()
	return {
		...counter,
		up: () => {
			counter.up()
			parent_counter?.up()
		}
	}
}

const Parent = () => {
	const counter = useNewCounter()
	return (
		<CounterProvider value={counter}>
			<Button />
			<hr />
			<Child />
			<hr />
			<Button />
		</CounterProvider>
	)
}

const Child = () => {
	const chain_counter = useChainCounter()
	return (
		<CounterProvider value={chain_counter}>
			<Button />
			<Button />
		</CounterProvider>
	)
}

const Button = () => {
	const counter = useCounter()
	return (
		<button onClick={counter.up}>{counter.count}</button>
	)
}