📃 Todo App | React | styled-components | localstorage | drag-and-drop

This is my first challenge with styled components. They are indeed very convenient, and I learned a lot about them! I also learned how to create a drag-and-drop effect, which was quite gratifying as well. 🤩 However, I faced some problems that I couldn't resolve 😥 Here they are:

• Using drag-and-drop made my TodoItem component rerender quite frequently, and when I tried to pass some props to TodoItem styles, using styled-components, I had to deal with very poor performance (due to the constant rerendering). That's why in the end, I put all the styles in a separate css-file and added them using className property. I read about using attrs in styled components and putting the dynamically changing styles there, but it didn't help improve the performance 😞

• Another little bug is one-time background image flickering when I drag a list item. It happens quite randomly and sometimes doesn't happen at all, but I think some of you might notice it.

• Finally, I spent quite a lot of time fixing the caret position in the text field. By default, it is aligned to the top of the text instead of to its middle. So I wanted to align it ~2pxs above the text, but I couldn't figure out how to do that properly so I left everything as it was.

All in all, it was an interesting challenge with lots of opportunities to deepen my React knowledge. 😅 For example, I practiced using useState and useEffect hooks (see TodoItem component) and for the first time applied localstorage to the list items.

I would be very grateful if some of you could take your time and comment on my solution or shared some insight on how I could resolve the aforementioned problems. Anyway, thank you for checking out this solution and reading this entry till the end! 😊

P.S. Check out my README.md description file for some extra links.