facebook / facebook/relay

useLazyLoadQuery in combination with useMemo may cause infinite render loops

Open
#3,916 0 comments 2 reactions 0 assignees View on GitHub
Dominant language
Rust
Stars
19k
Forks
1.9k
PR merge metrics
No merged PRs in 30d

Description

Not sure if this is intended, but I would not have expected useLazyLoadQuery like this,
In this application there is no router nor any action that may trigger a load. Components are being lazy loaded into the host app and then query the data they require.

No in one case I have the following:

```
const variables = useMemo(
() => ({ where: {
timestampUtc: { gte: new Date().toISOString() },
} }),
[]
);

const data = useLazyLoadQuery(query, variables, {
fetchPolicy: 'store-or-network',
});
```

As useMemo has an empty dependency array, I would expect this to only render once despite the fact that in side useMemo a new Date object is being generated. But it's running into an endless render loop querying each time.

I can solve this by passing the variables as props from the parent component for instance. However I don't understand why useMemo is not already preventing the re-renders.

I've seen that there is an undocumented parameter in the options passed to `useLazyLoadQuery`: `UNSTABLE_renderPolicy`. Can the render behavior be influenced by it?

We're using react-relay/relay-runtime 13.2.0 and react 17.0.2.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.