Bug: `useInsertionEffect()` doesn't fire before `useLayoutEffect()` about react

[egonSchiele]

Hi @catamphetamine ,
You're using strict mode, and useInsertionEffect does not mount twice the way useLayoutEffect and useEffect do.

[catamphetamine]

@egonSchiele

You're using strict mode, and useInsertionEffect does not mount twice the way useLayoutEffect and useEffect do.

Thanks, but why doesn't it though?
Don't you consider it a bug?
They're all "effect"s, so why does their behavior differ in strict mode?
That makes no sense and useInsertionEffect() isn't supposed to be anything "special":

useInsertionEffect is a version of useEffect that fires before any DOM mutations.

From the official docs:
https://beta.reactjs.org/reference/react/useInsertionEffect

So I consider the current behavior a bug.

[catamphetamine]

Looks like in the current versions of React, the only workaround for the "strict" mode would be modifying the effect hooks like this:

import { useRef, useCallback } from 'react'

// A workaround for a React bug when `useInsertionEffect()` doesn't run twice on mount
// in "strict" mode unlike `useEffect()` and `useLayoutEffect()` do.
// https://github.com/facebook/react/issues/26320
export default function useEffectDontMountTwiceInStrictMode(useEffect, handler, dependencies) {
  if (!Array.isArray(dependencies)) {
    throw new Error('Dependencies argument must be an array')
  }

  const { onEffect } = useEffectStatus()
  const { onChange } = usePrevousValue(dependencies)

  useEffect(() => {
    const { isInitialRun } = onEffect()
    const previousDependencies = onChange(dependencies)
    if (isInitialRun || !isShallowEqualArrays(previousDependencies, dependencies)) {
      const cleanUpFunction = handler()
      if (typeof cleanUpFunction === 'function') {
        throw new Error('An effect can\'t return a clean-up function when used with `useEffectDontMountTwiceInStrictMode()` because the clean-up function won\'t behave correctly in that case')
      }
    }
  }, dependencies)
}

function useEffectStatus() {
  const hasMounted = useRef(false)

  const onEffect = useCallback(() => {
    const wasAlreadyMounted = hasMounted.current
    hasMounted.current = true
    return {
      isInitialRun: !wasAlreadyMounted
    }
  }, [])

  return {
    onEffect
  }
}

function usePrevousValue(value) {
  const prevValue = useRef(value)

  const onChange = useCallback((value) => {
    const previousValue = prevValue.current
    prevValue.current = value
    return previousValue
  }, [])

  return {
    onChange
  }
}

function isShallowEqualArrays(a, b) {
  if (a.length !== b.length) {
    return false
  }
  let i = 0
  while (i < a.length) {
    if (a[i] !== b[i]) {
      return false
    }
    i++
  }
  return true
}

import { useLayoutEffect } from 'react'

function Component() {
  useEffectDontMountTwiceInStrictMode(useLayoutEffect, handler, dependencies)
}

For example, in my case, a library uses useInsertionEffect() / useLayoutEffect() to squeeze into that tiny timeframe in order to accept some calls from child components' useLayoutEffect()s, so 1:1 calls correspondence is a requirement.

[egonSchiele]

I think you are correct, it needs to mount twice. I am working on this bug now and the discussion is happening here #26332

[catamphetamine]

@egonSchiele Wow, that was quick, thanks 👍