UI and State not same after altering the state

this is my zustand code
export const useZustand = create<AppState>((set) => ({
links: [],
addLink: ({ platform, link }) => {
set((state) => ({
links: [
...state.links,
{
platform,
link,
},
],
}));
},
removeLink: (index) => {
set((state) => {
const newLinks = state.links.filter((_, i) => i !== index);
return {
...state,
links: newLinks,
};
});
},
editLink: ({ index, platform, link }) => {
set((state) => {
const newLinks = state.links;

const ele = newLinks[index];
if (ele) {
if (platform) {
ele.platform = platform;
}
if (link) {
ele.link = link;
}
newLinks[index] = ele;
}

return {
...state,
links: newLinks,
};
});
},
}));
export const useZustand = create<AppState>((set) => ({
links: [],
addLink: ({ platform, link }) => {
set((state) => ({
links: [
...state.links,
{
platform,
link,
},
],
}));
},
removeLink: (index) => {
set((state) => {
const newLinks = state.links.filter((_, i) => i !== index);
return {
...state,
links: newLinks,
};
});
},
editLink: ({ index, platform, link }) => {
set((state) => {
const newLinks = state.links;

const ele = newLinks[index];
if (ele) {
if (platform) {
ele.platform = platform;
}
if (link) {
ele.link = link;
}
newLinks[index] = ele;
}

return {
...state,
links: newLinks,
};
});
},
}));
This is the UI Form.tsx
<div className="flex flex-col gap-y-3">
<Button variant={"outline"} onClick={addLinks} className="mt-2 w-full">
+ Add new Link
</Button>

{links.map((link, idx) => (
<FormLink
key={idx}
index={idx}
platform={link.platform}
link={link.link}
/>
))}
</div>
<div className="flex flex-col gap-y-3">
<Button variant={"outline"} onClick={addLinks} className="mt-2 w-full">
+ Add new Link
</Button>

{links.map((link, idx) => (
<FormLink
key={idx}
index={idx}
platform={link.platform}
link={link.link}
/>
))}
</div>
10 Replies
aditya
aditya13mo ago
this is the state and ui initially
No description
aditya
aditya13mo ago
but after I click Remove on the facebook like the state updates correctly but not the ui as seen here
No description
aditya
aditya13mo ago
what is the problem
hausinho
hausinho13mo ago
Are you sure that the links you map over to render them out, are the links from the Zustand State?
hausinho
hausinho13mo ago
Oh and also don’t use the index as your key when mapping over a list. When you remove an entry from the list, using indices as keys results in unexpected behaviour: https://blog.anja-stricker.de/why-using-index-as-key-in-reactjs-map-function-can-cause-problems-and-how-to-fix-them#
Anja Stricker's Blog
Why using index as key in React.js map function is bad
Discover the problem with using index as a key in a React.js map function and how using unique keys can improve performance and make you a better developer.
aditya
aditya13mo ago
yup they are pulled from the state what should i use to maintain the order?
hausinho
hausinho13mo ago
Ideally some unique id or name value. The index is not a good choice as it changes when you make changes to the list.
aditya
aditya13mo ago
ahh i see any idea about the other issue?
gymnocarpa
gymnocarpa13mo ago
It's not really an order, react uses the key to see if the same item has changed places in the array or if it is a new item. By using the key, react can determine if the an element got inserted, deleted or changed in order, this saves rerendering all things if instead one item got removed. If you use the index as the key, then you tell React that the first item is always the first item and the second one is always the second. This behavior is often missed as it's easy to trigger the child to rerender by passing in a callback or similar that causes the child components to rerender regardless. What to use as a key? really any unique id to each item in the array, for example your platform value might be unique in the array. If you really don't have a unique Id in the array, then the next thing to do is to generate an id for each item in your array in the zustand layer of logic, so that the IDs don't change across renders of the component
aditya
aditya13mo ago
just gonna generate uuids for the key and use the index for the counting wow turns out the key was the real problem thanks @hausinho @gymnocarpa
Want results from more Discord servers?
Add your server