iAPI router: Support lazy loaded derived state

[luisherranz]

Description

Sometimes the derived state needs to be defined with a PHP closure.

wp_interactivity_state( 'myProductPlugin', array(
  'list'    => array( 1, 2, 3 ),
  'factor'  => 3,
  'doubleFactor'  => 6,
  'product' => function() {
    $state   = wp_interactivity_state();
    $context = wp_interactivity_get_context();
    return $context['item'] * $state['factor'];
  }
));

In these cases, the serialized value in the product property of the myProductPlugin namespace is not a specific value, as it depends on the context. To know the value of that property, the JavaScript store has to be loaded, which includes the same logic in a getter.

const { state } = store( 'myProductPlugin', {
    state: {
        get doubleFactor() {
          return state.factor * 2;
        },
        get product() {
            const { item } = getContext();
            return item * state.factor;
        },
        // ...

The problem comes when the store is not loaded before hydration because it's somehow lazy loaded. In that case, state.product in the myProductPlugin namespace will return undefined, and the directives subscribed to that value will replace the value generated on the server with the PHP function with undefined.

• Server-side rendering: <span data-wp-text="state.product">3</span> (3 generated by PHP function)
• Client value after hydration: <span data-wp-text="state.product"></span> (3 removed because the value is now undefined)

The Interactivity API should be aware of which values were generated on the server via a PHP function and avoid replacing the directive's value until a getter is available that can correctly recalculate it.

Step-by-step reproduction instructions

1. Add a block with a template and a data-wp-each directive that uses the list provided in the description's example: <template data-wp-each="state.list"><span data-wp-text="state.product"></span></template>
2. In the view.js file, add the store with the getter using a setTimeout of a couple of seconds.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[luisherranz]

We can try checking if a property exists in the object (and not that it exists and it is undefined because that's a valid value) and if it doesn't, don't update the directive.

If that doesn't work, we could use a new object in the wp-script-module-data-@wordpress/interactivity script that contains the derived state properties that have PHP functions:

<script type="application/json" id="wp-script-module-data-@wordpress/interactivity">
{
  "state": ...,
  "config": ...,
  "dynamicDerivedState": {
     "myPlugin": [ "state.someDerivedState" ]
  }
}
</script>

We could store a symbol in the signal.

[USERSATOSHI]

Hi @luisherranz, I tried to replicate this issue, and was able to reproduce it but while debugging I found out that the reason state.product was not showing any value was due to being an error object which it returned null. The error happened because getContext() failed as it couldn't find the scope.

using withScope fixed this issue and I was able to get product

Screenshots

Without withScope

Screen.Recording.2025-08-07.at.5.30.38.PM.mov

import { store, getContext } from "@wordpress/interactivity";

setTimeout(() => {
  const { state } = store("myProductPlugin", {
    state: {
      factor: 2,
      get doubleFactor() {
        return state.factor * 2;
      },

      get product() {
        const context = getContext();
        console.log({ context });
        const item = context?.item || 1;
        return item * state.factor;
      },
    },
  });

  console.log("Store initialized with state:", state);
  console.log("Double Factor:", state.doubleFactor);
  console.log(state.list);
}, 2000);

With withScope

Screen.Recording.2025-08-07.at.5.33.09.PM.mov

import { store, getContext, withScope } from "@wordpress/interactivity";

setTimeout(() => {
  const { state } = store("myProductPlugin", {
    state: {
      factor: 2,
      get doubleFactor() {
        return state.factor * 2;
      },

      get product() {
        return (
          withScope(() => {
            const context = getContext();
            console.log({ context });
            const item = context?.item || 1;
            return item * state.factor;
          }) ?? 1
        ); // fallback if not in scope
      },
    },
  });

  console.log("Store initialized with state:", state);
  console.log("Double Factor:", state.doubleFactor);
  console.log(state.list);
}, 2000);

Note: in both vids, doubleFactor failed due to lazy loading.
I tested #70974 patch, and with that patch I was able to get derived state on lazy loading.

Screen.Recording.2025-08-07.at.5.36.22.PM.mov

[DAreRodz]

Yeah, @USERSATOSHI, the PR you mention (#70974) would fix an issue also related to state getters, but it is not the problem we're discussing here. 🙂

The goal is to determine how to maintain server-side rendered values for directives that rely on state getters that have not been defined yet. This is how it works now: the initial values in the HTML are correct, thanks to server-side rendering, but as soon as they are hydrated, their values disappear. This happens because the value they get when they try to read the getter is undefined.

It is not until the getter is added with store() that the directives get the expected value.

---

Aside from that, the error that you see in the console appears when you try to access the context from a getter without scope, which is the case when you try to read it from the console. The error is expected. The Interactivity API already sets the correct scope when the directives are evaluated, before accessing the getters, so no problem here.

[USERSATOSHI]

The goal is to determine how to maintain server-side rendered values for directives that rely on state getters that have not been defined yet. This is how it works now: the initial values in the HTML are correct, thanks to server-side rendering, but as soon as they are hydrated, their values disappear. This happens because the value they get when they try to read the getter is undefined.

OH! throttling my network to 3g helped me visualize this, I now understand the issue clearly 😅. I didn't even notice 3, 6, 9 product not showing during testing and thought it was data not showing.

I will try to debug more and see what i can do with the suggestions made.