Immer is a powerful JavaScript library that makes working with immutable data structures much easier. It allows you to write code in a more natural, mutable way, while behind the scenes, it ensures that your data remains immutable.

However, Immer also provides advanced techniques that allow you to customize its behavior to fit your specific needs. Let’s explore some of these techniques:

1. Customizing the produce function

The produce function is the core function in Immer that allows you to create a draft, modify it, and then produce an updated immutable state. By default, Immer uses a natural set of immer rules to determine how to apply changes to the draft state.

const nextState = produce(currentState, draft => {
  draft.someProperty = newValue;
});

However, you can define your own set of rules by passing a callback function as the second argument to the produce function. This function receives a Proxy object representing the draft state and allows you to customize the behavior of Immer.

For example, you can define a custom rule to handle specific property updates differently:

const nextState = produce(currentState, draft => {
  if (draft.someProperty === "special") {
    draft.anotherProperty = "updated";
  }
});

2. Customizing the immerable symbol

Immer uses a special symbol called immerable to identify objects that should be made mutable. By default, any plain JavaScript object can be made mutable by Immer.

However, in some cases, you may want to exclude certain objects from being made mutable. For example, if you have a third-party library object that should not be modified.

To customize which objects should be made mutable, you can define your own immerable symbol and attach it to the objects that you want Immer to handle.

const immerable = Symbol("immerable");

class MyCustomObject {
  constructor() {
    this.property = "value";
    this[immerable] = true; // Make this object mutable by Immer
  }
}

By setting the immerable symbol to true, Immer will include this object in its immutable state updates. Conversely, if an object doesn’t have the immerable symbol or its value is false, Immer will leave it untouched.

#Immer #JavaScript