Whole component state overriden

[sadzfr]

Hey Shrugsy,

You have done an amazing Job writing the use-immer-state hook, I have been trying use it, but I ran into a problem.
For a particular component, there are multiple state objects, and I needed to use this hook for one particular state object, but when i integrated this hook for that state object, it automatically overrides the whole components state, and throws an error whenever i use setState(useState one) on another state object.

Is there a workaround for this?

Thanks

[Shrugsy]

Hi @Farangi,
Thank you for the feedback. Can you please give a small example of the usage that would replicate the above?

[sadzfr]

Hey @Shrugsy ,
Thanks alot, you are doing a great job. 🍻

[sadzfr]

We have already updated to 2.3.0 in our codebase

[Shrugsy]

Hi @Farangi,

FYI: V3.0.0 has since been released with the following:

Changelog:
- calling `setState` without changing state no longer
  contributes to history
- re-export `original` and `castDraft` from immer

[sadzfr]

That solves another problem with the strict mode, thanks alot @Shrugsy
Also I would like to learn how can I use :

• re-export original and castDraft from immer

[Shrugsy]

What problem do you mean about strict mode? There is another discussion thread here (#4) that talks about strict mode, but I haven't been able to replicate any problems with it.

For the re-exports, there is a brief description here: https://github.com/Shrugsy/use-immer-state#re-exports

When within a setState call, if using the functional update callback, you will be working on a draft proxy object, not the real original object. Hence why it is safe to write 'mutating' code there. You can use original get get the real original object for a particular proxy, e.g. if you need to compare something by reference).

function toggleTodo(todoToToggle) {
  // e.g. toggling a todo by passing the whole todo
  setTodos((todo) => {
    todos.forEach((todo) => {
      // `todo` here is a draft object, but `original(todo)` gets the original object
      if (original(todo) === todoToToggle) {
        todo.isCompleted = !todo.isCompleted
      }
    });
  })
}

However, for the majority of cases this approach isn't recommended, and rather than comparing by reference it is better to compare by a proper unique identifier (e.g. todo.id === todoToToggle.id)

castDraft is a no-op function that wraps the type in Draft, which can be required to satisfy typescript in certain situations when using generic types.