Reducing React Re-renders with Fusion Slice Subscriptions

The problem: one state change, too many re-renders

Your React component re-renders every time the global state changes, even when the piece of state it displays stays the same. In a component tree backed by a centralized store, that pattern turns a simple notification counter update into a cascade of unnecessary renders across unrelated UI.

Slice-based subscriptions aim to stop that cascade by letting a component subscribe only to the state slice it actually reads. The trade-off is selector stability: if the selector returns a new object or array reference on every call, the optimization can disappear or even make things worse.

What a slice subscription does

A store holds the global state tree. A slice is a subset of that tree, such as the user profile or the notification count. A selector is a function that receives the full state and returns the slice a component needs. When the store updates, the subscription re-renders the component only if the selected slice changed by reference.

This is useful when many components share one store but display different parts of it. It is less useful when components need to be tested in isolation, because each component remains coupled to the global store shape.

Worked example: subscribing to a user slice

Version note: this draft describes the slice-subscription pattern as presented in the architecture notes. Confirm the exact import path, hook name, and equality behavior for your installed Fusion version before copying the example.

import { useFusion } from '@fusion/react';

type AppState = {
  user: { id: string; name: string };
  notifications: number;
};

const UserName = () => {
  const user = useFusion((state: AppState) => state.user);
  return {user.name};
};

const NotificationBadge = () => {
  const count = useFusion((state: AppState) => state.notifications);
  return {count};
};

Here UserName should not re-render when notifications changes, because its selector returns the user object only.

The risk is an unstable selector:

// Risk: new object reference every time the store updates
const userAndTime = useFusion((state) => ({
  user: state.user,
  timestamp: Date.now(),
}));

If the subscription compares selector results by reference, that new object forces a re-render even when user did not change.

Expected check

Open React DevTools Profiler, record a session, and update notifications from a component unrelated to UserName. If UserName still highlights as committing, the selector is likely returning a new reference or the subscription is too broad.

Risk: changing selector logic after deployment can silently reintroduce re-renders without any obvious error.

Trade-offs: testability and boilerplate

Global stores make individual components harder to test in isolation because rendering a component may require initializing or mocking the full store. The architecture also typically requires action definitions and reducer logic, which adds boilerplate compared with local component state.

For simple UI, local state or a context provider may be cheaper. Slice subscriptions pay off when store updates are frequent and components are numerous.

Practical check before you adopt

1. Identify state that updates frequently but is read by only a few components.
2. Write a selector that returns a primitive or a stable object reference.
3. Profile with React DevTools before and after switching to the slice subscription.
4. Confirm that unrelated store updates no longer trigger commits in the subscribed component.

If the profiler shows no improvement, or if the selector must compute new arrays on every call, keep the component local or memoize the selector result before adopting a global slice subscription.