phoenix_live_view icon indicating copy to clipboard operation
phoenix_live_view copied to clipboard

When in list, all but first two components get unnecessarily re-rendered on their children update

Open DaTrader opened this issue 2 years ago • 0 comments

Environment

  • Elixir version (elixir -v): 1.13.4
  • Phoenix version (mix deps): 1.6.7
  • Phoenix LiveView version (mix deps): 0.17.9
  • Operating system: Linux Mint
  • Browsers you attempted to reproduce this bug on (the more the merrier): FF, Chrome
  • Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes

Actual behavior

When updating an element the ancestor of which is a component in a list, the component's element itself gets unnecessarily re-rendered even if unchanged when the component's position in the list is >= 2 (starting from 0). The first two components in the list correctly update just the element(s) actually changed. My guess is that this is a client-side bug as I couldn't find a relevant difference between the component diffs sent from the server.

This occurs with plain elements within components in the list as well as with components within components in a list and with component lists within component lists. It's always the same pattern.

The bug dates back since at least v0.15.x and is still there in v0.17.9

Below is the chirp demo (migrated to 0.17.9) repo with the bug made visible by adding a CSS hovering transition that flashes (on re-rendering) when clicking on likes or reposts of any of the post components except for the first two in the list. This is also clearly observable by inspecting the dom and clicking, but I made it easier to see by adding the extra CSS code.

https://github.com/DaTrader/chirp0_17_9

Expected behavior

The parent components of updated elements should not get re-rendered if themselves unchanged regardless of their position in the list.

DaTrader avatar Apr 29 '22 12:04 DaTrader