reactjs - ¿Existe una manera correcta de usar un objeto como dependencia en useEffect?

Actualmente tengo un hook de React que estoy creando que acepta un objeto de consulta.

export function useMyQuery(query: QueryObjectType)
{
    React.useEffect(executeQuery, [ query ]);
    // ...
}

Desafortunadamente, cada vez que se llama a mi hook como parte de un re-renderizado, a pesar de que query nunca ha cambiado y sigue siendo el mismo objeto que antes, termino con un bucle infinito.

Puedo resolver esto envolviendo query con JSON.stringify(...), sin embargo, no estoy seguro de si eso es correcto. ¿Existe algún mecanismo preferido para probar la igualdad de los objetos cuando se pasan como dependencia a useEffect?

Respuesta #1

Agregar un useState() debería ayudar. Necesitarías devolver el setter para permitir volver a consultar desde el componente padre.

useState(query) solo se activa en la primera renderización, por lo que _query permanece igual hasta que se establezca explícitamente.

export function useMyQuery(query: QueryObjectType)
{
    const [_query, setQuery] = useState(query);

    React.useEffect(executeQuery, [ _query ]);
    // ...

   return setQuery;
}