https://github.com/tuchk4/onblurexample
https://github.com/tuchk4/onblurexample
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/tuchk4/onblurexample
- Owner: tuchk4
- Created: 2017-02-20T12:41:40.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-24T10:02:56.000Z (almost 9 years ago)
- Last Synced: 2025-02-06T07:46:46.951Z (over 1 year ago)
- Language: JavaScript
- Size: 476 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Repository was created as the example for SO question.
* Live: https://tuchk4.github.io/onBlurExample
* StackOverflow: http://stackoverflow.com/questions/42345043/react-render-performance-with-both-onblur-and-onfocus
> In this example - "render" is a time between parent component constructor and componentDidMount.
(Parent component - I mean buttons list wrapper)
Open console at devtools. Steps:
Render 1000 buttons with onFocus:
* Reload
* Click "FOCUS"
render ~0.02 (OK)
---
Render 1000 buttons with onBlur:
* Reload
* Click "BLUR"
render ~0.02 (OK)
---
Render 1000 buttons with both onFocus and onBlur:
* Reload
* Click "BOTH"
**render ~0.3** (Strange)
---
Re-Render 1000 buttons with both onFocus and onBlur:
* Reload
* Click "BOTH"
* **(~0.3 sec)** (Strange)
* Click "Clear"
* Click "BOTH"
* (~0.015 sec) (OK)
---
Question:
Why initial render time for component with both onBlur and onFocus is much bigger than others?