How, when, and why do we clean up our components in react JavaScript?

I understand that we need to cleanup our components in React to prevent memory leaks (Maybe other reasons as well). I also understand how to use comonentWillUnmount (don't use anymore), and useEffect hook. However my question is what, and why (really why) do we clean up our components. I'd like a detailed answer please as I am having issues understanding this concept.

You usually don't need to at all.

For most components, simply changing state and then not rendering them will unmount them with no mess.

However, if you do anything that wont be cleaned up, you have to clean it up yourself. This means things that are outside the standard React lifecycle:

• Event listeners need be un-bound (i.e. listening for onScroll of window to do something fancy when you scroll the page)
• Unsubscribe from data subscriptions that were opened when that component was instantiated. (i.e. Listening for new chat room messages on an open web socket)
• Cancel a timeout or interval that is no longer needed. (i.e. update a clock once per second)

This is not an exhaustive list, but the idea is that if you do anything in the lifecycle of your component that is not rendering components with some props, you should probably undo that when the component is unmounted.

Make the most of the components as dump components. display what ever the data provided as props. Make the parent componets responsible for the data fetching. This will make the components more simpler and highly readable. Otherwise no of lines of codes within the components will increase and become less readable.a less readable components is hard to understand for other developers , hard to debugg . Make unsubscribtions on unmounting the components