A good practice for renaming properties of a react hook? [closed]

Question

I use a react library ex. react-query. This library provides a hook useQuery ex.

const {data, isLoading} = useQuery(['users'], userService.getUsers);

My problem is that if I want to use two useQuery hooks, in order to avoid having duplicated named variables:

data, isLoading

I have to do something like this:

const users = useQuery(['users'], userService.getUsers);
const products = useQuery(['products'], userService.getProducts);

...
// then use
users.data, users.isLoading
// and
products.data, products.isLoading
...

In order to make this logic more consistent, I tried to make my own custom hooks and rename the properties provided by useQuery inside so I can access with spread syntax.

function useGetUsers(){
    const {data, isLoading} = useQuery(['users'], userService.getUsers);
    return {
        usersData: data,
        isUsersLoading: isLoading
    }
}

and same with products.

So now, I can write the previous example as:

const {usersData, isUsersLoading} = useGetUsers();
const {productsData, isProductsLoading} = useGetProducts();

Of course, in order to have all the keys, I iterated over all the keys provided by useQuery hook and customized my own custom keys with my own camel case rules, etc.

My question is, is this ok ? I mean, is this consider a good practice or just go with the users.isLoading logic ??

Ricarda

"My question is, is this ok ?" That question is off-topic for SO, because it calls for opinion. Instead, I'd suggest rephrasing the second half of the question so you isimply ask how you can avoid the problem. – Festinate

I think that creating a custom hook just for that is a bit of an overkill; why don't you just use const {data: usersData, isLoading: usersLoading} = useQuery(['users'], userService.getUsers); and const {data: productsData, isLoading: productsLoading} = useQuery(['products'], userService.getProducts); – Coady

@T.J.Crowder It was not intended for an opinion, rather asking for complexity issues that may arise with this pattern or just messing things up by dynamically constructing javascript keys – Ricarda

Answer 1

I find it surprising that the hook returns an object rather than an array like useState does, because this is why useState returns an array. (I'm not familiar with that hook; perhaps it returns a lot of things, in which case using named properties does make sense.)

You can use renaming in the destructuring:

const {data: users, isLoading: usersLoading} = useQuery(['users'], userService.getUsers);
const {data: products, isLoading: productsLoading} = useQuery(['products'], userService.getProducts);

Then use users and usersLoading for the users stuff, and products/productsLoading for the products stuff.

---

If you're going to write your own hook, I think I'd rather write a general one that returns an array:

function useStuff(what, how) {
    const {data, isLoading} = useQuery(what, how);
    return [data, isLoading];
}

Then:

const [users, usersLoading] = useStuff(['users'], userService.getUsers);
const [products, productsLoading] = useStuff(['products'], userService.getProducts);

Festinate

Two questions, why did you say that that's why useState uses an array ? and second question, what about the case I want to rename all the properties in a consistent way by a custom naming rule ? (is my solution valid ? ) – Ricarda

Ok, you just answered my first question about using array, but what about including all the properties of useQuery ? – Ricarda

@Ricarda - Again, "is my solution valid" is asking for opinion. It works, so whether you like it or not is up to you. :-) On useState, I'll grant you I'm making an assumption that the naming of variables is why it returns an array, but I think it's a very safe assumption. – Festinate

@Ricarda - "...what about including all the properties of useQuery ?" You could always have your hook return the remaining properties in an object as a third member in the array. Or as you say, pass in a prefix and have it return an object using that prefix for its properties. There are lots of options. – Festinate

Answer 2

I create a custom hook where I destructure the items I need from the returned react query object, then return an array. Then you can rename them when used.

// Custom Hook
function useGetUsers(){
    const {data, isLoading} = useQuery(['users'], getUsers);
    return [data, isLoading]
}

function getUsers() {
    // fetch stuff
}

---

// Calling the hook

const [usersData, usersLoading] = useGetUsers()

Bluma