Bug: Problem with StrictMode in development (useEffect + useRef/Memo). useEffect ignores first value of useRef/Memo and uses second twice

[Velover]

React version 18.3.1
StrictMode renders everything twice. and if the useRef value changes on the second render useEffect uses second version of useRef twice.
That can cause some memory leaks during development and unexpected behavior for useEffect

export function useTestHook() {
  const value = useRef(Math.random());
  console.log(value, "Given");
  useEffect(() => {
    console.log("Used in effect", value);
    return () => {
      console.log(value, "Cleared");
    };
  }, []);
}

output:

Object { current: 0.26757063192266095 } Given 

Object { current: 0.3384111276512609 } Given 
Used in effect Object { current: 0.3384111276512609 }

Object { current: 0.3384111276512609 } Cleared

Used in effect Object { current: 0.3384111276512609 }

the problem with that is the reference to the first object 0.2675... was lost
and the second object 0.3384... was cleared and used again

That breaks the program if the useRef/Memo should return the cleanup callback with the object
e.g

const [object, cleanup] = useRef(someFunc());
const [state, SetState] = useState(object.Get());
useEffect(() => {
  object.OnChanged(SetState);
  return cleanup;
}, []);

because it's going to do the cleanup for the newest object immediately after connection and loose the refference to object created during the first render

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[raul276]

¡Interesante código!

Parece que estás utilizando React Hooks para manejar un objeto que tiene métodos Get(), OnChanged() y cleanup(). También estás utilizando useState para almacenar el estado del objeto y useEffect para establecer una función de callback cuando el objeto cambie.

Una posible solución para simplificar este código es utilizar useReducer en lugar de useState y useEffect. useReducer te permite manejar un estado más complejo y realizar acciones cuando el estado cambie.

Aquí te dejo un ejemplo de cómo podrías refactorizar tu código:

jsx
import { useReducer, useEffect } from 'react';

const initialState = {
  object: null,
  state: null,
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'INIT':
      return { ...state, object: action.object };
    case 'UPDATE':
      return { ...state, state: action.state };
    default:
      return state;
  }
};

const MyComponent = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    const ob
> [!TIP]
>  ¡Interesante código!

Parece que estás utilizando React Hooks para manejar un objeto que tiene métodos `Get()`, `OnChanged()` y `cleanup()`. También estás utilizando `useState` para almacenar el estado del objeto y `useEffect` para establecer una función de callback cuando el objeto cambie.

Una posible solución para simplificar este código es utilizar `useReducer` en lugar de `useState` y `useEffect`. `useReducer` te permite manejar un estado más complejo y realizar acciones cuando el estado cambie.

Aquí te dejo un ejemplo de cómo podrías refactorizar tu código:

jsx
import { useReducer, useEffect } from 'react';

const initialState = {
object: null,
state: null,
};

const reducer = (state, action) => {
switch (action.type) {
case 'INIT':
return { ...state, object: action.object };
case 'UPDATE':
return { ...state, state: action.state };
default:
return state;
}
};

const MyComponent = () => {
const [state, dispatch] = useReducer(reducer, initialState);

useEffect(() => {
const object = someFunc();
dispatch({ type: 'INIT', object });
object.OnChanged((newState) => dispatch({ type: 'UPDATE', state: newState }));
return object.cleanup;
}, []);

return

{state.state}

;
};

En este ejemplo, estamos utilizando `useReducer` para manejar el estado del objeto y el estado actual. Cuando el objeto cambia, actualizamos el estado mediante la función `dispatch`. También estamos utilizando `useEffect` para inicializar el objeto y establecer la función de callback cuando el objeto cambie.

Espero que esta solución te sea útil.

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!