CODEWITHSUNDEEP
angularjsreactjs
user1088793
user1088793

Reputation: 653

What is causing react to be much slower when incrementing a simple counter than angular in this test case?

Reference:https://codeburst.io/angular-vs-react-which-is-better-for-web-development-e0dd1fefab5b

The two identical example apps made with both frameworks/libraries, extracts below. When I click on the increment in react there is a very noticeable half second delay, whereas there is virtually no delay with the angular version. I amusing an iPhone 5. I was surprised as I thought react is supposed to be faster?

Angular:

<md-input-container>
  <input mdInput placeholder='Edit your name'      [(ngModel)]='appService.username' />
</md-input-container>
<span>{{homeService.counterMessage |     async}}</span>
<button     (click)='homeService.increment()'>Click!</button>

React

<Input
  type='text'
  label='Edit your name'
  name='username'
  value={appStore.username}
  onChange={appStore.onUsernameChange}
 />
 <span>{homeStore.counterMessage}</span>
 <button onClick={homeStore.increment}>Click!

Upvotes: 2

Views: 96

Answers (1)

kingdaro
kingdaro

Reputation: 12018

The issue here actually has nothing to do with either of the app's framework choices. If you try both examples on a desktop, you'll find that they work just fine. The difference is how the apps respond to mobile devices.

The angular app includes this meta tag in the head: <meta name="viewport" content="width=device-width, initial-scale=1">. This makes it so that the webpage sizes correctly on mobile devices, and removes the tap delay.

The react app lacks this completely, meaning the default scaling will be applied, and the click delay remains.

For more details on why this click delay exists, and why the <meta> tag changes this, see this article.

Upvotes: 2

Related Questions