Run results for: React variable vs function for render

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36

Browser: Chrome 117

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Render with Fn	362860.8 Ops/sec
Render with Var	349384.0 Ops/sec

HTML Preparation code:

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>

<div id="root"></div>

<script type="text/jsx">  
class AppComp extends React.Component {
  constructor() {
    super();
    this.state = {
      count : 0,
      type : 'fn'
    }
  }
  render() {
    return (
      <div>
        {this.state.type === 'fn' ?
          <DisplayAsFn  value={this.state.count} />
        :
          <DisplayAsVar value={this.state.count} />
        }
      </div>
    );
  }
}
function DisplayAsFn({value}) {
  const renderValue = () => {
    return <span>{value}</span>
  };
  return <div>Fn : {renderValue()}</div>
}
function DisplayAsVar({value}) {
  const renderValue = <span>{value}</span>
  return <div>Var : {renderValue}</div>
}
var appComp = ReactDOM.render(
  <AppComp />,
  document.querySelector('#root')
);
function add1() {
  appComp.setState({count: appComp.state.count + 1});
}
function setType(type) {
  appComp.setState({type});
}
</script>

Tests:

Render with Fn
appComp.setState({ count: appComp.state.count + 1, type : 'fn' });
Render with Var
appComp.setState({ count: appComp.state.count + 1, type : 'var' });

Run results for: React variable vs function for render

I have a question about the performance of generating anon-functions many times instead of simply defining variables to hold render rules.

Render with Fn

Render with Var