Does not trigger rerender about zustand HOT 3 CLOSED

It’s using reference equality for change detection. Setting the same object won’t cause rerendering, similar to how Redux reduces state.

from zustand.

The problem persists is even if passing clone of the object

// global-ish history tracker
export const [ useHistory ] = create(set => {
  let history = createBrowserHistory()

  const unlisten = history.listen((location, action) => {
    set({...history})
  })

  let delegation = delegate('a', 'click', e => {
    e.preventDefault()
    history.push(e.delegateTarget.getAttribute('href'))
  });
  return {...history}
})

from zustand.

It isn't updating because all the enumerable properties on history are the same. The check to update state is a "shallow equal" check. It will first check if the value is equal and if not, check all enumerable properties for equality. Even though you created a new history object, the enumerable properties were the same so it did not set the state.

It looks like you are trying to call set when the history event is dispatched. You should create your own state with { location } and set the location value in the listener. If you need access to the history object outside of the store, create it outside of the store in a module and import it whenever you need it.

from zustand.