Is it memory intensive to store react components in an object?-CodePudding

{
    ui: <Component />,
}

What if an object stores hundreds of these components. Would this be memory intensive?

CodePudding user response：

It would be no more memory intensive than displaying them in the UI. Behind the scenes, React stores the components as objects, so there is no performance cost.

CodePudding user response：

The code <Component /> transpiles to React.createElement(Component, null);, which will return an object that looks roughly like this (dev builds may include extra properties to help with debugging):

{
  $$typeof: Symbol(react.element)
  key: null,
  props: {}
  ref: null,
  type: Component,
  _owner: null,
}

Of those, the props and the type are the only things that could conceivably have a significant memory footprint. But Component is very likely referenced somewhere else anyway, so i doubt it can be garbage collected whether you create this element or not.

In short, i'd say the memory is only a problem if both of the following are true: 1) the props are very large, and 2) the props would be garbage collected if not for this element.