Is there any way to perform transient updates (equivalent to Zustand useStore.subscribe)?

[looeee]

My goal: toggle the opacity of a three.js mesh without re-rendering the component.

I can do this in Zustand using subscribe. So far I haven't worked out if it's possible in Jotai.

I've set up a sandbox to show what I mean here:
https://codesandbox.io/s/r3f-jotai-vs-zustand-transient-updating-r31mc

The scene contains two meshes and two toggle button that control the opacity of each mesh. One uses Jotai, the other uses Zustand:

function DodecahedronJotai({ ...props }) {
  console.log("render Jotai")
  const [transparentJotai] = useAtom(transparentAtom)

  const material = useRef()

  useEffect(() => {
    material.current.opacity = transparentJotai ? 0.5 : 1
  }, [transparentJotai])

  return (
    <mesh {...props}>
      <dodecahedronBufferGeometry attach="geometry" />
      <meshStandardMaterial ref={material} attach="material" transparent={true} roughness={0.75} emissive="#404057" />
    </mesh>
  )
}

function DodecahedronZustand({ ...props }) {
  console.log("render Zustand")

  const material = useRef()

  useEffect(() => {
    useStore.subscribe(
      (transparent) => {
        console.log(material)
        material.current.opacity = transparent ? 0.5 : 1
      },
      (state) => state.transparent
    )
  }, [material])

  return (
    <mesh {...props}>
      <dodecahedronBufferGeometry attach="geometry" />
      <meshStandardMaterial ref={material} attach="material" transparent={true} roughness={0.75} emissive="#404057" />
    </mesh>
  )
}

The two toggle buttons:

const ToggleButtonJotai = () => {
  const [transparent, setTransparent] = useAtom(transparentAtom)
  return (
    <button
      onClick={() => {
        setTransparent(!transparent)
      }}>
      Toggle Transparency (Jotai)
    </button>
  )
}

const ToggleButtonZustand = () => {
  const { transparent, setTransparent } = useStore((state) => state)
  return (
    <button
      onClick={() => {
        setTransparent(!transparent)
      }}>
      Toggle Transparency (Zustand)
    </button>
  )
}

Whenever I click ToggleButtonJotai, the DodecahedronJotai opacity is toggled, but the component is also re-rendered and console.log("render Jotai") runs.
By contrast, when I click ToggleButtonZustand, the opacity is toggled but the component is not re-rendered - console.log("render Zustand") never runs after the initial render. I think is called transient updating?

Is it possible to transiently update the opacity of a mesh using Jotai?

[dai-shi]

Short answer is no.

It's like useState, so updating ref requires useEffect like you do.
One thing you might try is to update the ref in a child component.

function DodecahedronJotai({ ...props }) {
  console.log("render Jotai")

  const material = useRef()

  return (
    <>
      <mesh {...props}>
        <dodecahedronBufferGeometry attach="geometry" />
        <meshStandardMaterial ref={material} attach="material" transparent={true} roughness={0.75} emissive="#404057" />
      </mesh>
      <SyncTransparent material={material} />
    </>
  )
}

function SyncTransparent({ material }) {
  const [transparentJotai] = useAtom(transparentAtom)

  useEffect(() => {
    material.current.opacity = transparentJotai ? 0.5 : 1
  }, [transparentJotai])
  
  return null
}

Another hack would be to store such a ref in an atom, but it's tricky and there's no guarantee that it works in the future version.

[looeee]

OK, thanks for the info.

Passing the material into a child component is an option but is less clean than using a different state management tool so I've switched to Zustand for now. Passing a ref to the atom does seem hacky so I'd rather not do that. I want other people to be able to understand my code 😅

This feels like a deal breaker with regards to using Jotai alongside three.js, except in very simply apps where unnecessary re-rendering doesn't matter. This is a pity as I really like this library otherwise.

Is there any possibility of adding this functionality to Jotai?

[dai-shi]

This is conceptually impossible if we model after useState. (and React Context, which doesn't work for custom renderers like r3f.)

to store such a ref in an atom, but it's tricky and there's no guarantee that it works in the future version.

is another path we should explore.

const materialRefAtom = atom(() => ({ current: {} }))

function DodecahedronJotai({ ...props }) {
  console.log("render Jotai")
  
  const [materialRef] = useAtom(materialRefAtom)

  return (
    <>
      <mesh {...props}>
        <dodecahedronBufferGeometry attach="geometry" />
        <meshStandardMaterial ref={materialRef} attach="material" transparent={true} roughness={0.75} emissive="#404057" />
      </mesh>
    </>
  )
}

const ToggleButtonJotai = () => {
  const [materialRef] = useAtom(materialRefAtom)
  return (
    <button
      onClick={() => {
        materialRef.current.opacity = transparent ? 0.5 : 1
      }}>
      Toggle Transparency (Jotai)
    </button>
  )
}

It still seems hacky and you would avoid it...

This is not the first time such feature is requested.
I wish it could support such feature so that we can recommend more use cases.
We would like to re-consider this when react 18 is out.
At this point, there are many uncertainties and it should stay in useState+useContext model.

BTW, another canonical answer would be jotai/zustand. I know one would like to pick either zustand or jotai, but from the library perspective, this combination is pretty valid.

[looeee]

This is conceptually impossible if we model after useState.

Conceptually impossible or technically impossible? 😅

BTW, another canonical answer would be jotai/zustand. I know one would like to pick either zustand or jotai, but from the library perspective, this combination is pretty valid.

I did look into this, but so far I didn't see any reason for using jotai/zustand instead of just zustand. Maybe I'm missing something though...

[dai-shi]

Conceptually impossible or technically impossible? 😅

It's actually technically possible as of v1, but intentionally not exposed because it may not work in the future version like v2 with react 18.

BTW, another canonical answer would be jotai/zustand. I know one would like to pick either zustand or jotai, but from the library perspective, this combination is pretty valid.

I did look into this, but so far I didn't see any reason for using jotai/zustand instead of just zustand. Maybe I'm missing something though...

Yeah, if zustand fills your needs, there's no point of using jotai in addition.

[looeee]

OK, thank you for taking the time to explain everything to me. Much appreciated 🙏

[timedtext]

With the release of v1.6.0, Jotai can now directly implement transient updates, which is very exciting!
Great job!

import ReactDOM from "react-dom"
import React, { useEffect, useRef } from "react"
import { Canvas } from "@react-three/fiber"
import { OrbitControls } from "@react-three/drei"
import { useAtom, unstable_createStore, Provider } from "jotai"

import { transparentAtom, useStore } from "./state"

import "./styles.css"

const jotaiStore = unstable_createStore()

function DodecahedronJotai({ ...props }) {
  console.log("render Jotai")
  const material = useRef()
  const opacity = jotaiStore.get(transparentAtom) ? 0.5 : 1

  useEffect(() => {
    jotaiStore.sub(transparentAtom, () => {
      console.log("transparentAtom changed")
      const transparent = jotaiStore.get(transparentAtom) // this can be the same value as the previous one
      material.current.opacity = transparent ? 0.5 : 1
    })
  })

  return (
    <mesh {...props}>
      <dodecahedronBufferGeometry attach="geometry" />
      <meshStandardMaterial ref={material} opacity={opacity} attach="material" transparent={true} roughness={0.75} emissive="#404057" />
    </mesh>
  )
}

function DodecahedronZustand({ ...props }) {
  console.log("render Zustand")

  const material = useRef()

  useEffect(() => {
    useStore.subscribe(
      (transparent) => {
        console.log(material)
        material.current.opacity = transparent ? 0.5 : 1
      },
      (state) => state.transparent
    )
  }, [material])

  return (
    <mesh {...props}>
      <dodecahedronBufferGeometry attach="geometry" />
      <meshStandardMaterial ref={material} attach="material" transparent={true} roughness={0.75} emissive="#404057" />
    </mesh>
  )
}

const ToggleButtonJotai = () => {
  const [transparent, setTransparent] = useAtom(transparentAtom)
  return (
    <button
      onClick={() => {
        setTransparent(!transparent)
      }}>
      Toggle Transparency (Jotai)
    </button>
  )
}

const ToggleButtonZustand = () => {
  const { transparent, setTransparent } = useStore((state) => state)
  return (
    <button
      onClick={() => {
        setTransparent(!transparent)
      }}>
      Toggle Transparency (Zustand)
    </button>
  )
}

ReactDOM.render(
  <Provider unstable_createStore={() => jotaiStore}>
    <ToggleButtonJotai />
    <ToggleButtonZustand />
    <Canvas style={{ background: "#0e0e0f" }} camera={{ position: [0, 0, 7.5] }}>
      <pointLight color="indianred" />
      <pointLight position={[10, 10, -10]} color="orange" />
      <pointLight position={[-10, -10, 10]} color="lightblue" />
      <OrbitControls />

      <DodecahedronJotai position={[-2, 0, 0]} />

      <DodecahedronZustand position={[2, 0, 0]} />
    </Canvas>
  </Provider>,
  document.getElementById("root")
)

[dai-shi]

Oh, cool. Yeah, that should work. Does it work? Great!
Thanks for mentioning here. I totally forgot about it.

btw, I also did a small experiment in this field. https://github.com/dai-shi/jotai-game

[timedtext]

The useTransientAtom API looks better.
Feels like it should be in 'jotai/utils'

[tpatalas]

is Transient Update also available in Jotai? I couldn't find it on the docs.

[dai-shi]

For now, useTransientAtom is in an experimental project jotai-game.

[tpatalas]

For now, useTransientAtom is in an experimental project jotai-game.

Got it thank you for the clarification!