What is the expected behavior of measure inside useDerivedValue?

[naftalibeder]

The documentation shows a basic measure example that looks like

const Comp = () => {
  const aref = useAnimatedRef();

  useDerivedValue(() => {
    const measured = measure(aref);
    ...
  });

  return <View ref={aref} />;
};

Looking at this, you might think that any time the view dimensions changed, the function inside useDerivedValue would be invoked, and the measurement would be recomputed. However, with no additional dependencies, the measurement is only computed once on component mount.

There are ways to force a re-measurement when the component size changes, but as far as I can tell, they all rely on onLayout, which means there's no way to avoid the JS thread.

Is there a pattern for "subscribing" to layout updates exclusively on the UI thread?

Edit: Here is a basic example file to play around with.

Edit: @tomekzaw I was wondering if you could let me know whether this would be considered a bug or a feature request. I'm not sure what the expected behavior is, so it's hard to know in which direction I should escalate this.

[vishal-pixsoffice]

Still un-answered, Great 🥲

[MatiPl01]

Hey! This discussion is quite old so I didn't see that it hasn't been answered yet. I will describe how it works.

How useDerivedValue works

In general, useDerivedValue callback is executed only if values, used within the callback, change. So, the callback is triggered if you use other Shared Values within it and modify at least one of them or if you use plain values and they change (like in the useEffect hook, but you don't have to specify the dependencies array as the hook is "smart" thanks to the reanimated babel plugin and automatically adds dependencies for you).

In short, useDerivedValue is triggered only if dependent values (either Shared Values or plain values) change.

Answering questions

Looking at this, you might think that any time the view dimensions changed, the function inside useDerivedValue would be invoked, and the measurement would be recomputed.

This wouldn't happen because of how useDerivedValue works (described above). The aref doesn't change - it is still the same value in the JS side so the useDerivedValue is not recomputed. It is just a reference to the view, but JS doesn't know through this reference if the dimensions of the view change.

There are ways to force a re-measurement when the component size changes, but as far as I can tell, they all rely on onLayout, which means there's no way to avoid the JS thread.

We don't provide UI-based onLayout measurement callback, so in most cases you should use the onLayout prop on the view that runs on the JS thread.

There is na old draft which introduces the useLayoutWorklet hook, which runs the layout callback on the UI thread. However, the PR is not ready and is stuck in its current state. I may raise the topic during our meeting tomorrow and maybe we will add a proper solution for the UI-based layout callback.