DEV Community: Guhaprasaanth Nandagopal

Valtio: Unveiling the State Management Ninja with Bun and Vite

Guhaprasaanth Nandagopal — Sat, 13 Jul 2024 04:03:48 +0000

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:

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.

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.

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:

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.
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.
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.
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:

Reactive State:
Valtio creates reactive state objects using JavaScript proxies. This ensures that state changes are automatically tracked and propagated to the relevant components.
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.
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.
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.
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:

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.
Complex State Dependencies:
In applications with complex state dependencies, Valtio’s reactive state management ensures efficient updates and minimizes unnecessary re-renders.
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.
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

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(

);

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:

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

Primary Components of Valtio

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!'
});

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>
  );
};

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}`);
});

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
});

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:

Reactive State: Valtio uses JavaScript Proxies to create reactive state objects, which automatically trigger re-renders in components when the state changes.
Proxies: Proxies intercept interactions with state objects, allowing Valtio to track and manage state changes efficiently.
Snapshots: Snapshots provide a way to use and observe the current state in React components.
Derived State: Derived state allows the creation of computed values based on the reactive state.
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:

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;

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;

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

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;

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;

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():

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.

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.

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.

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.

Object-Based UI State Management vs. JavaScript Proxy-Based UI State Management

Guhaprasaanth Nandagopal — Sat, 13 Jul 2024 02:33:56 +0000

State management is a critical aspect of modern UI development, especially as applications grow in complexity. Two popular methods for managing UI state in JavaScript applications are object-based UI state management and proxy-based UI state management. Both approaches have their advantages and trade-offs. This article delves into these two methodologies, comparing their concepts, implementation, and practical use cases, using Redux and Zustand as examples.

Object-Based UI State Management:

Object-based state management involves managing the state using plain JavaScript objects. This method typically leverages libraries like Redux, MobX, or even the Context API in React. The core idea is to have a central store (an object) that holds the application’s state, and components subscribe to changes in this state.

Key Characteristics:

Centralized Store: State is stored in a single or a few central objects.
Immutable Updates: State updates are performed immutably. Instead of modifying the existing state, a new state object is created and replaced.

Action-Based Changes: State changes are triggered by dispatching actions (in libraries like Redux), which describe the changes to be made.

Selectors: Functions that derive specific pieces of state from the central store, allowing components to subscribe to only the data they need.

Advantages:

Predictability: Clear flow of data and state transitions make it easy to reason about the state changes.

Debugging: Tools like Redux DevTools provide powerful debugging capabilities, showing the state before and after each action.

Testing: The separation of actions and reducers (or similar constructs) facilitates easier unit testing.
Disadvantages:

Boilerplate Code: Often involves writing more code (actions, reducers, selectors), which can be verbose and cumbersome.

Performance: Frequent state updates can lead to performance bottlenecks if not managed properly, especially in large applications.

Example with Redux:

Redux Code Sample
1)Installation:

npm install redux react-redux

2. Defining Actions:

// actions.js
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

export const increment = () => ({
  type: INCREMENT
});

export const decrement = () => ({
  type: DECREMENT
});

3. Creating Reducers:

// reducers.js
import { INCREMENT, DECREMENT } from './actions';

const initialState = {
  count: 0
};
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return { ...state, count: state.count + 1 };
    case DECREMENT:
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};
export default counterReducer;

4. Setting Up the Store

// store.js
import { createStore } from 'redux';
import counterReducer from './reducers';

const store = createStore(counterReducer);
export default store;

5. Connecting React Components

// App.js
import React from 'react';
import { Provider, useSelector, useDispatch } from 'react-redux';
import store from './store';
import { increment, decrement } from './actions';

const Counter = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
};
const App = () => (
  <Provider store={store}>
    <Counter />
  </Provider>
);
export default App;

Proxy-Based UI State Management

Proxy-based state management leverages the Proxy object in JavaScript, which allows for the creation of objects with custom behavior for fundamental operations like getting and setting properties. Libraries like Vue 3 (with its Composition API and reactive system) and Immer use Proxies to achieve reactivity and immutability.

Key Characteristics:

Reactive State: State is made reactive by wrapping objects in a Proxy, which intercepts operations and triggers updates.

Transparent Mutations: State can be mutated directly, and the Proxy ensures that the changes are tracked and propagated.

Minimal Boilerplate: Direct mutations reduce the need for boilerplate code, making the development process more straightforward.

Advantages:

Simplicity: Allows for direct state mutations, reducing the need for boilerplate code.

Reactivity: Automatically tracks dependencies and updates, providing a responsive UI without manual subscription management.

Performance: Efficiently tracks and updates only the parts of the state that change.

Disadvantages:

Complexity in Debugging: Debugging can be more challenging due to the implicit nature of reactivity.

Learning Curve: Understanding Proxies and their behavior can be more difficult for developers unfamiliar with this concept.

Example with Valtio Composition API:

1. Valtio Code Sample
Installation

npm install valtio

2. Creating State

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

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

3. Creating Actions

// actions.js
import state from './state';

export const increment = () => {
  state.count += 1;
};
export const decrement = () => {
  state.count -= 1;
};

4. Connecting React Components

// App.js
import React from 'react';
import { useSnapshot } from 'valtio';
import state, { increment, decrement } from './state';

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

Comparison and Use Cases

Predictability and Debugging:

Object-based state management offers better predictability and easier debugging with tools like Redux DevTools.
Proxy-based state management can be less predictable due to the implicit reactivity, making debugging more complex.
Boilerplate and Development Speed:
Object-based state management often requires more boilerplate code, which can slow down development.
Proxy-based state management simplifies the code by allowing direct mutations, speeding up the development process.

Performance:

Both methods can be performant if used correctly. Object-based management can suffer from performance issues if the state tree is large and frequently updated.

Proxy-based management can provide efficient updates by tracking only the necessary state changes.
Learning Curve:
Object-based state management may be easier for developers familiar with traditional Redux-like patterns.
Proxy-based state management, while powerful, requires understanding Proxies and reactive patterns, which can have a steeper learning curve.

Use Cases:

Object-Based: Ideal for applications where state transitions need to be explicitly managed and debugged, such as complex enterprise applications.

Proxy-Based: Suitable for applications where ease of state management and reactivity are prioritized, such as real-time data dashboards or interactive interfaces.

Conclusion
Both Redux and Valtio offer powerful state management solutions with distinct advantages. Redux excels in predictability and tooling for complex applications, while Valtio provides simplicity and automatic reactivity for straightforward state management. Choosing the right tool depends on your application’s needs and your team’s familiarity with the respective libraries.

Remixed Relay: Evolution of React Server Component

Guhaprasaanth Nandagopal — Fri, 12 Jul 2024 03:14:02 +0000

React Server Components (RSC) represents a significant advancement in how server-rendered content is handled in React applications. The concept of React Server Components draws inspiration from various previous technologies and patterns, particularly Relay. Relay , a JavaScript framework for building data-driven React applications, provided foundational concepts that have influenced the development of React Server Components. This article delves into how React Server Components evolved from Relay, highlighting the similarities, differences, and advancements.

Understanding Relay
What is Relay?
Relay is a JavaScript framework developed by Facebook (now Meta) for managing and fetching GraphQL data in React applications. It was designed to handle complex data requirements and provide a highly optimized data-fetching layer for React.

Key Features of Relay
GraphQL Integration: Relay works seamlessly with GraphQL, allowing for precise data fetching and efficient updates.

Declarative Data Fetching: Components declare their data dependencies using GraphQL fragments, making data requirements explicit and co-located with the components.

Optimistic Updates: Relay supports optimistic UI updates, allowing the UI to reflect changes before the server confirms them.

Efficient Data Fetching: Relay minimizes over-fetching and under-fetching by composing multiple data requirements into a single query.

The Concept of Server Components
What are React Server Components?
React Server Components (RSC) allow developers to build components that run on the server and send HTML to the client. This approach aims to optimize server-side rendering (SSR) by splitting the rendering workload between the server and the client.

Key Features of React Server Components*
Server-Side Execution: Components can be executed on the server, reducing the client-side JavaScript bundle size.
Direct Data Access: Server Components can directly access server-side data sources, such as databases or APIs, without additional client-side data fetching.

Seamless Integration: RSC can be seamlessly integrated with client components, enabling a hybrid rendering model.

Improved Performance: By offloading rendering to the server, React Server Components can improve the initial load performance and SEO.
Evolution from Relay to React Server Components

**Similarities:

Declarative Data Requirements: Both Relay and React Server Components emphasize the declarative nature of data requirements. In Relay, components declare their GraphQL fragments, while in RSC, server components can directly fetch data and render HTML.

Optimized Data Fetching: Relay’s efficient data fetching mechanism influenced RSC’s ability to directly access and fetch data on the server, reducing the need for multiple client-side requests.
Component Co-location: In both Relay and RSC, data fetching logic is co-located with the components, making the data dependencies explicit and easier to manage.

Differences:
Rendering Paradigm: Relay focuses on optimizing client-side data fetching and updates using GraphQL, while React Server Components shift part of the rendering workload to the server, sending pre-rendered HTML to the client.

Server-Side Execution: Relay operates entirely on the client side, fetching data and updating the UI. RSC executes components on the server, leveraging server resources to generate HTML and send it to the client.

Data Fetching: Relay relies on GraphQL for data fetching, requiring a GraphQL server and schema. RSC can fetch data from any server-side data source, including REST APIs, databases, or other services, without being tied to GraphQL.

Advancements in React Server Components
Simplified Data Access: RSC simplifies data access by allowing server-side code to fetch data directly, avoiding the need for additional client-side data-fetching logic.

Reduced Client-Side Overhead: By moving part of the rendering logic to the server, RSC reduces the amount of JavaScript that needs to be executed on the client, leading to improved performance and faster initial loads.

Hybrid Rendering: RSC supports a hybrid rendering model where server components can be combined with client components, providing flexibility in rendering strategies.

Improved SEO: Server-side rendering with RSC improves SEO by delivering pre-rendered HTML content to search engines, making it easier for them to crawl and index the content.

Example: Transition from Relay to React Server Components
Relay Example
import { graphql, QueryRenderer } from 'react-relay';
import environment from './environment';

const App = () => (
  <QueryRenderer
    environment={environment}
    query={graphql`
      query AppQuery {
        user(id: "1") {
          name
        }
      }
    `}
    render={({ error, props }) => {
      if (error) {
        return <div>Error!</div>;
      }
      if (!props) {
        return <div>Loading...</div>;
      }
      return <div>User: {props.user.name}</div>;
    }}
  />
);

export default App;

How Relay’s Innovations Were Brought to React Through React Server Components

Relay introduced several groundbreaking features and methodologies for data handling and fetching in React applications. These features provided developers with a robust framework for managing complex data dependencies and optimizing client-side rendering.

React Server Components (RSC) have taken some of these innovations and integrated them into a server-rendered paradigm, enhancing the capabilities of React applications. This section emphasizes how the core functionalities of Relay have been adapted and evolved into React Server Components.

1) Declarative Data Fetching: From Relay to React Server Components
Relay’s Approach
Relay: In Relay, data fetching is declarative. Each component specifies its data requirements using GraphQL fragments, which are then composed into a single query by Relay. This approach ensures that data dependencies are clear and co-located with the component that uses them.

import { graphql, QueryRenderer } from 'react-relay';

const UserComponent = () => (
  <QueryRenderer
    environment={environment}
    query={graphql`
      query UserComponentQuery {
        user(id: "1") {
          name
          email
        }
      }
    `}
    render={({ error, props }) => {
      if (error) {
        return <div>Error!</div>;
      }
      if (!props) {
        return <div>Loading...</div>;
      }
      return (
        <div>
          <h1>{props.user.name}</h1>
          <p>{props.user.email}</p>
        </div>
      );
    }}
  />
);

export default UserComponent;

How was it solidified in RSC: React Server Components also use a declarative approach to data fetching, but with a key difference: data fetching occurs on the server. This allows for direct and efficient access to server-side resources without additional client-side requests.

// UserComponent.server.js
import React from 'react';

const fetchUserData = async (id) => {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
};

const UserComponent = async ({ id }) => {
  const user = await fetchUserData(id);
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
};

export default UserComponent;

2) Optimized Data Fetching and Minimization
Relay’s Approach
Relay: Relay optimizes data fetching by composing multiple component queries into a single network request. This minimizes the number of requests and ensures that only the required data is fetched.

import { commitMutation, graphql } from 'react-relay';

function updateUser(environment, userId, newName) {
  const mutation = graphql`
    mutation UpdateUserMutation($input: UpdateUserInput!) {
      updateUser(input: $input) {
        user {
          id
          name
        }
      }
    }
  `;

  const variables = {
    input: {
      id: userId,
      name: newName,
    },
  };

  commitMutation(environment, {
    mutation,
    variables,
    optimisticResponse: {
      updateUser: {
        user: {
          id: userId,
          name: newName,
        },
      },
    },
    onCompleted: (response, errors) => {
      console.log('Mutation completed');
    },
    onError: (err) => console.error(err),
  });
}

How was it solidified in RSC: React Server Components leverage the server’s ability to directly fetch and render data, eliminating the need for multiple client-side data fetching operations. This approach inherently minimizes network requests and optimizes the data fetching process.

3) Component Co-location and Data Dependency Management
Relay’s Approach
Relay: Data requirements are co-located with the components that use them, making it easier to manage and understand data dependencies.

const UserFragment = graphql`
  fragment UserComponent_user on User {
    name
    email
  }
`;

const UserComponent = ({ user }) => (
  <div>
    <h1>{user.name}</h1>
    <p>{user.email}</p>
  </div>
);

export default createFragmentContainer(UserComponent, {
  user: UserFragment,
});

How was it solidified in RSC: In React Server Components, data fetching and rendering logic are similarly co-located. This maintains clarity and modularity, allowing developers to understand and manage data dependencies within the component itself.

// UserComponent.server.js
const fetchUserData = async (id) => {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
};

const UserComponent = async ({ id }) => {
  const user = await fetchUserData(id);
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
};

export default UserComponent;

4) Improved Performance and SEO:
Relay’s Approach
Relay: Relay improves client-side performance by reducing over-fetching and providing mechanisms for efficient updates. However, because it operates on the client side, initial loading times and SEO can still be challenging.

How was it solidified in RSC: React Server Components significantly enhance performance and SEO by rendering components on the server. The server can send fully-rendered HTML to the client, reducing the amount of JavaScript needed on the client side and providing immediate content for search engines to crawl.

// Server-side rendering logic
import { renderToString } from 'react-dom/server';
import App from './App';

const serverRender = (req, res) => {
  const html = renderToString(<App />);
  res.send(`<!DOCTYPE html>
<html>
<head>
  <title>React Server Components</title>
</head>
    <body>
           <div id="root">${html}</div>
           <script src="/bundle.js"></script>
    </body>
</html>
`);
};

5) Hybrid Rendering Model
Relay’s Approach
Relay: While Relay focuses on client-side data management and rendering, it does not inherently support server-side rendering.

How was it solidified in RSC: React Server Components introduce a hybrid rendering model, where server-rendered components can seamlessly integrate with client-rendered components. This hybrid approach allows developers to leverage the benefits of both server-side and client-side rendering within the same application.

// App.server.js
import React from 'react';
import HeaderComponent from './HeaderComponent.server';
import FooterComponent from './FooterComponent';
import UserComponent from './UserComponent.server';

const App = () => (
  <div>
    <HeaderComponent />
    <UserComponent id="1" />
    <FooterComponent />
  </div>
);

export default App;

6) Enhanced Developer Experience
Relay’s Approach
Relay: Relay provides tools and conventions for managing GraphQL data, but it requires developers to understand and work with GraphQL schemas, queries, and mutations.

How was it solidified in RSC: React Server Components simplify the developer experience by allowing direct access to server-side data sources without requiring GraphQL. This reduces the learning curve and allows developers to use familiar REST APIs or other data sources.

7) Optimistic Updates:
Relay’s Approach
Relay: Relay supports optimistic updates, allowing the UI to be updated immediately based on an expected result while the actual mutation request is processed in the background. This feature improves the user experience by providing instant feedback.

import { commitMutation, graphql } from 'react-relay';

function updateUser(environment, userId, newName) {
  const mutation = graphql`
    mutation UpdateUserMutation($input: UpdateUserInput!) {
      updateUser(input: $input) {
        user {
          id
          name
        }
      }
    }
  `;

  const variables = {
    input: {
      id: userId,
      name: newName,
    },
  };

  commitMutation(environment, {
    mutation,
    variables,
    optimisticResponse: {
      updateUser: {
        user: {
          id: userId,
          name: newName,
        },
      },
    },
    onCompleted: (response, errors) => {
      console.log('Mutation completed');
    },
    onError: (err) => console.error(err),
  });
}

How was it solidified in RSC: React Server Components (RSC) provide a robust framework for handling optimistic updates. By leveraging server-side rendering, RSC can pre-render components with expected data changes, ensuring immediate UI feedback while maintaining consistency and integrity.


import { use, Suspense } from 'react-server-dom';

function UserComponent({ userId, optimisticData }) {
  const user = use(fetchUser(userId));
  return (
    <div>
      <h1>{optimisticData ? optimisticData.name : user.name}</h1>
      {optimisticData ? null : <p>Loading...</p>}
    </div>
  );
}

async function fetchUser(userId) {
  const response = await fetch(`/api/users/${userId}`);
  return response.json();
}

async function updateUser(userId, newName) {
  // Simulate a delay for updating user
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return { id: userId, name: newName };
}

// Example usage with optimistic UI
function App({ userId }) {
  const optimisticData = { name: 'Optimistic Name' }; // Mock optimistic data

  return (
    <Suspense fallback={<p>Loading...</p>}>
      <UserComponent userId={userId} optimisticData={optimisticData} />
    </Suspense>
  );
}

8) Subsequent Data Fetching
Relay optimizes subsequent data fetching through:

Declarative Data Requirements: Components declare their data needs, and Relay fetches the necessary data.
Query Batching: Relay batches multiple GraphQL queries into a single request, reducing network overhead.
Caching: Relay caches query results, minimizing redundant network requests.

Automatic Refetching: Relay refetches data when variables change, keeping the UI up-to-date.

// Client-Side Data Fetching with Relay
import { useQueryLoader, usePreloadedQuery } from 'react-relay/hooks';
import { MyQuery } from './MyQuery';

function MyComponent() {
  const [queryReference, loadQuery] = useQueryLoader(MyQuery);

  useEffect(() => {
    loadQuery({ id: 'some-id' });
  }, [loadQuery]);

  if (!queryReference) {
    return <div>Loading...</div>;
  }

  return <DisplayData queryReference={queryReference} />;
}

function DisplayData({ queryReference }) {
  const data = usePreloadedQuery(MyQuery, queryReference);
  return <div>{data.user.name}</div>;
}

How was it solidified in RSC: React Server Components (RSC) take the concept of subsequent data fetching further by performing data fetching on the server. This approach offloads the responsibility of data fetching from the client to the server, enhancing performance and reducing client-side complexity.

import { use } from 'react-server-dom';

function UserComponent({ userId }) {
  const user = use(fetchUser(userId));
  return <div>{user.name}</div>;
}

async function fetchUser(userId) {
  const response = await fetch(`/api/users/${userId}`);
  return response.json();
}

export default UserComponent;

Conclusion:
Relay introduced several advanced features that have profoundly influenced the development of data-driven React applications. These features, including declarative data fetching, optimized data fetching and minimization, component co-location, and data dependency management, have set a high standard for managing complex data needs in React.

React Server Components have taken these foundational concepts and adapted them to enhance server-side rendering capabilities. By leveraging server-side execution, React Server Components offer significant improvements in performance, SEO, and developer experience. The transition from Relay’s client-side optimizations to RSC’s server-side capabilities represents a natural evolution, providing developers with powerful tools to build more efficient and performant applications.

As React continues to evolve, the integration of these advanced features into the core framework through React Server Components demonstrates React’s commitment to addressing the challenges of modern web development and providing inn