Good Pattern For Caching Values in Single Cycle

[browner12]

I'm running into a performance issue right now where a relatively expensive function is getting called multiple times in a single reactivity cycle. As an example, lets say I have:

let example = () => ({

    users: [
        {
            name: 'John Doe',
            admin: true,
        },
        {
            name: 'Jane Doe',
            admin: false,
        },
        {
            name: 'Another User',
            admin: true,
        },
    ],

    adminUsers() {
        console.log('running admin users');
        return this.users.filter(item => item.admin);
    },
});

and then for whatever reason it is used multiple times in my HTML (or even the JS for that matter)

<div x-data="example()">

    <div x-text="adminUsers().length"></div>

    <template x-for="adminUser in adminUsers()">
        <div x-text="adminUser.name"></div>
    </template>

</div>

this will result in the console log running twice, which is not ideal for expensive operations. and it's easy to have it called even more times on a page.

I know frameworks like Vue cache their computed properties, but Alpine does not have that functionality. Is the correct answer to implement caching myself? This is what I've done so far, and it works okay, but you lose some of that "automatic reactivity".

Also, because my cache variable is in the Alpine data it is also reactive, so even though I'm able to reduce a lot of the repeated calls, I still get 1 unnecessary one in some scenarios.

I'm curious if there's a common pattern people use for this (what I'm assuming is a) common problem?

[ekwoka]

You can just have the init register an effect that computes it, using $watch, or just Alpine.effect.

Or an x-effect in the dom if you'd prefer.

It will eagerly compute it, but that's mostly fine.

Mostly, I don't bother with trying to do this unless it's clearly showing issues. since the updates that would require it to recompute anyway are rarer.