Comments (12)
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>
);
});
from recoil.
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.
from recoil.
Thanks, so currently, atom means primitive value? or array(consider it is in the todo example)?
from recoil.
Oh wow, thanks for helping out here @acutmore I will try it as soon as #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.
from recoil.
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. :)
from recoil.
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.
from recoil.
Correct me if I am wrong. I think it's like how Stripe name their
id
, for example, invoice id isinv_123456
, subscription id issub_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!
from recoil.
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.
from recoil.
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 🚀
from recoil.
Thanks for helping answer @acutmore
from recoil.
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.
from recoil.
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>
.
from recoil.
Related Issues (20)
- When are atoms removed from snapshot and/or unmodified?
- Infinite suspense with async selector on React Native
- Recoil and React Navigation Problem for React Native HOT 4
- There was a strange rendering before useLayoutEffect HOT 1
- If a selector return a NaN, it cause a infinity render problem HOT 1
- Atom state seems to be locked as read-only when using objects on Expo 49
- Issue testing `recoil-sync` with `vitest` HOT 1
- Typescript error when using array of objects in refine prop of syncEffect HOT 2
- Documentation: atomFamily with parameterized default value
- selector seems not get new value in sometimes HOT 1
- Under active maintenance? HOT 16
- How to avoid "Setting selectors within atomicUpdate is not supported" when using useRecoilTransaction__UNSTABLE
- RecoilLoadable contains Promise value will never change state from 'loading' to other states.
- RecoilURLSync has unnecessary encodeURIComponent for search serializer
- Testing custom hook with recoil atom inside
- There is a bug on your website HOT 1
- onSet is not triggered when using `useRecoilState` HOT 2
- If value is a NaN, it causes an infinity render HOT 1
- Nested RecoilRoot using initializeState has unexpected results
- `jotai-recoil-adapter`: a community project for making life easier when migrating from Recoil to Jotai HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from recoil.