useSWR not re-rendering component with API response

[4mit]

Bug report

Description / Observed Behavior

I am using it like below but once data is received from API it should re-render the component and and response should be updated but it's not re-rendering so no data getting received from useSWR and useSWRMutation xxx and yyy should log with data received from API but its not, not sure what's wrong

What kind of issues did you encounter with SWR? component not re-rendering

Expected Behavior

component should re-render with api response

How did you expect SWR to behave here? component should re-render with api response

Repro Steps / Code Example

I am using it like below but once data is received from API it should re-render the component and and response should be updated but it's not re-rendering so no data getting received from useSWR and useSWRMutation
xxx and yyy should log with data received from API but its not, not sure what's wrong

import React from 'react';
import {Text, StyleSheet, View} from 'react-native';
import useSWR from 'swr';
import useSWRMutation from 'swr';

const fetcher = async (url: any) => {
     console.log('hello...');
     const res = await fetch(url).then(r => r.json());
     console.log('hello...', res);
     return res;
};

const Home = ({
   navigation,
}) => {
    console.log('AppStack gg >>>>>>>>>><<<<<<<<<<<');
    const xxx = useSWR(
           'some_url_in_project',
           fetcher,
    );
console.log('JSON.stringify(xxx) >>>>>>>>>><<<<<<<<<<<', JSON.stringify(xxx));

const yyy = useSWRMutation(
  'some_url_in_project',
   fetcher,
);
console.log('useSWRMutation >>>>>>>>>><<<<<<<<<<<', JSON.stringify(yyy));
return ( 
     <View><Text>Home HOME_SCREEN  </Text></View>
   );
};

const styles = StyleSheet.create({
container: {
width: '100%',
height: '100%',
padding: 10,
backgroundColor: 'white',
},
rotatorView: {
width: '100%',
height: '50%',
},
});

export default Home;

Or share your code snippet or a CodeSandbox link is also appreciated!

Additional Context

SWR version. Add any other context about the problem here. "swr": "^2.2.4"

[dim0627]

Same here I've fixed this issue with downgrade Next.js 13.5.6 -> 13.4.6

[4mit]

Same here I've fixed this issue with downgrade Next.js 13.5.6 -> 13.4.6

in my case I'm trying to integrate it with react-native

[mbohgard]

SWR uses dependency collection to re-render components that actually uses a particular state like data, error, isLoading etc. You're not using anything that has changed in the component so it won't re-render.

[4mit]

I'm calling API so once the response is received it should re-render with latest data , isn't it?

[mbohgard]

No, that's not really true. Study this doc: https://swr.vercel.app/docs/advanced/performance.en-US#dependency-collection

[4mit]

No, that's not really true. Study this doc: https://swr.vercel.app/docs/advanced/performance.en-US#dependency-collection

But what is noticeable here is the endpoint that im using returns data using fetch but swr never returns that data to the component xxx and yyy should have data if API is working , in my case its not true , api working but i never see data returned from swr

[KingAmo]

same here when use swr in react native, any help please?

[blathers16]

@4mit SWR returns data asynchronously when you call console.out, SWR has not yet returned a value from the API call, so the value is undefined. Generally, you might assign the returned value to a state variable if you want to do something when it returns.