What is the difference between passing this.state to produce and not? Immer.js

Question

What is the difference between:

this.setState(produce((draft) => { draft.name ='name'}

and

this.setState(produce(this.state, (draft) => { draft.name ='name'}

can someone explain me this?

`this.state` is not a function, why would you try to call it? — Max Fahl, Oct 19 '21 at 13:09
I saw this - const nextState = produce(baseState, draft => { draft[1].done = true draft.push({title: "Tweet about it"}) }) — Mykyta, Oct 19 '21 at 13:17

score 1 · Accepted Answer · answered Oct 19 '21 at 15:04

In most cases both would act the same

produce((draft) => { draft.name ='name'}) returns a function that wraps argument with a Proxy and applies the mutation. setState allows developer to pass a function that will be called with current state.
produce(this.state, (draft) => { draft.name ='name'}) returns the result of applying mutation to a Proxy of the first argument. setState allows to pass "updated state" thus it will also work.

The first approach is preferable because of the following

If called rapidly in sequence you usually want next state to be built on top of the mutated previous state (famous counter example). And mutation function version of setState is the way to go.
It is less characters to type.

1 Answers1