[Question] What's the purpose of useIsoLayoutEffect?

Hello 👋

Sorry to bother, but I’m asking myself a question. What’s the purpose of useIsoLayoutEffect? I get it’s used to keep refs in sync, but shouldn’t this be possible directly in render?

const state = api.getState()
const stateRef = useRef(state)
const selectorRef = useRef(selector)
const equalityFnRef = useRef(equalityFn)
const erroredRef = useRef(false)

const currentSliceRef = useRef<StateSlice>()
if (currentSliceRef.current === undefined) {
  currentSliceRef.current = selector(state)
}

let newStateSlice: StateSlice | undefined
let hasNewStateSlice = false

// The selector or equalityFn need to be called during the render phase if
// they change. We also want legitimate errors to be visible so we re-run
// them if they errored in the subscriber.
if (
  stateRef.current !== state ||
  selectorRef.current !== selector ||
  equalityFnRef.current !== equalityFn ||
  erroredRef.current
) {
  // Using local variables to avoid mutations in the render phase.
  newStateSlice = selector(state)
  hasNewStateSlice = !equalityFn(
    currentSliceRef.current as StateSlice,
    newStateSlice
  )
}

// Instead of this
- useIsoLayoutEffect(() => {
-   if (hasNewStateSlice) {
-     currentSliceRef.current = newStateSlice as StateSlice
-   }
-   stateRef.current = state
-   selectorRef.current = selector
-   equalityFnRef.current = equalityFn
-   erroredRef.current = false
- })

// Shouldn't this work too (and be more suited for React Native, which doesn't have useLayoutEffect)?
+ if (hasNewStateSlice) {
+  currentSliceRef.current = newStateSlice as StateSlice
+ }
+ stateRef.current = state
+ selectorRef.current = selector
+ equalityFnRef.current = equalityFn
+ erroredRef.current = false

[dai-shi]

Well, there are a lot of discussions on this topic by someone and react team, in twitter and github. This gist might help: https://gist.github.com/sebmarkbage/75f0838967cd003cd7f9ab938eb1958f

---

const ref = { current: 0 }
const func = () => {
  ++ref.current
  return ref.current
}

I think you would agree that this is not pure.

const Comp = () => {
  const ref = useRef(0)
  ++ref.current
  return <>{ref.current}</>
}

So, this?

[dai-shi]

No problem!