-
-
Notifications
You must be signed in to change notification settings - Fork 48
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.
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
fast refresh duplicates HOC wrapped list items #307
Comments
Hey, I've been thinking about what could be the issue here, I keep coming back to the referential identity part and this being a possible Preact child-diffing bug. If I understand this correctly you can't HMR
would for instance name the returning component from |
Hey. I don't face any issues with my workaround, all components seems to hot replace fine, even if returning unnamed function from HOC. I've just added this as possible solution. The only issue I see is duplicating components, which i've described in the first part of this issue |
So I've just tried this setup in the Changed EDIT: oh I figured it out it only happens on the second save |
I'm not entirely sure if we can build a guard for this but this seems to be because of how the update propagates through the tree, the children get duplicated after a while. Trying to figure out if I can guard for this somehow or if this is something that will be for the |
Dependancies:
webpack is set up to use preact/compat
There are following files:
HOC.jsx // This just represents generic HOC. Originally I faced this issue when using useIntl from 'react-intl' and withTheme from 'styled-components' and it can be reproduced using them as well
List.jsx
ListItem.jsx
With this set up whenever I try to change ListItem.jsx all items in List are duplicated. (For example I've added word 'updated' to ListItem content)
![image](https://user-images.githubusercontent.com/59695738/112026094-8923f380-8b3e-11eb-836d-23493465a472.png)
I've also tried playing with displayName in different ways, but for me it gave no result at all
I've found that if I move wrapping ListItem with HOC to separate file this flow works fine and list items are never duplicated.
So, if I change files to be:
List.jsx
ListItem.jsx
WrappedListItem.jsx
Then I have following result doing same steps as before
![image](https://user-images.githubusercontent.com/59695738/112026982-6e9e4a00-8b3f-11eb-8d8d-0c208a96dc3c.png)
The text was updated successfully, but these errors were encountered: