Post-write callback? about use-immer HOT 4 CLOSED

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];
}

from use-immer.

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

from use-immer.

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

from use-immer.

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)]

from use-immer.