0

In SWR, once I receive a fetch result, I want to pass it to a child component as a prop. Hook defined as:

const fetcher = url => axios.get(url).then(res => res.data);

export default function useTeleworkInfoSWR() {

    const { data, error } = useSWR('/teleworkInfo', fetcher);

    return {
        teleworkInfo: data,
        teleworkInfoIsLoading: !error && !data,
        teleworkInfoError: error
    }

}

Used in the Home component as follows:

const {teleworkInfo, teleworkInfoIsLoading, teleworkInfoError} = useTeleworkInfoSWR();

...
return (<>
     ...
     <SomeComponent abc={teleworkInfo} />    
</>);

This is creating an infinite loop of some kind, and SWR is always busy. Do I need to call SWR separately in that child component rather than pass it as a prop?

gene b.
  • 10,512
  • 21
  • 115
  • 227

0 Answers0