Best practices for dynamic style props / objects

[rejhgadellaabsl]

Disclaimer: still fairly new to preact and I'm prrretty sure this is a question that has been asked a million times before, but I'm having some trouble finding a good answer so... here goes ;)

From what I understand, it's bad practice to re-create the value ¹ for a prop in the render function because the reference changes, and the diff algorithm will see that as a reason to re-render everything.

For example, I want to dynamically set a style based on a property:

function Child( props ) {
  const { maxWidth, ...rest } = props;
  return <div style={{ maxWidth }} {...rest} />
}

function Parent( props ) {
  return <Child maxWidth="100%" />
}

Is passing a new object to a prop actually a problem?

The Child component will only re-render if something changed, and that causes a re-render of all of its child components anyway?

On the other hand, I'm basically setting an attribute here, so my guess is that preact will apply the 'new' value to the DOM on every render because it just sees a new object (even if nothing actually changed)?

Any chances that the browser is really smart about this and the perf impact is minor?

Any best practices to optimize for this use-case?

In functional components, the fix is fairly easy:

const styles = useMemo( () => ({
  maxWidth
}), [ ...dependencies ] );

Is this the right solution?

And what if I have a class component?

¹ I know I'm fine as long as I use primitives ;)