Post-write callback?

[awdyson]

I'm looking to do something like this, but state isn't updated at this point.

dispatch((draft) => {
  const idx = draft.someArray.indexOf(val);
  idx < 0 ? draft.someArray.push(val) : draft.someArray.splice(idx, 1);
  return draft;
});
state.callback(state.someArray); // someArray is out of date

Is there a way to get around this? Or maybe this goes against the philosophy here?

[awdyson]

My current solution. Think it's fine?

type Dispatch<State> = (dispatch: (draft: Draft<State>) => void | State) => State;
type ImmerStore<State> = [State, Dispatch<State>];

export function useImmer<S = any>(initialValue: S): ImmerStore<S> {
  const [state, updateState] = useState<S>(initialValue);
  const dispatch = (updater: (draft: Draft<S>) => void) => {
    const newState = produce(updater)(castImmutable(castDraft(state))) as S;
    updateState(newState);
    return newState;
  };

  return [state, dispatch];
}

[likern]

I have a very similar problem. I have a callback function, where I update Map:

const [tagsState, updateTagsState] = useImmer(tags);
...
const onTagSelectionChanged = useCallback(
    (data: any) => {
        updateTagsState(draft => {
          draft.set(144, { label: 'Some string' });
        });

        // Here I was expected chages were applied, because updateTagsState has finished
        // But I see old Map instance
        const tag = tagsState.get(data.id);
        if (tag !== undefined && onSelectionChanged !== undefined) {
          onSelectionChanged(tag);
        }
    },
    [tagsState, updateTagsState, onSelectionChanged]
  );

I think the semantic should be - to be able to observe changes immideately after finishing updateTagsState function

[likern]

My current solution. Think it's fine?

type Dispatch<State> = (dispatch: (draft: Draft<State>) => void | State) => State;
type ImmerStore<State> = [State, Dispatch<State>];

export function useImmer<S = any>(initialValue: S): ImmerStore<S> {
  const [state, updateState] = useState<S>(initialValue);
  const dispatch = (updater: (draft: Draft<S>) => void) => {
    const newState = produce(updater)(castImmutable(castDraft(state))) as S;
    updateState(newState);
    return newState;
  };

  return [state, dispatch];
}

Yes, I think useImmer and useImmerReducer's update functions should return new state. It might happen, that after calling callback (in my example with onSelectionChanged callback) component will be completely rerendered externally, never having chance to update Map instance using useImmer

[mweststrate]

This is basically not an immer but a react question. The to access state for executing side effects, don't trigger it directly from the rendering, but from useEffect. For exampe:

const [tagsState, updateTagsState] = useImmer(tags);
...
const onTagSelectionChanged = useCallback(
    (data: any) => {
        updateTagsState(draft => {
          draft.set(144, { label: 'Some string' });
        });
    },
    [tagsState, updateTagsState, onSelectionChanged]
  );

// useEffect 'sees' the state that has become the current state for the component
useEffect(() => {
        const tag = tagsState.get(data.id);
        if (tag !== undefined && onSelectionChanged !== undefined) {
          onSelectionChanged(tag);
        }
}, [tagState.get(data.id)]