ALT https://tsplay.dev/mL2Lkw
ALT https://tsplay.dev/w174Km
![But this too is not a new or a “React Problem”. All reactive programming libraries have this problem, and the solution for it.
For example, here’s the RxJS version...
```js
import * as Rx from "rxjs"
const createCounter = t => {
let $ = new Rx.BehaviorSubject(0)
setInterval(() => $.next($.value + 1), t)
return $
}
let a$ = createCounter(3000)
let b$ = createCounter(1000)
// both a$ and b$ are tracked
// Rx.combine([a$, b$]).subscribe(([a, b]) => {
// console.log(`${a} ${b}`)
// })
// only a$ is tracked
a$.pipe(Rx.withLatestFrom(b$)).subscribe(([a, b]) => {
console.log(`${a} ${b}`)
})
```](https://pbs.twimg.com/media/FdWvh9daMAA6XHh.png?name=orig)
ALT But this too is not a new or a “React Problem”. All reactive programming libraries have this problem, and the solution for it. For example, here’s the RxJS version... ```js import * as Rx from "rxjs" const createCounter = t => { let $ = new Rx.BehaviorSubject(0) setInterval(() => $.next($.value + 1), t) return $ } let a$ = createCounter(3000) let b$ = createCounter(1000) // both a$ and b$ are tracked // Rx.combine([a$, b$]).subscribe(([a, b]) => { // console.log(`${a} ${b}`) // }) // only a$ is tracked a$.pipe(Rx.withLatestFrom(b$)).subscribe(([a, b]) => { console.log(`${a} ${b}`) }) ```
ALT And here’s the MobX version... ```js import * as Mx from "mobx" const createCounter = t => { let x = Mx.observable({ value: 0 }) setInterval(() => x.value++, t) return x; } let a = createCounter(3000) let b = createCounter(1000) // both a and b are tracked // Mx.autorun(() => { // console.log(`${a.value} ${b.value}`) // }) // only a is tracked Mx.autorun(() => { console.log(`${a.value} ${Mx.untracked(() => b.value)}`) }) ```
![And here’s the SolidJS version...
```js
import * as S from "solid-js"
const createCounter = t => {
let [x, setX] = S.createSignal(0)
setInterval(() => setX(x() + 1), t)
return x;
}
let a = createCounter(3000)
let b = createCounter(1000)
// both a and b are tracked
// S.createEffect(() => {
// console.log(`${a()} ${b()}`)
// })
// only a is tracked
S.createEffect(() => {
console.log(`${a()} ${S.untrack(() => b())}`)
})
```](https://pbs.twimg.com/media/FdWt8E8aEAAb_xh.png?name=orig)
ALT And here’s the SolidJS version... ```js import * as S from "solid-js" const createCounter = t => { let [x, setX] = S.createSignal(0) setInterval(() => setX(x() + 1), t) return x; } let a = createCounter(3000) let b = createCounter(1000) // both a and b are tracked // S.createEffect(() => { // console.log(`${a()} ${b()}`) // }) // only a is tracked S.createEffect(() => { console.log(`${a()} ${S.untrack(() => b())}`) }) ```
![I can keep going, but finally here’s the React version...
```js
import Re from "react"
import ReDom from "react-dom"
const useCounter = t => {
let [x, setX] = Re.useState(0)
Re.useEffect(() => {
setInterval(() => setX(x => x + 1), t)
}, [])
return x
}
const useReffed = a => {
let aRef = Re.useRef(a)
Re.useEffect(() => aRef.current = a, [a])
return aRef
}
const App = () => {
let a = useCounter(3000)
let b = useCounter(1000)
let bRef = useReffed(b)
// both a and b are tracked
// Re.useEffect(() => {
// console.log(`${a} ${b}`)
// }, [a, b])
// only a is tracked
Re.useEffect(() => {
console.log(`${a} ${bRef.current}`)
}, [a])
return null
}
ReDom.render(<App/>, document.getElementById("root"))
```](https://pbs.twimg.com/media/FdWuPMcUYAErt6V.png?name=orig)
ALT I can keep going, but finally here’s the React version... ```js import Re from "react" import ReDom from "react-dom" const useCounter = t => { let [x, setX] = Re.useState(0) Re.useEffect(() => { setInterval(() => setX(x => x + 1), t) }, []) return x } const useReffed = a => { let aRef = Re.useRef(a) Re.useEffect(() => aRef.current = a, [a]) return aRef } const App = () => { let a = useCounter(3000) let b = useCounter(1000) let bRef = useReffed(b) // both a and b are tracked // Re.useEffect(() => { // console.log(`${a} ${b}`) // }, [a, b]) // only a is tracked Re.useEffect(() => { console.log(`${a} ${bRef.current}`) }, [a]) return null } ReDom.render(<App/>, document.getElementById("root")) ```
