Maybe I misunderstood recoil. My understanding is that if you have two state atoms with lists of items, and you move an item from one list to another, the same dom elements will not be reused with separate parents rendering like this:
If recoil does support reusing dom elements across parents, please let me know! I didn't find anything about it in the docs, so i don't see how it would be any more suited to this task than redux. My understanding of redux vs recoil is that it comes down to whether you want your state centralized or not.
Instead of only creating an atom for every list, you can create an atom for each item. This means that it will be separate from the list state and whenever you change its state you only affect that item. Furthermore, with selectors, you can prevent the list from re-rendering where it doesn't need to. Redux does not make this easy since it has a centralized state.
Child components with the same key are not reused across separate parents. Whether you're storing the items as separate atoms and storing lists of ids in another atom (which, btw is simply normalization, a practice that's extremely common and simple with Redux) or not. React-Redux also uses selectors to determine the props that will be passed to components based on the centralized state, and if the props haven't changed, the component won't re-render. There are also libraries like reselect for setting up multiple layers of memoization.
The issue here isn't preventing unnecessary renders, it's preserving dom nodes of a child component when reparenting it. Neither Redux nor Recoil can accomplish that on their own.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Maybe I misunderstood recoil. My understanding is that if you have two state atoms with lists of items, and you move an item from one list to another, the same dom elements will not be reused with separate parents rendering like this:
If recoil does support reusing dom elements across parents, please let me know! I didn't find anything about it in the docs, so i don't see how it would be any more suited to this task than redux. My understanding of redux vs recoil is that it comes down to whether you want your state centralized or not.
Instead of only creating an atom for every list, you can create an atom for each item. This means that it will be separate from the list state and whenever you change its state you only affect that item. Furthermore, with selectors, you can prevent the list from re-rendering where it doesn't need to. Redux does not make this easy since it has a centralized state.
Child components with the same key are not reused across separate parents. Whether you're storing the items as separate atoms and storing lists of ids in another atom (which, btw is simply normalization, a practice that's extremely common and simple with Redux) or not. React-Redux also uses selectors to determine the props that will be passed to components based on the centralized state, and if the props haven't changed, the component won't re-render. There are also libraries like reselect for setting up multiple layers of memoization.
The issue here isn't preventing unnecessary renders, it's preserving dom nodes of a child component when reparenting it. Neither Redux nor Recoil can accomplish that on their own.