Issue with 2.0.0-beta.5 and React Native (React 17)

[diego-paired]

This is using React Native 68 and React 17, in case it has to do with the lack of Suspense.

After having migrated to SWR 2, we're starting to see odd behaviour that leads to screens showing always loading.

We have managed to reproduce it even when removing all config, cache etc.

• A bare useSwr with a fetcher
• On first call, the fetcher is called and finishes correctly (returns the data from the API)
• When a custom cache is used, the item is written to cache
• useSwr does not emit a data object, it stays loading
• If the item is rerendered or remounted, the data object returns (sometimes stale from the cache)

I don't know how to proceed in debugging this issue, any help would be appreciated, thanks.

[shuding]

It seems that you are using a custom cache, did you follow the migration guide here in the "Internal structure of the cached data" section? https://github.com/vercel/swr/releases/tag/2.0.0-beta.0

[diego-paired]

@shuding thank you for your response. The issue happens even if I comment out all of our settings, including the custom cache provider

The cache implementation remains the same, we've only updated code where the cache is accessed directly, but I'm assuming all internal SWR code is adhering to the new format and when setting data in the cache, it's already in that format (we've had SWR2 in production for a few weeks)

[huozhi]

@diego-paired can you share a minimal repo or any oneline reproduction of that issue that we can debug and investigate?

[shuding]

Yeah the new versions have been refactored to support better concurrent rendering scenarios, meanwhile it's possible to cause some misbehaviors. We currently can't reproduce the described problem, and something like a little https://snack.expo.dev/ example will be very helpful.

[diego-paired]

I've had to downgrade to version 1 to be able to release our app, will try migrating to 2 again, perhaps after RN 69 since it already supports suspense

[shuding]

If you are not using Suspense, it will likely not to be the cause. That said, v2 should work fine with Suspense and/or React 17, so this is definitely a bug. I'll keep this open and maybe we can get a reproduction soon. 👍

[frenic]

I had the same issue but 2.0.0-beta.4 worked for me

[youssdevx]

I have the same issue with 2.0.0-beta.0/1/2/3/4/5/6. It is like data, isLoading and isValidating are not recalculated and therefore, component does not re-render.

Here is a video of what happens for me.

https://user-images.githubusercontent.com/21293851/182166305-955428a3-4f7f-4a92-8e94-2bc4c7cf6c86.mp4

1. I reload the app and see that data === undefined and isLoading and isValidating are equal to false. No data is shown.
2. I go to VsCode and save a file to force re-render. Now, we see that data is not undefined and that isLoading is equal to false. However, still no data shown.
3. I go to VsCode and save a file to force re-render a second time. Now the app shows the data we are supposed to see.

I think there's a problem of re-rendering somehow 🤷🏽‍♂️

[youssdevx]

Hello @shuding, do you have any update on this? Thanks for the help :)

[Bezolt]

I have the same problem but with react 18. (no react native)

[exodusanto]

Same issue with v2.0 stable. I'm using React 17 with RN 64/65/66 same issue, rollback to v1 fix the re-render.

[MayurNegi]

facing same issue with v2.0.0. Working with downgrading to v1.3.0. React native version: 0.66.3

[chenop]

Facing same issue with v2.1.0, react native: 0.66.4

reverting to useSWR 1.x solve the issue

[vzts]

This issue was really difficult to figure out (and was very frustrating).

I guess this is some incompatibility issue with old react-native fetch implementation with the latest swr. Or maybe rendering trigger issue with old react.

The issue does not happen with latest combination: react native(v0.71.4), react(v18.2.0), swr(v2.1.1). Also, it does not happen with old combination: react native(v0.66.1), react(v17.0.2), swr(v1.x).

An example reproduction step:

npx [email protected] init TestProject --version 0.66.1
cd TestProject
npx pod-install ios
yarn add swr
yarn ios

Test Code (edit App.jsx)

import React from 'react';
import {SafeAreaView, StatusBar, Text} from 'react-native';
import useSWR from 'swr';

const fetcher = (url: string) => fetch(url).then(r => r.json());

const App = () => {
  const {data, isLoading, isValidating} = useSWR(
    'https://dummyjson.com/products/1',
    fetcher,
  );
  return (
    <SafeAreaView>
      <StatusBar />
      <Text>isData: {JSON.stringify(data)}</Text>
      <Text>isLoading: {String(isLoading)}</Text>
      <Text>isValidating: {String(isValidating)}</Text>
    </SafeAreaView>
  );
};

export default App;

Test Environment

react-native: 0.66.1
react: 17.0.2
swr: 2.1.1

iOS Simulator: iPhone 14 Pro (iOS 16.2)
Architecture: Intel Mac

Example Repository https://github.com/vzts/SwrRnTestProject yarn && npx pod-install ios && yarn ios

Screenshot (data state does not update, even if the response from fetch is received successfully)

[chenop]

@diego-paired Please keep it open since:

Given a project with RN lower than v0.71 and swr 2 Then isLoading flag stays true even after http call completed successfully

[victorsouza-mnz]

Same problem here with RN 0.65.1

solved by downgrading swr from 2.x to 1.3.0