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

adityaOP•14mo ago

this is the state and ui initially

adityaOP•14mo ago

but after I click Remove on the facebook like the state updates correctly but not the ui as seen here

adityaOP•14mo ago

what is the problem

hausinho•14mo ago

Are you sure that the links you map over to render them out, are the links from the Zustand State?

hausinho•14mo 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.

adityaOP•14mo ago

yup they are pulled from the state what should i use to maintain the order?

hausinho•14mo 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.

adityaOP•14mo ago

ahh i see any idea about the other issue?

gymnocarpa•14mo 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

adityaOP•14mo 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

Gaming

Programming

UI and State not same after altering the state