Best approach in updating a useReducer state in reaction to a change in its initialArg

After the first render, the useReducer hook doesn't react to changes in its initialArg (second positional) argument. It makes it hard to properly sync it with an external value, without having to rely on an extra cycle by dispatching a reset action inside a useEffect hook.

I built a minimal example. It's a simple, formik-like, form provider. Here's what it looks like:

// App.js

const users = {
  1: {
    firstName: 'Paul',
    lastName: 'Atreides',
  },
  2: {
    firstName: 'Duncan',
    lastName: 'Idaho',
  },
};

const App = () => {
  const [id, setId] = useState(1);

  return (
    <>
      <div>Pick User</div>
      <button onClick={() => { setId(1); }} type="button">User 1</button>
      <button onClick={() => { setId(2); }} type="button">User 2</button>
      <FormProvider initialValues={users[id]}>
        <Editor />
      </FormProvider>
    </>
  );
};

// FormProvider.js

const reducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return { ...state, [action.field]: action.value };
    default:
      throw new Error();
  }
};

const FormProvider = ({ children, initialValues }) => {
  const [values, dispatch] = useReducer(reducer, initialValues);

  const handleChange = useCallback((evt) => {
    dispatch({
      field: evt.target.name,
      type: 'UPDATE_FIELD',
      value: evt.target.value,
    });
  }, []);

  return (
    <FormContext.Provider value={{ handleChange, values }}>
      {children}
    </FormContext.Provider>
  );
};

// Editor.js

const Editor = () => {
  const { handleChange, values } = useContext(FormContext);

  return (
    <>
      <div>First name:</div>
      <input
        name="firstName"
        onChange={handleChange}
        value={values.firstName}
      />
      <div>First name:</div>
      <input
        name="lastName"
        onChange={handleChange}
        value={values.lastName}
      />
    </>
  );
};

If you open the demo and click on the User 2 button, you'll notice that nothing happens. It's not surprising since we know that the useReducer hook gets initialised once using the provided initialArg argument and never reads its value again.

What I expect is the useReducer state to reflect the new initialArg prop, i.e. I want to see "Duncan" in the First name input after clicking on the User 2 button.

From my point of vue, I can see two options:

1. Passing a key prop to the FormProvider component.

// App.js

const App = () => {
  // ...

  return (
    <>
      {/* ... */}
      <FormProvider key={id} initialValues={users[id]}>
        <Editor />
      </FormProvider>
    </>
  );
};

This will indeed fix the problem by destroying and re-creating the FormProvider component (and its children) every time the id changes. But it feels like a hack to me. Plus, it seems inefficient to rebuild that entire part of the tree (which is substantial in the real application) just to get that input values updated. However, this seems to be a common fix for such problems.

2. Dispatch a RESET action whenever initialValues changes

// FormProvider.js

const reducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return { ...state, [action.field]: action.value };
    case 'RESET':
      return action.values;
    default:
      throw new Error();
  }
};

const FormProvider = ({ children, initialValues }) => {
  // ...

  const isFirstRenderRef = useRef(true);

  useEffect(() => {
    if (!isFirstRenderRef.current) {
      dispatch({
        type: 'RESET',
        values: initialValues,
      });
    }
  }, [initialValues]);

  useEffect(() => {
    isFirstRenderRef.current = false;
  }, []);

 // ...
};

This will work as well, but, because it's happening inside a useEffect hook, it will require an extra cycle. It means that there'll be a moment where the form will contain stale values. If the user types at that moment, it could cause a race condition.

3. Idea

I read in this article by Mark Erikson that:

Function components may call setSomeState() directly while rendering, as long as it's done conditionally and isn't going to execute every time this component renders. [...] If a function component queues a state update while rendering, React will immediately apply the state update and synchronously re-render that one component before moving onwards.

So it seems that I should be able to call dispatch({ type: RESET, values: initialValues }); directly from the body of the function, under the condition that initialValues did change (I'd use a ref to keep track of its previous value). This should result in the state being updated in just one cycle. However, I couldn't get this to work.

——

What do you think is best between option 1, 2 and (3). Any advice/guidance on how I should address this problem?