When to composable?

[JZubero]

Lately, one Vue discussion keeps going around among the devs in our coworking space. In short: "When to composable?". We keep arguing about the question when to create a composable as opposed to a "simple" helper/util function that is not using any Vue building blocks at all. Quick real world example:

// pseudo code
import { createIndex } from 'es-client';

function useElastic(indexName: string) {
  const es = createIndex(indexName);
  const docs = () => es.searchAll();
  const doc = (id: string) => es.searchById(id);

  return {
    docs,
    doc
  }
}

Would it be fair to call this a composable? Or is this really more a helper function, better placed in a lib-folder (e.g. to be used in a monorepo).

[EmmanuelQ]

For me this is a helper function and not a composable. Reason being that a composable should be stateful meaning that the above function would be reactive in some form so docs and doc in this instance would need to update implicitly based on the id changing for example. The only way to change the values of docs and doc here is to call useElastic() again and grab the new doc and docs function making it non stateful thus a helper function

[JZubero]

Fair point. So in your opinion statefulness is key to decide if it's a composable? What if it did use Vue/Composition API features like the isolated life cycle hooks (onMounted(), ...) Would you still not consider it a composable?

[EmmanuelQ]

So it depends on the scenario for example Custom directives can also be used for reusing lifecyle hooks. But yes I'd say lifecycle hooks would also come under composables as their hooking into the state of the component and reacting based off of it. Your function above could be used in any JS/TS file regardless of framework etc.

I think this doc encapulates it fairly well -> https://vuejs.org/guide/reusability/composables.html#mouse-tracker-example

[JZubero]

Yes, I am aware of the mouse tracker example but since it exposes two refs it very clearly qualifies as a composable, I would say. So the question is if it's fair to call a function a composable if it leverages any Vue features. What would you say?

[EmmanuelQ]

Yeah, i can't think of a scenario where that isn't the case so I'd say yes for the most part.

[JZubero]

Let's see if somebody else agrees with this definition draft. Since it's kind of a Vue philosophy thing, it would be great to have a statement from the "authorities". I was hoping for @LinusBorg to share his opinion on this? 😇

[decademoon]

Your example doesn't really tie into Vue in any way; it has no reactive state, doesn't register with any lifecycle hook, doesn't provide/inject anything, etc. docs and doc just look like helper utility functions.

[JZubero]

Yes, that's the point. Although it matches the conventions of a composable it does not leverage any Vue logic. Would you agree with the preliminary conclusion @EmmanuelQ and I proclaimed (see above), that such a function should only be considered a composable if it uses any Vue features?

[decademoon]

The thing is, when people see functions like useXYZ then they assume it's a Vue-specific thing and should be used only in a Vue component. Of course you can document the function to say whether this is the case or not, but it might be a bit confusing.

Even if it doesn't have any Vue logic, because you've named it useXYZ then I would assume it's a Vue composable.

[JZubero]

Maybe applying the useXYZ naming convention should be used for composables only within a Vue project. Helper functions (like my example above) could follow another convention like xyzHelper and reside in another directory on the root level (e.g. lib).

.
├── composables
│   └── useFirebase.ts
├── index.ts
└── lib
    └── elasticHelper.ts

[Gumball12]

Did you find any answers? or any updates?

[JZubero]

Not really. It seems, there is no widely adopted consensus about this. Most devs I have talked to have different takes on this. What do you think?

[Gumball12]

I have a similar view as others commented. My team has agreed to call the useElastic example you mentioned a "helper function" because it's not using any Vue features.

We confused the two at first as well, but then looked at the Vue doc and concluded:

In the context of Vue applications, a "composable" is a function that leverages Vue's Composition API to encapsulate and reuse stateful logic.

I was just interested to see if anyone had a different opinion.

[JZubero]

Fair point, yes. Our current strategy is to always start out with a helper function and only use Vue features when really beneficial. As a consequence, we are building a vanilla-first lib with the option to go full-Vue if useful. This way some of our helper functions evolutionize to composables.

[Gumball12]

I think that's a good approach.