Prevent re-renders/parse if html didn't change?

[cristianoccazinsp]

Is this a bug report or a feature request?

Question

Have you read the guidelines regarding bug report?

Yes

Have you read the documentation in its entirety?

Yes

Have you made sure that your issue hasn't already been reported/solved?

Yes

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

Both

Is the bug reproductible in a production environment (not a debug one)?

Yes

Have you been able to reproduce the bug in the provided example?

Yes

Environment

Any

Hello,

I'm having the following issue. Each time the parent renders, all my custom renderers are called again, creating new objects every time. What's the recommended way to prevent this?

For example.

let compKey = 0;
const renderers = {
  div: (htmlAttribs, children, convertedCSSStyles, passProps) => {
    return <View key={`div-${compKey++}`} style={htmlStyles.divStyle}>{children}</View>
  },
}

Each time the parent component renders, the above will be called and a whole new component built. This quickly becomes an issue and the counter value goes to the roof. I would expect that if the html didn't change, these won't be called/re-rendered.

[renrizzolo]

Also facing this - calling setState in alterNode is causing an infinite render loop.

[cristianoccazinsp]

Right now, "solved" it (not entirely) by wraping the component inside a pure component and being very careful about what props I pass to it. But I still think this should be improved.

[cristianoccazinsp]

Hmm, looks like a re-render is still needed if orientation changes, otherwise all text becomes messed up when used inside a scroll view. However, I would expect just a re-render and not a whole child component rebuild.
I'm trying to have a modal open on press on some of the components, but if the HTML component re-renders, it will close the modal since it will rebuild all its children with new keys.

[jsamr]

This feature has been implemented in the foundry pre-release (#434). You can now use triggerTREInvalidationPropNames prop that is an array of prop names which should trigger re-renders.

As of version 6.0.0-alpha.21, this will apply only to Transient Render Engine props (all styles props, renderers, TRE options ...), since only these are frozen by default. Those passed directly to the React renderer are reactive by default. This might change as the API for v6 is not stable yet.

[jsamr]

Closing now since the stable beta which fixes this issue has just been released.