Can Recoil prevent sibling components from re-rendering without using React.memo?

[yzbaoo]

I tried a lot of writing methods and still did not prevent sibling components from updating

[yzbaoo]

I have tried many ways of writing, but the sibling components are still re-rendered

const initialState = [
  {
    x: 0,
    y: 0
  },
  {
    x: 100,
    y: 0
  },
  {
    x: 200,
    y: 0
  },
]

const data = atom({
  key: 'data',
  default: initialState
})

const state = selector({
  key: 'state',
  get: ({get}) => {
    return get(data);
  },
  set: ({set}, newValue) => {
    set(data, newValue)
  } 
})

[yzbaoo]

How to do it just update yourself？

[csantos42]

Do the siblings share a parent that is subscribed to the recoil state? If so that'll cause a re-render of the parent and its corresponding children. To prevent that, make sure to isolate components reading from Recoil so that state updates don't cause re-renders high in the tree

[yzbaoo]

"Do the siblings share a parent that is subscribed to the recoil state?",yes.
How to isolate？
Need to split initialState into item? Then the child component to subscribe?

[csantos42]

Please see this related question and answer here as it also applies to subscribing to Recoil state: https://stackoverflow.com/questions/66590082/how-to-prevent-re-rendering-of-components-that-have-not-changed

Children will always re-render if a parent renders by default, so you should try to prevent the parent from re-rendering if that is causing perf issues

[yzbaoo]

yes, you didn't understand what I said.
I want to ask Recoil how to solve it.

[tpatalas]

You can isolate them by assigning ID to that component with atom, and then re-assign that to the atomFamily. You then trigger that ID with the event with Recoil selector, and return others. It won't work all the time, but will work on your case.