A little while ago I was given a cool design for an Instagram story styled bubble component where each bubble would smoothly slide into its new position when we got its new order from the API.
While it can be straightforward to do a whole load of animations and transitions with CSS, it took me a while to find an example of animating the reordering of list items, especially with React. Since I’ve also started to get used to the concepts of React Hooks I wanted to use them to implement this animation too.
I found this difficult to do using React hooks because my component would automatically rerender, in its new order, when it got new data. I was trying to hook into the moment before rerendering to smoothly transition from one state to another. Without the
componentWillReceiveProps function call from the class components, this was hard to do.