Bug: useRef cleanup in StrictMode refers to second ref twice about react

[BlackGlory]

This should not be the expected behavior, see this example.

import { useMemo, useLayoutEffect, useEffect } from 'react'

let count = 0

export default function App() {
  const obj = useMemo(() => ({ id: count++ }), [])
  console.log(`render ${obj.id}`)

  useLayoutEffect(() => {
    console.log(`useLayoutEffect ${obj.id}`)
    return () => console.log(`useLayoutEffect(cleanup) ${obj.id}`)
  }, [obj])

  useEffect(() => {
    console.log(`useEffect ${obj.id}`)
    return () => console.log(`useEffect(cleanup) ${obj.id}`)
  }, [obj])

  return <></>
}

The current behavior:

render 0
render 1
useLayoutEffect 1
useEffect 1
useLayoutEffect(cleanup) 1
useEffect(cleanup) 1
useLayoutEffect 1
useEffect 1

The expected behavior:

render 0
render 1
useLayoutEffect 0
useEffect 0
useLayoutEffect(cleanup) 0
useEffect(cleanup) 0
useLayoutEffect 1
useEffect 1

This is very bad.
If your useMemo returns an AbortController whose cleanup function is controller.abort(),
then your controller.signal will be aborted at the beginning because it actually performs the cleanup function on the second controller.

[Werter12]

@MaciejNiklasinski I think you could add these block inside the useEffect function and it will work as you expect:

  if (ref.current === null) {
    const id = map.size; //Symbol();
    const handle = { id };
    console.log(`Adding Symbol ${id} to map`);
    map.set(id, handle);
    ref.current = handle;
  }

I also noticed that in the component before first mount the mentioned code gets triggered twice. And both time ref.current is null and map add two elements. Actually, the same behavior as you mentioned. Yeah, and only in the Strict Mode

[MaciejNiklasinski]

@Werter12 Thank you for your suggestion, unfortunately in my real use case it won't work.

I need the handle object to be created and added to the map before the function returns the first time.

export const useSubscribction = () => {
  const ref = useRef(null);
  if (ref.current === null) {
    const id = Symbol();
    const handle = { id };
    map.set(id, handle);
    ref.current = handle;
  }

  useEffect(() => () => { map.delete(ref.current.id); }, [] );
  
  // At this point before the function returns the first time I need a handle object to already exist.
  // If it is moved to the useEffect (componentDidMount equivalent part) that will not be the case.
};

[catamphetamine]

I've also encountered this bug: in strict mode, this inside a class component will point to the second instance in both cases of componentDidMount() / componentWIllUnmount().

• Component instance A is created
• Component instance B is created
• componentDidMount() is called with this being B
• componentWillUnmount() is called with this being B
• componentDidMount() is called with this being B

Because of that, clean-up is not possible and various "stale props" bugs occur because componentWillUnmount() performs a clean-up of the instance B which is the one that React keeps while the instance A is what React disposes of but that instance A remains "uncleaned" and its event listeners still operate.

I've submitted a separate bug report: #26467

[catamphetamine]

@MaciejNiklasinski Have a look at my bug report: #26467
Is it the same issue? If yes then I guess the "weird" behavior is an intentional one to reveal the components that rely on doing stuff during render ("side effects").

[fhucko]

I have same problem, described it in different issue #25284 (comment).