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?
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.
If you make sure your existing notifications have the same keys as before, they shouldn't rerender when you add a new notification to your array in state.
Here's a codesandbox in which you can generate new notifications without triggering re render for existing notifications.
Related
I'm trying to play an animation on dismounting of my component with exit attribute, but it doesn't work despite the presence of !
The input animation works fine but not the output one !
I guess I'm mismanaging the dismounting of my description which is displayed if the props data.show is true, boolean that I change at the click on the project, in short if someone can point me...
codesandbox
Thanks in advance
There are quite a few issues to cover in your code and suggest you first understand what triggers re-rendering in React.
By creating a new uuid key every time you change prop data, you are breaking the ability for React to know which components need to be rendered again so it re-renders them all - so it's always a new instance on AnimatePresence and no way for AnimatePresence to know there has been a change to the key or a change in mounting. Also make use of useCallback hooks when passing in functions to child components to avoid re-renders.
Move the state up to the parent, update the card key to a consistent value between renders, and don't update the entire props data just to expand/collapse.
See the updated sandbox
I suggest that you don’t animate multiple items inline within the same space like this as you will always have the remaining boxes jump a little, but that is another topic.
I create 2 Text Boxes one with hook and the another one with the old style, now in Hook mode when the user input change the textbox value the whole page rendered, but with old style there only the text-box rendered not the whole page, if you have the complex page with many objects like (Data Table, form, buttons, inputs, etc..) the single change on one of these components forced to re-render everything and it decease performance, for example typing in the text-box take time to effect on page and the delay time is more than user typing speed.
the one workaround solution is using the callbacks and useMem but if the page is complex(lots of objects as described, and all of these objects has many properties the callback and useMem is very very complicated to handle single object property.
SandBox Example
This is exactly how react hooks should work. what will cause a rerender in react? two things:
change in props
change in hooks or say in a better way hooks state
in the second case, the useInput state is changing so that causes a rerender and it's absolutely normal behavior. I think using custom hook in that way is not a good practice.
I recommend reading this article for more information on react rendering: https://www.codebeast.dev/usestate-vs-useref-re-render-or-not/
I'm using react FullCalendar component and I need to change the background color of an event as it becomes the "CurrentEvent" (when the now indicator is over it).
I'm able to do that when I load the screen, but I also need to do it when the screen is open and the "current event" changes as the time passes.
The way I was thinking about doing that is by using any callback indicating this situation and then changing the style, but I'm not finding any callback that points out this situation.
Any ideas? Thank you.
I'm making a chat interface in ReactJS, and each item in the chat log displays the same avatar icon over and over again. Currently the problem I'm facing is that when new items are added the chat log, this image blinks in every list item, which does not look very presentable.
I want to know if there is a way to reuse the Component (most probably not) or the bitmap data, so that once loaded in memory, it can be shown more quickly without a perceivable blink. I have tried using data URL, but not to much avail.
Per request in comments further details:
I have a separate Component to show each chat log item. It contains an Image component to show the avatar.
On the top log I'm using a FlatList and in the renderItem I'm rendering the said chat log component. Whenever any message is sent or received it is appended to the array that the data in the FlatList is pointing to.
Whenever an item is added the list gets re-rendered causing the Image to be created again (I have searched but haven't found any good away of appending items to a FlatList without affecting existing children). Therefore I believe the solution lies in making the image load faster so that the re-render is not so perceivable.
One reason I think of the flickering is if you reassign the key of list items and forcing it to re-render. Check if there is any such case. Thats one of the main reasons component to re-render on listviews.
I used react-infinite-scroll-component it's working just fine.
However, I want to avoid making the user lose his scroll position when he leaves the page and clicks back?
Also please put on consideration Firefox and Safari.
Not 100% sure because I haven't used it - but since no one else has chimed in... the docs say the component has a prop named key that is described as:
the key for the current data set being shown, used when the same
component can show different data sets at different times,
default=undefined
Also, it has a prop named onScroll that is described as:
a function that will listen to the scroll event on the scrolling
container. Note that the scroll event is throttled, so you may not
receive as many events as you would expect.
... which I suspect one of the arguments of which will tell you which keys it loaded / scrolled through.
So my approach would be to use componentWillUnmount to save the last key it loaded into a parent property (or Redux store if you're using Redux)... and when the component loads, if the key exists in the parent (or Redux store if you're using Redux) then pass it that key.