Updating state doesn't trigger a component rerender

See original GitHub issue

👋 So I have set up a simple store, keeping track of an array of objects, and I have one action that edits just one of those objects based on an ID parameter.

// Format of the list of objects
list: [
  {
    id: '123',
    // other data
  },
  // other objects
],
editItem: (id, newItem) => set(state => {
  return {
    list: state.list.map(item => {
      if (item.id == id) {
        return newItem;
      }
      return item;
    }),
  };
}),
// more actions

I have a component that is using this list, which reflects the data in just one of the objects, and so I’m using the following code to get that inside my component function:

// 'id' is passed through my navigation
const items = useStore(state => state.list);
const item = items.find(i => i.id == id);

I’m displaying a property from my item in that component, but my problem occurs when I call that editItem action from another screen, my original component doesn’t rerender. I’m sure that Zustand is updating the state correctly, because a subscribe listener on my items array gets called every time it updates.

Any help would be very appreciated; not sure if I’m just missing something or if this is an issue with Zustand.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

4reactions
dai-shicommented, Mar 28, 2021

@onygami You need to update state immutably. Here’s the fix: https://codesandbox.io/s/inspiring-mountain-z93fi?file=/src/useTodos.ts

1reaction
heyitsarpitcommented, Mar 29, 2021

@dai-shi Thanks, that was dumb of me, I thought a simple return will update state immutably.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React component not re-rendering on state change
React only triggers a re-render if you use setState to update the state. Share.
Read more >
React doesn't always trigger a re-render on setState
In these cases, React doesn't trigger a re-render because the state did not change. If the current day is 5, it will be...
Read more >
How and when to force a React component to re-render
Incorrectly updated state in React​​ Let's build a simple component to demonstrate one common reason components aren't rendering. We will build a ...
Read more >
4 methods to force a re-render in React
If you need to re-render a React component, always update the components state and props. Try to avoid causing re-render with key prop,...
Read more >
When does React re-render components? - Felix Gerschau
In React hooks, the forceUpdate function isn't available. You can force an update without altering the components state with React.useState like ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found