Recoil: Object as an atom will cause re-render even when use selector?

[Albert-Gao]

import * as React from "react";
import { atom, useRecoilValue, useSetRecoilState, selector } from "recoil";
import "./App.css";

const valueState = atom({
  key: "value",
  default: { a: 1, b: 2 },
});

const selectA = selector({
  key: "selectA",
  get: ({ get }) => get(valueState).a,
});

function ValueChild() {
  const { a } = useRecoilValue(valueState);

  return <div>useRecoilValue a:{a}</div>;
}

function SelectorChild() {
  const a = useRecoilValue(selectA);

  return <div>useRecoilValue + Selector a:{a}</div>;
}

function App() {
  const setValues = useSetRecoilState(valueState);
  const onlyChangeB = () => {
    setValues((v) => ({ ...v, b: 3 }));
  };

  return (
    <div className="App">
      <ValueChild />
      <SelectorChild />
      <button onClick={onlyChangeB}>update</button>
    </div>
  );
}

export default App;

Bootstrapped a new create-react-app and play with it.

I declared an atom as an object { a: 1, b: 2 }

with 2 components which consume it:

• <ValueChild> only subscribe to property a
• <SelectorChild> only subscribe to property a with selector

Expect:
change property b should not trigger re-render of components who subscribe to property a

Actual behavior
when I click the button to update only b's value, both components will get re-rendered.

Anything I am missing here? Thanks. Very nice API and idea. I love the work. Tried to replace redux/mobx with this. But this will be a blocker

[drarmstr]

Subscriptions are based on individual atoms and selectors. Currently, all downstream subscribers of an atom or selector will update when a dependency updates. If you wish to have your component only update when a or b is updated, then they can be modeled as separate atoms.

Internally, we're working on a mechanism to limit updates when the values have not changed. But, we're planning to really clean up that API before publishing it.

[Albert-Gao]

Thanks, so currently, atom means primitive value? or array(consider it is in the todo example)?

[drarmstr]

Atoms or Selectors can represent either primitives, arrays, or complex objects. But, subscriptions are only handled at an atom/selector granularity. We've found it a best-practice to keep atom values rather simple.

[rwieruch]

Thanks for this library! Really love to play around with it.

I am currently working on this example to demonstrate Recoil:

import React from 'react';
import Recoil from 'recoil';
import { v4 as uuidv4 } from 'uuid';

const listState = Recoil.atom({
  key: 'list',
  default: [
    { count: 0, id: uuidv4() },
    { count: 0, id: uuidv4() },
    { count: 0, id: uuidv4() },
  ],
});

const itemSelector = (id) =>
  Recoil.selector({
    key: `item${id}`,
    get: ({ get }) => {
      const list = get(listState);
      return list.find((item) => item.id === id);
    },
    set: ({ set, get }, newValue) => {
      const newList = get(listState).map((item) => {
        if (item.id === id) {
          return newValue;
        }
        return item;
      });

      set(listState, newList);
    },
  });

const App = () => {
  return (
    <div>
      <Counters />
    </div>
  );
};

const Counters = () => {
  const [list] = Recoil.useRecoilState(listState);

  return (
    <ul>
      {list.map((item) => (
        <Counter key={item.id} id={item.id} />
      ))}
    </ul>
  );
};

const Counter = React.memo(({ id }) => {
  const [item, setItem] = Recoil.useRecoilState(itemSelector(id));

  function handleChange(diff) {
    setItem({ ...item, count: item.count + diff });
  }

  return (
    <div>
      <button type="button" onClick={() => handleChange(1)}>
        Increase
      </button>
      <button type="button" onClick={() => handleChange(-1)}>
        Decrease
      </button>

      {item.count}
    </div>
  );
});

export default App;

However, it seems like that all three Counter components do update even though I only increase/decrease one of them. I thought from https://www.youtube.com/watch?v=_ISAA_Jt9kI that this was the problem Dave faced with each rectangle whereas only one rectangle should update. Is there anything that I am doing wrong here? Currently writing on a blog post inspired by @davidmccabe conference talk 🚀

[acutmore]

Hi @rwieruch, the reason all three update is because each itemSelector reads and updates listState. If a selector's dependencies change then the component will be re-rendered, even if the resulting selector value does not change. To isolate component updates from each other, then the atoms and selectors all need to be isolated from each other.

Something like this should work:

const listItem = RecoilUtils.atomFamily({
  key: "ListItem",
  default: (id) => ({ id, count: 0 }),
});

const listState = Recoil.atom({
  key: "list",
  default: [{ id: uuidv4() }, { id: uuidv4() }, { id: uuidv4() }],
});

const App = () => {
  const list = Recoil.useRecoilValue(listState);

  return (
    <ul>
      {list.map((item) => (
        <Counter key={item.id} id={item.id} />
      ))}
    </ul>
  );
};

const Counter = React.memo(({ id }) => {
  const [item, setItem] = Recoil.useRecoilState(listItem(id));

  function handleChange(diff) {
    setItem((item) => ({ ...item, count: item.count + diff }));
  }

  return (
    <div>
      <button type="button" onClick={() => handleChange(1)}>
        Increase
      </button>
      <button type="button" onClick={() => handleChange(-1)}>
        Decrease
      </button>

      {item.count}
    </div>
  );
});

[drarmstr]

Thanks for helping answer @acutmore

[rwieruch]

Oh wow, thanks for helping out here @acutmore I will try it as soon as https://github.com/facebookexperimental/Recoil/pull/33 gets merged @drarmstr

If this works, I am wondering though how every item knows that it's associated to and part of the list. Is there an implicit matching happening because of the id? If that's the case, what would happen if there would be two lists which by accident have some identical identifiers, which could happen if these lists come from different remote databases. I don't really get how both states know about each other here.

[acutmore]

Hi @rwieruch, not a problem 😀

As you say its an implicit matching happening because of the id. Recoil does not know they Items are part of the List. If the IDs are coming from different databases and might clash that will cause an issue, you would need to prefix the IDs with a namespace. The IDs only need to be unique within a <RecoilRoot> if the lists are in completely different parts of the App then you _could_ wrap each area of the App in a separate RecoilRoot. It would very much depend on the particular use case if that was appropriate.

[rwieruch]

Thanks for taking the time and clarifying things @acutmore Can't wait to dive more into it. Is there any documented way on how I would do the prefixing of the identifiers? Personally I would want to avoid to have multiple <RecoilRoot>.

[Albert-Gao]

Correct me if I am wrong. I think it's like how Stripe name their id, for example, invoice id is inv_123456, subscription id is sub_123456, it will make it 1 sec to identify different ids as well. :)

[davidmccabe]

I'd suggest prefixing with your module name and having a lint rule to enforce that.

As an aside, I wonder if it'd be possible to tack on the proxy-based implicit slicing stuff as an optional thing without changing the existing API. Not sure if we should but I bet we can.

[rwieruch]

Correct me if I am wrong. I think it's like how Stripe name their id, for example, invoice id is inv_123456, subscription id is sub_123456, it will make it 1 sec to identify different ids as well. :)

Ah okay, I thought the prefixing would happen somewhere in Recoil by passing in an optional argument. So you mean the id from the data itself should just receive a prefix before entering the Recoil state. Makes sense!