Ad

Dynamically Create New Component Without Using An Array Or Setstate

- 1 answer

This may be incredibly simple but for the life of me I can't figure out how to achieve it.

I have a notification system working through websockets and every time a new notification gets sent, I add it to an array in state and re map to include the notification. each notification has its own timeout so I'm able to remove them programatically... but.... each notification also has an animated logo which basically resets every time a new notification appears. This happens due to the array being mapped each time and therefore the animation begins again as it's essentially a new notification... so I end up with several notifications all having their animation in sync.

Ultimately i'd like to be able to receive a new notification, render it and not touch set state... is this possible?

Ad

Answer

I'd say it depends on how exactly you are doing animations. Is it purely CSS animation or JS-driven one? Usually such behavior would mean that components are being remounted on every update. This can be changed by providing consistent key attribute, such as a unique id that identifies a notification.

Ad
source: stackoverflow.com
Ad