why are stateless component eating memory

Question

Just a quick question to anybody fond of react

I've made a jsbin example and I'm trying to observe if react is doing any memory optimizations for stateless components

If you heapdump that window you should be able to see BsDiv instance. Does it mean that all components I use will be held in run-time?

(I am not holding any reference to that object myself)

I am worried about this because react components are composed from other ones and so on - which means there could easily be like 5 instances for any Panel, Alert and whatever I will be willing to use.

Is it expected to behave this way?

Answer 1

First: note that React has a special syntax for stateless functional components. Your sample code is not using that syntax and so React does not know your components are stateless.

This is not a stateless functional component:

class BsDiv extends React.Component{
  render(){
    return (<div className={this.props.cls}>{this.props.children}</div>)
  }
}

These are stateless functional components:

// component is just a function
const BsDiv = props => <div className={props.cls}>{props.children}</div>

// Using object destructuring syntax
const BsDiv = ({cls, children}) => <div className={cls}>{children}</div>;

Second: React does not yet apply any significant optimizations for Stateless functional components.

From their blog (emphasis mine):

This pattern is designed to encourage the creation of these simple components that should comprise large portions of your apps. In the future, we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations.

So, by writing stateless functional components, you are opting in to future optimizations React makes for this "simpler" components.

Here is some more information on possible future optimizations:

https://github.com/facebook/react/issues/5677#issuecomment-165125151

How will React 0.14's Stateless Components offer performance improvements without shouldComponentUpdate?

Answer 2

Good news and bad news.

First the bad news. What you're observing is correct and expected. React components are just JavaScript objects, so each instance will allocate separately. Furthermore the leaves of React components typically result in many virtual DOM components for every rendered component, which are all in memory as well.

However the good news is very good. In React we typically only render what's visible on the page. So in practice memory allocation is rarely an issue. For example in JQuery style frameworks it's common to render all tabs of a web app whether they are visible or not. The tab switching then just sets a "visible" class on the selected tab. In contrast in React the content of unselected tabs is typically not rendered unless the tab is selected.