Various Patterns for Using State in React

The state created by Valtio’s proxy can be used in React with useSnapshot. There are some patterns to define render logic with the state.

Let’s take the same example from the previous lesson and render doubled state.count and capitalized state.text.

Render functions

This is the basic usage. It extracts values from snapshot and derives some values in the React render function.

const Component = () => {
  const { count, text } = useSnapshot(state);
  const doubledCount = count * 2;
  const capitalizedText = text.toUpperCase();
  return <div>{doubledCount} {capitalizedText}</div>;
};

Now, let’s run the application: