General performance/hardware acceleration questions

[tdip09]

Been using framer-motion for a few months now and I've been loving it! Just had a couple of questions to make sure I'm getting the best performance possible.

First, all of the code examples define inline object literals ie <motion.div style={{ opacity: mv }} />. I typically avoid passing down inline object literals as props since a new object will be created on every render, which could lead to extra re-renders of downstream components, so my code often looks like:

const mv = useMotionValue(0);
const style = useMemo(() => ({ opacity: mv }), [mv]);

return <motion.div style={style} />;

Is using useMemo overkill? Or is it fine to pass inline object literals to initial, animate, exit, style, etc...? Or does the answer more so depend on the children of motion.div?

Second, I was just looking for some clarification on "accelerated by the GPU" vs hardware acceleration. The Transform section says that transform properties are accelerated by the GPU. However, the hardware acceleration section says that only opacity is currently eligible for hardware acceleration. Is there a difference between "accelerated by the GPU" and hardware acceleration? ie Is "accelerated by the GPU" better than nothing but not as good as full blown hardware acceleration? Or are they both referring to the exact same thing?

Third, I noticed that the hardware acceleration unsupported featured section mentions that hardware acceleration will not be used if the value is passed in as a motion value via the style prop. Is that basically referring to my example above? Does that mean that rendering <motion.div style={{ opacity: mv }} /> and manually changing the motion value would not use hardware acceleration?

Thanks!