Why object instead of array as return value?

The return value of the React state hook is an array, used as:

const [state, setState] = React.useState(false);

This way you could use any name for the state and the setter.

In useSWR is an object:

const { data, error } = useSWR(URL, fetch)

Is there a special reason why it’s not an array to? Even one of the examples in the website needs to rename data.

const { data: user } = useSWR('/api/user')
const { data: projects } = useSWR(
  () => '/api/projects?uid=' + user.id
);

This could have be

const [ user ] = useSWR('/api/user')
const [ projects ] = useSWR(
  () => '/api/projects?uid=' + user.id
);

And if you need other values:

const [data, error, isValidating, revalidate] = useSWR(URL, fetch)

I understand this could be a annoying if you want to use revalidate without isValidating or error but I think is more common to need multiple data with different names than reading those other values in isolation.

[pacocoursey]

This is really a matter of preference. Neither of the worst case of both approaches:

const [data, , , revalidate] = useSWR()

const { data: newName, revalidate } = useSWR()

feel particularly difficult to use.

An array approach feels more like a “hook”. But as we develop the API and potentially add more information to the response object, the array approach may become unmanageable.

I personally don’t find it easy to have to remember how many commas to type, or which position in the array a variable is in.

[jamesb3ll]

I understand this could be a annoying if you want to use revalidate without isValidating or error but I think is more common to need multiple data with different names than reading those other values in isolation.

Exactly, const [users, _, _unnecessary, _variables, revalidate] = useSWR('/users') isn’t a good API.

I think this would be a better solution:

const [users, { error, isValidating, revalidate }] = useSWR('/users', fetch)

As you can deconstruct error, isValidating and revalidate as needed.

Although I think the current API isn’t bad at all,const { data: users } = useSWR('/users') is very readable…