Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Mobile performance worsens after multiple conditional renders #47

Closed
AndreasNasman opened this issue Mar 20, 2019 · 7 comments
Closed

Mobile performance worsens after multiple conditional renders #47

AndreasNasman opened this issue Mar 20, 2019 · 7 comments
Labels
bug released

Comments

@AndreasNasman
Copy link

In my score tracking application where I've implemented the confetti rain I have it conditionally shown or hidden whether there is a winner or not. The winner can conditionally change on undo/redo or when a new game is started/completed.

image

What I've noticed is that the performance of the confetti worsens quite significantly after each re-render. From what I've tried, it's not really noticeable on desktop, but on a mobile browser you can definitively see the drop in performance. I tested this on my phone's Chrome and Firefox browser and it occurs in both.

Could there maybe be a memory leak somewhere? Something that isn't cleaned up in componentDidUnmount?

I bypassed this temporarily by conditionally hiding the component with display: none;, which works, but then you loose the confetti 'drop-in' animation, which is really pleasing if you ask me 😉.
image
@alampros
Copy link
Owner

alampros commented Apr 2, 2019

Yup - looks like there's a memory leak. Let me see if I can replicate it locally.

alampros pushed a commit that referenced this issue Apr 2, 2019
@semantic-release-bot
chore(release): 2.7.2 [skip ci]
5f1d907 
## [2.7.2](v2.7.1...v2.7.2) (2019-04-02)

### Bug Fixes

* Destroy confetti instance on unmount ([6965e37](6965e37)), closes [#47](#47)
@alampros
Copy link
Owner

alampros commented Apr 2, 2019

🎉 This issue has been resolved in version 2.7.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

@AndreasNasman
Copy link
Author

Problem still occurs in 2.7.2. Tested with Chrome's mobile browser.

@alampros
Copy link
Owner

alampros commented Apr 3, 2019

😫

I have another idea that might be of help - I’ll try adding a destroy method to stop the requestAnimationFrame loop before unmount.

@alampros alampros reopened this Apr 3, 2019
alampros pushed a commit that referenced this issue Apr 3, 2019
@semantic-release-bot
chore(release): 2.7.3 [skip ci]
4297309 
## [2.7.3](v2.7.2...v2.7.3) (2019-04-03)

### Bug Fixes

* **Performance:** stop raf loop before unmounting ([fc2b48f](fc2b48f)), closes [#47](#47)
@alampros
Copy link
Owner

alampros commented Apr 3, 2019

🎉 This issue has been resolved in version 2.7.3 🎉

The release is available on:

Your semantic-release bot 📦🚀

@alampros
Copy link
Owner

alampros commented Apr 4, 2019

@AndreasNasman - let me know if this actually fixed it.

@alampros alampros reopened this Apr 4, 2019
@alampros alampros added the bug label Apr 4, 2019
@alampros
Copy link
Owner

Closing this for now. Let me know if this is still an issue in >2.7.3.

alampros added a commit that referenced this issue May 20, 2022
@alampros
Downward squash from master
484bad0 
commit 510e1fd
Author: semantic-release-bot <semantic-release-bot@martynus.net>
Date:   Fri May 20 14:49:12 2022 +0000

    chore(release): 6.1.0 [skip ci]

    # [6.1.0](v6.0.1...v6.1.0) (2022-05-20)

    ### Bug Fixes

    * **ci:** add gh and npm tokens ([ecc2d87](ecc2d87))
    * **ci:** explicitly add npm token ([fb14930](fb14930))
    * Allow react 18 in peer dependency ([6598781](6598781))

    ### Features

    * **ci:** travis => gh actions ([7af7f03](7af7f03))

commit fb14930
Author: Aaron Lampros <alampros@e2g.com>
Date:   Fri May 20 10:47:58 2022 -0400

    fix(ci): explicitly add npm token

commit ecc2d87
Author: Aaron Lampros <alampros@e2g.com>
Date:   Fri May 20 10:45:28 2022 -0400

    fix(ci): add gh and npm tokens

commit bb37abd
Merge: fc3e0ff 7af7f03
Author: Aaron Lampros <alampros@e2g.com>
Date:   Fri May 20 10:39:06 2022 -0400

    Merge branch 'develop'

    # Conflicts:
    #	yarn.lock

commit fc3e0ff
Author: semantic-release-bot <semantic-release-bot@martynus.net>
Date:   Mon Feb 22 19:11:04 2021 +0000

    chore(release): 6.0.1 [skip ci]

    ## [6.0.1](v6.0.0...v6.0.1) (2021-02-22)

    ### Bug Fixes

    * Allow react 17 in peer dependency ([266a3dd](266a3dd))

commit 78dc4c4
Merge: cadf67d 266a3dd
Author: Aaron Lampros <alampros@e2g.com>
Date:   Mon Feb 22 12:56:15 2021 -0500

    Merge branch 'develop'

commit cadf67d
Author: semantic-release-bot <semantic-release-bot@martynus.net>
Date:   Fri Jul 17 15:41:16 2020 +0000

    chore(release): 6.0.0 [skip ci]

    # [6.0.0](v5.1.0...v6.0.0) (2020-07-17)

    ### chore

    * **deps:** upgrade deps ([25d75da](25d75da))

    ### BREAKING CHANGES

    * **deps:** Requires node >= 10.18

commit b54e7c9
Merge: 8bb948d 6222add
Author: Aaron Lampros <alampros@gmail.com>
Date:   Fri Jul 17 11:30:20 2020 -0400

    July release 1

    # Conflicts:
    #	package.json
    #	yarn.lock

commit 8bb948d
Author: semantic-release-bot <semantic-release-bot@martynus.net>
Date:   Wed Jun 17 01:10:20 2020 +0000

    chore(release): 5.1.0 [skip ci]

    # [5.1.0](v5.0.1...v5.1.0) (2020-06-17)

    ### Features

    * initial velocity range options\ ([929bc50](929bc50))

commit 399fe09
Author: Aaron Lampros <alampros@gmail.com>
Date:   Tue Jun 16 21:05:33 2020 -0400

    chore(deps): upgrade deps

commit 52ce76a
Merge: 1184141 5b8fe1e
Author: Aaron Lampros <alampros@gmail.com>
Date:   Tue Jun 16 21:00:46 2020 -0400

    Merge branch 'develop'

commit 1184141
Merge: e6f29f0 0e562e4
Author: Aaron Lampros <alampros@gmail.com>
Date:   Tue Jun 16 20:33:07 2020 -0400

    Merge pull request #79 from justingrant/fix-sourcemaps

    build: fix sourcemaps

commit 0e562e4
Author: Justin Grant <justin@justingrant.net>
Date:   Wed Jan 29 14:42:36 2020 -0800

    build: fix sourcemaps

commit e6f29f0
Author: semantic-release-bot <semantic-release-bot@martynus.net>
Date:   Fri Oct 18 20:44:15 2019 +0000

    chore(release): 5.0.1 [skip ci]

    ## [5.0.1](v5.0.0...v5.0.1) (2019-10-18)

    ### Bug Fixes

    * use componentDidUpdate instead ([1ad95f9](1ad95f9)), closes [#73](#73)
    * **types:** make canvasRef optional ([607068a](607068a)), closes [#72](#72)

commit 5392c2a
Merge: 15911b1 607068a
Author: Aaron Lampros <alampros@gmail.com>
Date:   Fri Oct 18 16:38:40 2019 -0400

    Merge branch 'develop'

commit 15911b1
Author: semantic-release-bot <semantic-release-bot@martynus.net>
Date:   Fri Oct 18 17:38:55 2019 +0000

    chore(release): 5.0.0 [skip ci]

    # [5.0.0](v4.0.1...v5.0.0) (2019-10-18)

    * Merge pull request #70 from wheeler/mw-r169 ([8e7ec50](8e7ec50)), closes [#70](#70)

    ### Bug Fixes

    * **deps:** upgrade deps ([902da73](902da73))

    ### BREAKING CHANGES

    * Requires at least React version 16.3 - that version adds the new lifecycle method used to replace the unsafe one.

commit 9e3c6f7
Merge: 5c266e0 bade928
Author: Aaron Lampros <alampros@gmail.com>
Date:   Fri Oct 18 13:34:51 2019 -0400

    Merge branch 'develop'

commit 5c266e0
Merge: 902da73 6e9f04f
Author: Aaron Lampros <alampros@gmail.com>
Date:   Fri Oct 18 13:31:50 2019 -0400

    Merge branch 'develop'

commit 902da73
Author: Aaron Lampros <alampros@gmail.com>
Date:   Fri Oct 18 13:29:53 2019 -0400

    fix(deps): upgrade deps

commit 353546f
Author: semantic-release-bot <semantic-release-bot@martynus.net>
Date:   Fri Aug 9 02:28:23 2019 +0000

    chore(release): 4.0.1 [skip ci]

    ## [4.0.1](v4.0.0...v4.0.1) (2019-08-09)

    ### Bug Fixes

    * **types:** remove NamedExoticComponent ([b6dec94](b6dec94)), closes [#65](#65)

commit c06b5bc
Merge: 0aefdef b6dec94
Author: Aaron Lampros <alampros@gmail.com>
Date:   Thu Aug 8 22:24:43 2019 -0400

    Merge pull request #66 from alampros/develop

    fix(types): remove NamedExoticComponent

commit 0aefdef
Author: semantic-release-bot <semantic-release-bot@martynus.net>
Date:   Tue Aug 6 12:28:08 2019 +0000

    chore(release): 4.0.0 [skip ci]

    # [4.0.0](v3.1.2...v4.0.0) (2019-08-06)

    ### Bug Fixes

    * disable pointer events again ([a28a426](a28a426)), closes [#63](#63)
    * Export the same class as the default export ([385f981](385f981))

    ### BREAKING CHANGES

    * changes module exports

commit d2b9adb
Merge: d03a173 df48e10
Author: Aaron Lampros <alampros@gmail.com>
Date:   Tue Aug 6 08:22:41 2019 -0400

    Merge pull request #64 from alampros/develop

    August release

commit d03a173
Author: semantic-release-bot <semantic-release-bot@martynus.net>
Date:   Thu Jul 11 02:33:13 2019 +0000

    chore(release): 3.1.2 [skip ci]

    ## [3.1.2](v3.1.1...v3.1.2) (2019-07-11)

    ### Bug Fixes

    * **deps:** upgrade deps ([41c7dd0](41c7dd0))

commit a058c6d
Merge: e324de2 41c7dd0
Author: Aaron Lampros <alampros@gmail.com>
Date:   Wed Jul 10 22:28:57 2019 -0400

    Merge pull request #59 from alampros/develop

    Update deps

commit e324de2
Author: semantic-release-bot <semantic-release-bot@martynus.net>
Date:   Fri Jul 5 13:38:16 2019 +0000

    chore(release): 3.1.1 [skip ci]

    ## [3.1.1](v3.1.0...v3.1.1) (2019-07-05)

    ### Bug Fixes

    * **deps:** upgrade deps ([34385dc](34385dc))

commit d9e8162
Merge: cfe6fdf 34385dc
Author: Aaron Lampros <alampros@gmail.com>
Date:   Fri Jul 5 09:34:39 2019 -0400

    Merge pull request #57 from alampros/develop

    Upgrade deps

commit cfe6fdf
Author: semantic-release-bot <semantic-release-bot@martynus.net>
Date:   Thu Apr 25 20:34:23 2019 +0000

    chore(release): 3.1.0 [skip ci]

    # [3.1.0](v3.0.0...v3.1.0) (2019-04-25)

    ### Features

    * add `initialVelocityX` and `initialVelocityY` props ([bfc2ff5](bfc2ff5))

commit ca8806e
Merge: 7aa8d41 bfc2ff5
Author: Aaron Lampros <alampros@gmail.com>
Date:   Thu Apr 25 16:27:39 2019 -0400

    Merge branch 'develop'

commit 7aa8d41
Author: semantic-release-bot <semantic-release-bot@martynus.net>
Date:   Thu Apr 25 20:03:15 2019 +0000

    chore(release): 3.0.0 [skip ci]

    # [3.0.0](v2.8.0...v3.0.0) (2019-04-25)

    ### Features

    * forward ref to inner canvas ([091b055](091b055))

    ### BREAKING CHANGES

    * wrap default export in forwardRef

commit 48d7c42
Merge: 408686f 65e1560
Author: Aaron Lampros <alampros@gmail.com>
Date:   Thu Apr 25 15:59:07 2019 -0400

    Merge pull request #55 from alampros/develop

    ForwardRef

commit 408686f
Merge: 65323b8 5a046b7
Author: Aaron Lampros <alampros@gmail.com>
Date:   Wed Apr 24 13:26:08 2019 -0400

    Merge branch 'develop'

commit 65323b8
Merge: bfa5819 3ff94f6
Author: Aaron Lampros <alampros@gmail.com>
Date:   Wed Apr 17 12:13:36 2019 -0400

    Merge branch 'develop'

commit bfa5819
Author: semantic-release-bot <semantic-release-bot@martynus.net>
Date:   Wed Apr 17 15:53:20 2019 +0000

    chore(release): 2.8.0 [skip ci]

    # [2.8.0](v2.7.3...v2.8.0) (2019-04-17)

    ### Features

    * Add onConfettiComplete param ([8af89f2](8af89f2))

commit 8449377
Merge: 4297309 c04f0f5
Author: Aaron Lampros <alampros@gmail.com>
Date:   Wed Apr 17 11:47:59 2019 -0400

    Merge pull request #54 from alampros/develop

    onConfettiComplete param

commit 4297309
Author: semantic-release-bot <semantic-release-bot@martynus.net>
Date:   Wed Apr 3 23:23:27 2019 +0000

    chore(release): 2.7.3 [skip ci]

    ## [2.7.3](v2.7.2...v2.7.3) (2019-04-03)

    ### Bug Fixes

    * **Performance:** stop raf loop before unmounting ([fc2b48f](fc2b48f)), closes [#47](#47)

commit 5cae4ea
Merge: fb0665a fc2b48f
Author: Aaron Lampros <alampros@gmail.com>
Date:   Wed Apr 3 19:18:51 2019 -0400

    Merge pull request #53 from alampros/develop

    Performance fix

commit fb0665a
Merge: 8cff300 aea30c1
Author: Aaron Lampros <alampros@gmail.com>
Date:   Wed Apr 3 17:34:15 2019 -0400

    Merge pull request #52 from alampros/develop

    Docs update

commit 8cff300
Merge: 5f1d907 937a382
Author: Aaron Lampros <alampros@gmail.com>
Date:   Wed Apr 3 09:54:46 2019 -0400

    Merge pull request #51 from alampros/develop

    Link to repo from storybook

commit 5f1d907
Author: semantic-release-bot <semantic-release-bot@martynus.net>
Date:   Tue Apr 2 20:24:31 2019 +0000

    chore(release): 2.7.2 [skip ci]

    ## [2.7.2](v2.7.1...v2.7.2) (2019-04-02)

    ### Bug Fixes

    * Destroy confetti instance on unmount ([6965e37](6965e37)), closes [#47](#47)

commit 1a1416f
Merge: 217580e 6965e37
Author: Aaron Lampros <alampros@gmail.com>
Date:   Tue Apr 2 16:20:02 2019 -0400

    Merge pull request #50 from alampros/develop

    Cleanup on mount and update deps

commit 217580e
Author: semantic-release-bot <semantic-release-bot@martynus.net>
Date:   Tue Apr 2 17:52:06 2019 +0000

    chore(release): 2.7.1 [skip ci]

    ## [2.7.1](v2.7.0...v2.7.1) (2019-04-02)

    ### Bug Fixes

    * trigger release to fix typescript typings ([817b7c0](817b7c0)), closes [#45](#45)

commit b9c465c
Merge: 7c5bf83 817b7c0
Author: Aaron Lampros <alampros@gmail.com>
Date:   Tue Apr 2 13:45:04 2019 -0400

    Merge pull request #49 from alampros/develop

    fix: trigger release to fix typescript typings

commit 7c5bf83
Merge: 0b661a0 f99bb57
Author: Aaron Lampros <alampros@gmail.com>
Date:   Tue Apr 2 13:28:06 2019 -0400

    Merge pull request #48 from alampros/develop

    Fix typescript types

commit 0b661a0
Merge: 79be663 1da1d39
Author: Aaron Lampros <alampros@gmail.com>
Date:   Mon Mar 18 19:23:07 2019 -0400

    Merge branch 'develop'

commit 79be663
Merge: 82919bc c786216
Author: Aaron Lampros <alampros@gmail.com>
Date:   Mon Mar 18 19:03:30 2019 -0400

    Merge branch 'develop'

commit 82919bc
Author: semantic-release-bot <semantic-release-bot@martynus.net>
Date:   Mon Mar 18 21:05:50 2019 +0000

    chore(release): 2.7.0 [skip ci]

    # [2.7.0](v2.6.1...v2.7.0) (2019-03-18)

    ### Bug Fixes

    * point to entire types dir ([3c3184c](3c3184c))

    ### Features

    * **build:** storybook ([462f682](462f682))

commit c2b2be5
Merge: b601825 07029e6
Author: Aaron Lampros <alampros@gmail.com>
Date:   Mon Mar 18 17:00:25 2019 -0400

    Merge pull request #43 from alampros/develop

    Webpack + storybook

commit b601825
Author: semantic-release-bot <semantic-release-bot@martynus.net>
Date:   Wed Mar 13 16:00:38 2019 +0000

    chore(release): 2.6.1 [skip ci]

    ## [2.6.1](v2.6.0...v2.6.1) (2019-03-13)

    ### Bug Fixes

    * add rotation direction to fix jump visible when rendering asymetrical shapes ([ca2b22b](ca2b22b))

commit 96c89e6
Merge: a181119 04db715
Author: Aaron Lampros <alampros@gmail.com>
Date:   Wed Mar 13 11:55:44 2019 -0400

    Merge pull request #40 from alampros/develop

    Rotation fixes

commit a181119
Author: semantic-release-bot <semantic-release-bot@martynus.net>
Date:   Sun Mar 10 23:20:43 2019 +0000

    chore(release): 2.6.0 [skip ci]

    # [2.6.0](v2.5.0...v2.6.0) (2019-03-10)

    ### Features

    * Add prop to draw custom confetti ([992376b](992376b))

commit 34256f0
Merge: a0a8f40 992376b
Author: Aaron Lampros <alampros@gmail.com>
Date:   Sun Mar 10 19:16:54 2019 -0400

    Merge pull request #35 from alampros/develop

    feat: Add prop to draw custom confetti

commit a0a8f40
Author: semantic-release-bot <semantic-release-bot@martynus.net>
Date:   Fri Mar 8 20:16:07 2019 +0000

    chore(release): 2.5.0 [skip ci]

    # [2.5.0](v2.4.1...v2.5.0) (2019-03-08)

    ### Features

    * **build:** output and add types to package ([1349e1d](1349e1d))
    * **ParticleGenerator:** Bulk particle addition ([3c9e108](3c9e108))
    * use easing function for adding confetti ([829a560](829a560))

commit 47c906f
Merge: 470f04d 72e7473
Author: Aaron Lampros <alampros@gmail.com>
Date:   Fri Mar 8 15:09:31 2019 -0500

    Merge pull request #34 from alampros/develop

    Typescript refactor
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug released
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@alampros @AndreasNasman