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?