Proposal: Synchronous Partial State Update Interface

[Juyeong-Byeon]

By default, Valtio batches the render process. So, if we need to use synchronous UI updates, such as when using Valtio on controlled input #45, we need to use the sync option in the useSnapshot

const snapshot = useSnapshot(state, { sync: true });

But currently, Valtio does not provide an interface for synchronous partial state updates. When we use useSnapshot(state, { sync: true }), all render will not be batched. Therefore, this interface cannot handle cases like the one shown below:

interface User {
  name: string;
  info: {
    address: string;
    email: string;
  }
}

function useUser() {
  const userSnapshot = useSnapshot<User>(userState);

  const setEmail = (email: string) => {
     // I want to update this field synchronously.
      userState.info.email = email
  };

  const setName = (name: string) => {
   // But don't want to update this field synchronously.
    userState.name = name;
  };

  return {
    setEmail,
    setName,
    userSnapshot
  };
}

It's possible to use useSnapshot partially in fields like useSnapshot<User>(userState.email,{sync:true}) for work around. However, this approach is not suitable for creating the hook interface required for the use case. this way is also not good for DX.

The goal is to leverage batched updates for some parts of the state while still having the ability to perform synchronous updates for other parts.

Proposal
Implementat partial sync update just like update function in here

I propose useSyncUpdate function to perform partial synchronous update.
Here's an implementation of the useSyncUpdate hook:

import { useReducer } from "react";
import { proxy } from "valtio";

function useSyncUpdate() {
  const [, update] = useReducer((c) => c + 1, 0);
  return function syncUpdate(callback) {
    callback();
    update();
  };
}

With this util I can achieve partial sync update

function useUser() {

 // ...codes
  const userSnapshot = useSnapshot<User>(userState);
  const sync = useSynchronousUpdate();

  const setEmail = (email: string) => {
     // sync update
    sync(() => {
        userState.info.email = email
   });
  };

  const setName = (name: string) => {
    userState.name = name;
  };
// ... codes
}

Adding the ability to perform partial updates synchronously in Valtio would provide greater flexibility for developers using Valtio in their React applications. With this feature, developers could selectively choose which parts of the state should be updated synchronously, while still using the benefits of batched updates for the rest of the state.

[dai-shi]

We don't consider this use case is very common and a workaround with current api would be nice.

There should be many workarounds, but if you are interesting in a specific property, how about using subscribe and useState?

A simpler version:

  const [email, setEmail] = useState(userState.info.email);
  useEffect(() => subscribe(userState.info, () => setEmail(userState.info.email), true), []);