Delay when using declarative widthCallback

I am seeing a delay when using the widthCallback. My code is simple enough:

<mesh
  ref={mesh}
  rotation={[0, Math.PI, 0]}
>
  <meshLine
    attach="geometry"
    points={points}
    widthCallback={pointWidth => pointWidth * 5 * Math.random()}
  />
  <meshLineMaterial
    attach="material"
    lineWidth={width}
    color={color}
  />
</mesh>

I see this:

and then after waiting a long time (1-3 minutes), I get the desired:

Any guess? The function component doesn’t appear to be stale - it’s on a timer and rendering twice a second

[ryanking1809]

I should be able to find the time to test it later in the weekend but if you have the time basically this.widthCallback needs to be replaced with a getter for declarative architectures so we can do a redraw. I imagine if you added the following to Object.defineProperties on line 32 it should work.

      widthFunction: {
        enumerable: true,
        get: function() {
          return this.widthCallback;
        },
        set: function(value) {
          this.widthCallback= value;
          // this should redraw the line with the new width function
          // it might be necessary to check if points exist before running this
          // as it can be executed before points are defined
          this.process();
        },
      },

Then we use the new getter

<meshLine
    attach="geometry"
    points={points}
    widthFunction={pointWidth => pointWidth * 5 * Math.random()}
  />

You could alternatively keep the widthCallback name and rename all the existing reference to _widthCallback

[ryanking1809]

Hmm looks like it doesn’t redraw with widthCallback. If you set the widthCallback before you set the points it should work. I imagine the delay is a result of waiting for the component to rerender in which setPoints is called again. Should be able to do a PR to fix.

<meshLine
    attach="geometry"
    widthCallback={pointWidth => pointWidth * 5 * Math.random()}
    points={points}
  />