Various Patterns for Using State in React

In this lesson, we learn several patterns to use Valtio 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:

Get hands-on with 1200+ tech skills courses.