3

I am using Recoil for my React project and mostly loving it. I'm familiar with the concepts of atoms, atom families, selectors and selector families. However, I'm struggling to work out how to compose these items together to create a canonical master-details UI in react with efficient rendering.

Example UI

Imagine we have a list of Foos down the left.

type Foo = { id: string; name: string; description: string, counter: number }

At anyone time there is a currently selected Foo (or no selected Foo). When I edit a Foo I would like the list details to also update in real-time, but without repainting the whole list on the left.

I've tried many combinations of atoms, selectors and families but in the end I end up re-painting EVERYTHING all the time.

Also, assume the UI allows you to add new Foos.

Would love your thoughts on how to compose this canonically using Recoil.

ConfusedNoob
  • 9,826
  • 14
  • 64
  • 85
  • Well, this heavily depends on how you render your list. Some code for context would be nice :) – Johannes Klauß Aug 04 '21 at 07:55
  • 1
    Honestly, I'm not sure where to start. I've tried a few approaches and I know I'm doing it wrong. I put together this sandbox which is almost working (I have made selectorFamilies writable in the past but this is erroring for some reason): https://codesandbox.io/s/recoil-todolist-example-um6ku?file=/src/App.js Appreciate you taking a look. – ConfusedNoob Aug 07 '21 at 02:54

0 Answers0