Streamline Your State: Mastering Valtio with the Speed of Bun and Vite

Managing the state of a React app is a crucial aspect of developing modern web applications. With the advent of new tools and libraries, developers can now efficiently handle state management with ease. This article explores how to manage state in a React app using Bun, Vite, and Valtio.

About the Tools:
Bun:
Bun is a modern JavaScript runtime that aims to be fast and efficient. It includes a bundler, a transpiler, and a package manager all in one. Bun is designed to be a drop-in replacement for Node.js and aims to improve developer productivity by reducing build times and improving performance.

Vite:
Vite is a build tool that offers an incredibly fast development experience for modern web projects. It leverages native ES modules in the browser and offers an optimized build process, making it ideal for modern JavaScript frameworks like React.

Valtio:
Valtio is a proxy-based state management library for React. It provides a simple and efficient way to manage and react to state changes, allowing developers to write less boilerplate code and focus on building features.

Purpose of Valtio:
The primary purpose of Valtio is to simplify state management in React applications by addressing several pain points commonly associated with other state management solutions. These pain points include:

1. Complexity and Boilerplate: Traditional state management libraries like Redux often require a significant amount of boilerplate code, including actions, reducers, and dispatch mechanisms. This can make the codebase cumbersome and difficult to maintain.

Valtio eliminates the need for such boilerplate by allowing direct manipulation of state objects. With Valtio, developers can work with plain JavaScript objects and use them directly in their React components.

1. Scalability and Performance: As applications grow in size and complexity, maintaining efficient and scalable state management becomes challenging. Performance issues can arise due to excessive re-renders and complex state dependencies.

Valtio uses proxies to create reactive state objects, ensuring that only the components dependent on the changed state are re-rendered. This leads to more efficient updates and better performance, even in large applications.

1. Intuitive API and Developer Experience: Learning and using state management libraries can have a steep learning curve, especially for new developers. The complexity of the API and the need to understand various concepts like reducers and middleware can be overwhelming.

Valtio offers an intuitive and straightforward API, making it easy for developers to get started. By leveraging familiar JavaScript concepts, Valtio reduces the learning curve and enhances the overall developer experience.

Motivation Behind Valtio:
The motivation behind Valtio stems from the need to address specific challenges and improve the state management experience for developers. Key motivations include:

1. Simplifying State Management:
   The primary motivation behind Valtio is to simplify state management in React applications. By eliminating the need for boilerplate code and allowing direct state manipulation, Valtio makes it easier for developers to manage application state.

2. Enhancing Reactivity:
   Valtio leverages JavaScript proxies to create reactive state objects. This approach ensures that state changes are automatically tracked, and only the relevant components are re-rendered. Enhancing reactivity improves application performance and reduces the complexity of managing state updates.

3. Improving Developer Productivity:
   By providing a simple and intuitive API, Valtio aims to improve developer productivity. Developers can focus on building features rather than dealing with complex state management logic. This leads to faster development cycles and a more enjoyable development experience.

4. Supporting Modern React Applications:
   Valtio is designed to work seamlessly with modern React features, including hooks and concurrent rendering. It aligns with the latest trends in React development, making it a suitable choice for modern web applications.

Features of Valtio:
Valtio offers several features that make it a compelling choice for state management in React applications:

1. Reactive State:
   Valtio creates reactive state objects using JavaScript proxies. This ensures that state changes are automatically tracked and propagated to the relevant components.

2. Direct State Manipulation:
   With Valtio, developers can directly manipulate state objects without the need for actions or reducers. This simplifies the codebase and reduces boilerplate.

3. Seamless Integration with React:
   Valtio integrates seamlessly with React, supporting hooks and other modern React features. The useSnapshot hook allows components to subscribe to state changes effortlessly.

4. Derived State:
   Valtio supports derived state, allowing developers to define computed values based on the state. This ensures that derived state values are always in sync with the underlying state.

5. Middleware and Plugins:
   Valtio supports middleware and plugins, providing extensibility and allowing developers to add custom logic to state management.

Use Cases for Valtio:
Valtio is suitable for a wide range of use cases, including:

1. Simple State Management:
   For small to medium-sized applications, Valtio offers a straightforward way to manage state without the overhead of more complex state management libraries.

2. Complex State Dependencies:
   In applications with complex state dependencies, Valtio’s reactive state management ensures efficient updates and minimizes unnecessary re-renders.

3. Real-Time Applications:
   For real-time applications that require frequent state updates, Valtio’s reactivity ensures that updates are propagated efficiently and components are kept in sync.

4. Rapid Prototyping:
   Valtio’s simplicity and ease of use make it ideal for rapid prototyping, allowing developers to quickly build and test features.

Setting Up the Project:

Step 1: Initialize the Project with Bun
First, ensure you have Bun installed. If not, you can install it from the official website.

bun create react my-react-app
cd my-react-app

Step 2: Install Vite
Since Bun doesn’t natively support Vite out of the box, we’ll integrate it manually.

Install Vite and its dependencies:

bun add vite @vitejs/plugin-react

1. Create a vite.config.js file at the root of your project:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

Step 3: Set Up Valtio
Install Valtio using Bun:

bun add valtio

Creating a Simple React App
Let’s create a simple React app that uses Valtio for state management. We’ll start with a counter example.

Step 4: Create a React Component
In the src directory, create a file named App.jsx:

import React from 'react';
import { useSnapshot } from 'valtio';
import { proxy } from 'valtio';

const state = proxy({
count: 0,
});

function App() {
const snap = useSnapshot(state);

return (

Count: {snap.count}

state.count++}>Increment
state.count--}>Decrement

);
}

export default App;

Step 5: Update the Entry Point
Update the main.jsx file to use Vite's hot module replacement (HMR) and render the App component:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(



);

1. Make sure your index.html file is set up correctly:

<!DOCTYPE html>

React App with Vite and Valtio

Step 6: Start the Development Server
Start your development server using Vite:

bun vite

This will start the Vite development server, and you should see your React app with the counter on http://localhost:3000.

Key Features of Valtio:

1. Reactive State: Automatically updates the UI when state changes.
2. Simplicity: Minimal API that is easy to learn and use.
3. Derived State and Effects: Supports derived state and side effects.
4. TypeScript Support: Excellent TypeScript support for type-safe state management.

Primary Components of Valtio

1. proxy The proxy function creates a reactive state object. It uses JavaScript Proxies to track changes and ensure that any state updates are automatically reflected in the UI.

Example:

import { proxy } from 'valtio';

const state = proxy({
  count: 0,
  text: 'Hello, Valtio!'
});

1. useSnapshot The useSnapshot hook subscribes to changes in the state and returns a snapshot of the state. This snapshot is automatically updated whenever the state changes, causing the component to re-render.

Example:

import { useSnapshot } from 'valtio';

const Counter = () => {
  const snap = useSnapshot(state);
  return (
    <div>
      <p>{snap.count}</p>
      <button onClick={() => state.count++}>Increment</button>
    </div>
  );
};

1. subscribe The subscribe function allows subscribing to changes in the state without using React components. This is useful for logging, debugging, or triggering side effects outside of React components.

Example:

import { subscribe } from 'valtio';

subscribe(state, () => {
  console.log(`Count has changed to: ${state.count}`);
});

1. derive The derive function creates derived state, which is computed from other state values. Derived state is automatically updated when the underlying state changes.

Example:

import { derive } from 'valtio/utils';

const derivedState = derive({
  doubledCount: (get) => get(state).count * 2
});

1. devtools The devtools function integrates Valtio with browser developer tools for easier debugging and state inspection.

Example:

import { devtools } from 'valtio/utils';

devtools(state, 'ValtioState');

Putting It All Together: A Sample Application
Let’s build a simple counter application to demonstrate how these components work together in a Valtio-based state management setup.

Step 1: Setting Up the State

// state.js
import { proxy } from 'valtio';

export const state = proxy({
  count: 0,
  increment() {
    this.count++;
  },
  decrement() {
    this.count--;
  }
});

Step 2: Creating the Counter Component

// Counter.js
import React from 'react';
import { useSnapshot } from 'valtio';
import { state } from './state';

const Counter = () => {
  const snap = useSnapshot(state);

  return (
    <div>
      <p>Count: {snap.count}</p>
      <button onClick={() => state.increment()}>Increment</button>
      <button onClick={() => state.decrement()}>Decrement</button>
    </div>
  );
};

export default Counter;

Step 3: Integrating Derived State

// derivedState.js
import { derive } from 'valtio/utils';
import { state } from './state';

export const derivedState = derive({
  doubledCount: (get) => get(state).count * 2
});

Step 4: Displaying Derived State

// DoubleCounter.js
import React from 'react';
import { useSnapshot } from 'valtio';
import { derivedState } from './derivedState';

const DoubleCounter = () => {
  const snap = useSnapshot(derivedState);

  return (
    <div>
      <p>Doubled Count: {snap.doubledCount}</p>
    </div>
  );
};

export default DoubleCounter;

Step 5: Integrating DevTools

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { devtools } from 'valtio/utils';
import { state } from './state';
import Counter from './Counter';
import DoubleCounter from './DoubleCounter';

devtools(state, 'ValtioState');

const App = () => (
  <div>
    <h1>Valtio Counter App</h1>
    <Counter />
    <DoubleCounter />
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

Flow Control in Managing UI Application’s State with Valtio:
Valtio is a modern state management library for React that leverages JavaScript Proxies to create reactive state objects. This article will delve into the flow control mechanisms in Valtio, explaining how it manages state changes, synchronizes state across components, and ensures optimal performance in a UI application.

Key Concepts in Valtio:

1. Reactive State: Valtio uses JavaScript Proxies to create reactive state objects, which automatically trigger re-renders in components when the state changes.
2. Proxies: Proxies intercept interactions with state objects, allowing Valtio to track and manage state changes efficiently.
3. Snapshots: Snapshots provide a way to use and observe the current state in React components.
4. Derived State: Derived state allows the creation of computed values based on the reactive state.
5. Effects: Effects enable executing side effects when the state changes.

Flow Control in Valtio:
The flow control in Valtio revolves around how state changes propagate through the application, ensuring that components stay in sync with the latest state. Here’s a detailed breakdown of the flow control process in Valtio:

1. State Initialization State is initialized using the proxy function, which creates a reactive state object. This object will be used throughout the application to manage state changes.

Example:

import { proxy } from 'valtio';

const state = proxy({
  count: 0,
  increment() {
    this.count++;
  },
  decrement() {
    this.count--;
  },
});

export default state;

1. State Usage in Components React components use the useSnapshot hook to subscribe to state changes and get the current state. The useSnapshot hook ensures that components re-render automatically when the state changes.

Example:

import React from 'react';
import { useSnapshot } from 'valtio';
import state from './state';

const Counter = () => {
  const snap = useSnapshot(state);

  return (
    <div>
      <p>Count: {snap.count}</p>
      <button onClick={() => state.increment()}>Increment</button>
      <button onClick={() => state.decrement()}>Decrement</button>
    </div>
  );
};

export default Counter;

1. State Modification State modifications are done directly on the state object. Valtio’s Proxy-based reactivity ensures that any changes to the state trigger re-renders in components that use the affected state.

Example:

state.increment(); // This will increment the count and trigger a re-render in subscribed components

1. Handling Asynchronous State Updates Valtio supports asynchronous state updates seamlessly. You can define asynchronous functions within the state object to handle operations like data fetching.

Example:

import { proxy } from 'valtio';

const asyncState = proxy({
  data: null,
  loading: false,
  error: null,
  async fetchData() {
    this.loading = true;
    this.error = null;
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
      const result = await response.json();
      this.data = result;
    } catch (error) {
      this.error = error.message;
    } finally {
      this.loading = false;
    }
  }
});

export default asyncState;

1. Using Asynchronous State in Components Components can use asynchronous state similarly to synchronous state. The useSnapshot hook will ensure that components re-render when the asynchronous state updates.

Example:

import React, { useEffect } from 'react';
import { useSnapshot } from 'valtio';
import asyncState from './asyncState';

const DataComponent = () => {
  const snap = useSnapshot(asyncState);

  useEffect(() => {
    asyncState.fetchData();
  }, []);

  if (snap.loading) return <div>Loading...</div>;
  if (snap.error) return <div>Error: {snap.error}</div>;
  if (!snap.data) return null;

  return (
    <div>
      <p>Data: {snap.data.title}</p>
    </div>
  );
};

export default DataComponent;

1. Derived State and Effects Derived state and effects provide additional mechanisms to manage state flow and side effects in Valtio.

Derived State: Derived state allows the creation of computed values based on the reactive state.

Example:

import { derive } from 'valtio/utils';

const derivedState = derive({
  doubleCount: (get) => get(state).count * 2,
});

export default derivedState;

Using Derived State in Components:

import React from 'react';
import { useSnapshot } from 'valtio';
import derivedState from './derivedState';

const DerivedComponent = () => {
  const snap = useSnapshot(derivedState);

  return (
    <div>
      <p>Double Count: {snap.doubleCount}</p>
    </div>
  );
};

export default DerivedComponent;

Effects: Effects enable executing side effects when state changes.

Example:

import { subscribe } from 'valtio';

subscribe(state, () => {
  console.log(`Count has changed to: ${state.count}`);
});

Advanced State Management with Valtio:

Step 7: Implement More Complex State Logic
Valtio can handle more complex state logic. Let’s extend our example to include a to-do list.

Update the App.jsx file:

import React from 'react';
import { useSnapshot } from 'valtio';
import { proxy } from 'valtio';

const state = proxy({
  count: 0,
  todos: [],
});
function App() {
  const snap = useSnapshot(state);
  const addTodo = () => {
    const newTodo = prompt('Enter a new to-do:');
    if (newTodo) {
      state.todos.push({ text: newTodo, done: false });
    }
  };
  return (
    <div>
      <h1>Count: {snap.count}</h1>
      <button onClick={() => state.count++}>Increment</button>
      <button onClick={() => state.count--}>Decrement</button>
      <hr />
      <h2>To-Do List</h2>
      <button onClick={addTodo}>Add To-Do</button>
      <ul>
        {snap.todos.map((todo, index) => (
          <li key={index}>
            <input
              type="checkbox"
              checked={todo.done}
              onChange={() => (state.todos[index].done = !todo.done)}
            />
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
}
export default App;

Step 8: Managing Derived State
Valtio allows you to create derived state using JavaScript getters. This can be useful for computed properties.
Add a computed property to App.jsx:

const state = proxy({
  count: 0,
  todos: [],
  get completedTodos() {
    return this.todos.filter(todo => todo.done).length;
  },
});

function App() {
  const snap = useSnapshot(state);
  const addTodo = () => {
    const newTodo = prompt('Enter a new to-do:');
    if (newTodo) {
      state.todos.push({ text: newTodo, done: false });
    }
  };
  return (
    <div>
      <h1>Count: {snap.count}</h1>
      <button onClick={() => state.count++}>Increment</button>
      <button onClick={() => state.count--}>Decrement</button>
      <hr />
      <h2>To-Do List</h2>
      <button onClick={addTodo}>Add To-Do</button>
      <ul>
        {snap.todos.map((todo, index) => (
          <li key={index}>
            <input
              type="checkbox"
              checked={todo.done}
              onChange={() => (state.todos[index].done = !todo.done)}
            />
            {todo.text}
          </li>
        ))}
      </ul>
      <p>Completed Todos: {snap.completedTodos}</p>
    </div>
  );
}
export default App;

Testing a Valtio-powered Component
Let’s consider a simple example:

import { proxy, useSnapshot } from 'valtio';

const state = proxy({
  count: 0,
  increment() {
    state.count++;
  },
});

function Counter() {
  const snap = useSnapshot(state);
  return (
    <div>
      <p>Count: {snap.count}</p>
      <button onClick={state.increment}>Increment</button>
    </div>
  );
}

Now, let’s write a unit test for it:

import { render, screen, fireEvent } from '@testing-library/react';
import { proxy } from 'valtio';
import Counter from './Counter';

test('renders counter and increments count on button click', () => {
  // Create a proxy for testing
  const state = proxy({ count: 0 });

  // Render the component with the test proxy
  render(<Counter state={state} />);
  // Get references to the elements
  const countElement = screen.getByText(/Count: 0/i);
  const buttonElement = screen.getByRole('button');
  // Assert initial state
  expect(countElement).toBeInTheDocument();
  expect(countElement.textContent).toBe('Count: 0');
  // Simulate button click
  fireEvent.click(buttonElement);
  // Assert updated state
  expect(countElement.textContent).toBe('Count: 1');
});

Key Points:

Create a Test Proxy: Instead of using your production state, create a simple proxy specifically for testing.
Provide the Proxy to Your Component: Pass the state proxy as a prop to your Counter component.
Test User Interactions: Use RTL’s fireEvent to simulate user actions (like button clicks) and then assert that the UI updates as expected.

Best Practices:

Focus on Behavior: Test how the component behaves when its underlying Valtio state changes, rather than testing the internals of Valtio itself.
Isolate Components: If your component relies on other components that use Valtio, consider mocking those dependencies to keep your tests focused.
Test Edge Cases: Test scenarios like initial state, state updates, and error handling.
Leverage RTL Utilities: Utilize the full power of React Testing Library’s screen object and query methods for interacting with and asserting on your component's DOM.
Detailed Comparison Table:

A closer look at how Valtio Differs from Other Libraries():

1. Reactive State Management Valtio: Valtio uses JavaScript Proxies to create reactive state objects. This means that any changes to the state automatically trigger re-renders of the components that use that state, without the need for explicit subscriptions or actions.

Other Libraries:

Redux: Uses a more traditional approach with actions and reducers to manage state changes. Requires boilerplate code for actions, reducers, and dispatching.
MobX: Uses observables to track state changes and reactions. While it provides automatic reactivity, it requires decorators or specific methods to define observables and actions.
Zustand: Uses hooks to manage state and provides a simple API. Reactivity is handled manually through hooks.
Jotai: This library uses atoms and hooks to manage state with a minimal API. Atom updates and hooks achieve reactivity.

1. API Simplicity and Minimalism Valtio: Offers a very minimalistic API. The primary functions are proxy for creating reactive state objects and useSnapshot for using state within components.

Other Libraries:

Redux: The API is extensive, involving actions, reducers, middleware, and selectors. It can be overwhelming for new users due to its verbosity.
MobX: While powerful, MobX’s API includes observables, actions, reactions, and computed values, which can be complex to understand and use effectively.
Zustand: Provides a straightforward API but requires manual reactivity management through hooks.
Jotai: Also offers a minimal API with atoms and hooks, but the concept of atoms may introduce a slight learning curve.

1. Performance and Granular Updates Valtio: Valtio’s Proxy-based reactivity allows for fine-grained updates. Only the parts of the state that change will trigger re-renders, optimizing performance.

Other Libraries:

Redux: State updates can be optimized with selectors and middleware, but all updates go through the central store, which can introduce performance bottlenecks if not managed carefully.
MobX: Provides fine-grained reactivity through observables and reactions, making it very performant in handling complex state changes.
Zustand: Achieves good performance through hook-based state management but requires manual optimization for fine-grained updates.
Jotai: Allows for granular updates by splitting state into atoms, but managing many atoms can become complex.

1. TypeScript Support Valtio: Has excellent TypeScript support, making it easy to define and use type-safe state objects.

Other Libraries:

• ** Redux*: Provides strong TypeScript support, but the extensive boilerplate can make type definitions cumbersome. **MobX*: Good TypeScript support, though decorators can complicate type definitions.
• ** Zustand**: Offers good TypeScript support with simple type definitions.
• ** Jotai**: Provides strong TypeScript support with straightforward type-safe atoms.

Conclusion:
Valtio’s simplicity and reactivity make it an excellent choice for state management in React applications. By combining Valtio with React Testing Library and Jest, you can ensure your state management logic is robust and reliable. This article has demonstrated how to set up and write unit tests for both synchronous and asynchronous Valtio states, providing a solid foundation for testing your Valtio-based state management.