How to set state with data coming from SWR?

[lvanoverberghe]

I use the following code, but the variable coming from SWR is undefined.

` const { data, error } = useSWR('/api/xxx', fetcher);

const [selectedXXX, setSelectedXXX] = useState(data.XXX[1])

//Handle the error state

if (error) return

Failed to load

;

//Handle the loading state

if (!data) return

Loading...

;
`

[dev-afzalansari]

hey @Lucasvo1,

First of all there is no need have a state as same as data returned by useSWR hook that data is already stateful and your Component
will get updated with the latest data whenever data changes e.g. when SWR revalidates.

Here's what you can do instead

• You can use useSWR hook as local state by calling it inside a component.
• Or you can use it as global state by calling useSWR with same key in another Components or by making it reusable.

But if you want to set state with data coming from SWR

I guess you can do it in onSuccess callback.

function Component() {
    let [selectedXXX, setSelectedXXX] = useState({})  // you initial data
    let { data } = useSWR('/api/xxx', fetcher, {
        onSuccess: (data) => {
            setSelectedXXX(() => data)    // if request is finished successfully selectedXXX will get set to new data
        }
    })
}

[lvanoverberghe]

Thanks a lot, Afzal. Now, I got the data inside getStaticProps using a Promise. Is there any disadvantage of doing it that way instead of via SWR in the component itself?

[dev-afzalansari]

@Lucasvo1

No there is no problem in doing it that way but there will be no point of using swr. you will be just assigning same data to two variables which is unnecessary.