reactjs - Finns det ett korrekt sätt att använda ett objekt som en beroende i useEffect?


Jag har för närvarande en React-hook som jag skapar som accepterar ett frågeobjekt.

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

Tyvärr, varje gång min hook blir anropad som en del av en återrendering, trots att query aldrig har förändrats och fortfarande är exakt samma objekt som tidigare, hamnar jag i en oändlig loop.

Jag kan lösa detta genom att omge query med JSON.stringify(...), men jag är inte säker på om det är korrekt? Finns det någon föredragen metod för att testa likhet för objekt när de skickas som ett beroende till useEffect?

Svar #1

Att lägga till en useState() borde hjälpa. Du skulle behöva returnera setter-funktionen för att tillåta omfrågning från föräldern.

useState(query) körs endast vid den första renderingen, så _query förblir densamma tills den uttryckligen sätts.

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

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

   return setQuery;
}