chenglou / chenglou/react-tween-state

Whole component is always re-rendered

Open
#50 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
1.7k
Forks
70
PR merge metrics
No merged PRs in 30d

Description

I have animation at top "main" component. I found out that when I change property of a component that is nested inside "main", the whole "main" component is re-rendered. Besides performance, this causes problems when there is a text input field which loses focus after re-render.
Also it is strange that I had to add componentShouldUpdate to make animations work. It enables animations even when componentShouldUpdate always return true.

This can be reproduced only by adding tweenstate.Mixin without any animations enabled.
I use Om (Clojurescript), ReactJS 13.3 and react-tween-state from master.

BTW, would you recommend using chenglou/react-motion instead?

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the issue with Om, ReactJS 13.3, and tweenstate.Mixin without animations enabled, then compare behavior when the mixin is removed. Done means nested component changes no longer re-render the whole main component and text inputs retain focus.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.