Want to obtain the new state synchronously - can't?

[deanrad]

Given an initialized useMethods

  const [ productReviewState, stateChangers ] = useMethods(...);

And an updater like the following:

      updateAnswer: ({ questionId, value, isValid = true }) => {
        state.answers[questionId] = value;
        state.answerValidity[questionId] = isValid;
      }

When I run an effect hook, how can I synchronously have the value of the answerValidity subkey of productReviewState?

      console.log(
        `answerValidity[${questionId}]`,
        productReviewState.answerValidity[questionId]
      );
      stateChangers.updateAnswer({ questionId, value, isValid });
      console.log(
        `answerValidity[${questionId}]`,
        productReviewState.answerValidity[questionId]
      );

The second console log never reflects the updated value. I suppose this is just immutability at work, but I'd at least like a way to "requery" for the current value. TIA.

[dalevink]

As you've suspected, this is by design, as useMethods implements useReducer.

Here's a similar question/answer posted for useReducer:

console.log(state) is a side effect. Side effects belong to useEffect hook:

https://stackoverflow.com/questions/55559307/react-hooks-usereducer-wait-for-reducer-to-finish-before-triggering-a-functio

[pelotom]

It's not possible to synchronously see what the new state will be after calling a state-changing function. There's not even afaik a way to asynchronously wait and see what the new state will be (see facebook/react#15344).

[deanrad]

Great updates @dalevink and @pelotom. I've learned soo much about hooks and such after getting going with use-methods. Thank you!