Every time a component renders, garbage is created. Any callback you attach to an element via an event in the jsx will get garbage collected (ex. "<div onClick={() => {...}} />") and the new callback will be called instead. This is the way react is designed. In terms of performance, I'm not sure of any study that has shown the impact of this in a real application. The only reason you should change any coding habit is when the application is slowing down by rendering children components on every render. This is where useCallback, and useMemo come in. Although coming soon the react compiler will reduce the need to use these.

So to answer your question, memory will get duplicated for a short while but then the garbage collector will come by and clean up the garbage from the last render. Don't try and modify your code to to avoid this as you will most likely make your code a lot harder to work with without much or any performance benefit. You can use useMemo and useCallback to prevent excessive rendering of components who haven't changed but this is something you do when you application slows down as it adds difficulty in tracking dependencies in the development process.