Possible reasons for performance difference between React JS and React Native?

Question

I am writing my bachelors thesis where i compare Progressive web apps and native applications using React JS and React native, respetively. One functionality I am measuring the time for is a word searcher, that takes in a string text and counts the number of occurances of a given word in it. I believed that the native application would be the quicker one in this instance since it is a computational task, and I am running both applications on my mobile device. However, when running and timing the tests, the PWA is coming out quicker by a lot, and I cannot find any research that would explain it.

What is the reason for the PWA being faster in this instance when the functionality being measure should be seen as computational and thus the native application should be able to make better use of the hardware?

The code is identical for both applications:

import React, { Component } from 'react';
import TextSearchView from '../view/TextSearchView';

class TextSearchPresenter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchTerm: 'the',
      result: null,
      text: 'The quick brown fox jumps over the lazy dog',
      loading: false,
      error: null,
      filterTime: 0,
    };
  }

  handleSearchTermChange = (event) => {
    const searchTerm = event.target.value;
    this.setState({ searchTerm });
  };
  

  handleTextChange = event => {
    const text = event.target.value;
    this.setState({ text });
  };

  handleSearch = async () => {
    this.setState({ loading: true });
    const filterStart = performance.now();
    const { searchTerm, text } = this.state;
    const regex = new RegExp(`\\b${searchTerm}\\b`, 'gi');
    const count = (text.match(regex) || []).length;
    const filterEnd = performance.now();
    const filterTime = filterEnd - filterStart;
    this.setState({ result: count, loading: false, filterTime });
  };

  handleError = (error) => {
    this.setState({ error, loading: false });
  };

  render() {
    const { searchTerm,text, result, loading, error, filterTime } = this.state;
    return (
      <TextSearchView
        searchTerm={searchTerm}
        text={text}
        result={result}
        loading={loading}
        onSearchTermChange={this.handleSearchTermChange}
        onTextChange={this.handleTextChange}
        onSearch={this.handleSearch}
        onError={this.handleError}
        filterTime={filterTime}
      />
    );
  }
  
}

export default TextSearchPresenter;

Answer 1

PWA uses a JS engine when you open your site https://en.wikipedia.org/wiki/JavaScript_engine

React Native in the latest versions uses Hermes https://hermesengine.dev/

I guess in this case we can have different performances. For example, Hermes does not have a full realization like the JS engine in browsers (Date https://github.com/facebook/hermes/issues/136). Also, some functionality can be different.