Treeshakable

Treeshakable is a comprehensive library designed to unlock the full potential of React 18 server components. It enhances any state management library with full tree-shaking capabilities, ensuring efficient state management and reducing package size by facilitating shared state even when importing components from separate files. Additionally, it improves performance by avoiding redundant state creation steps.

If you're in need of basic global state management for your library, consider using "React18 Global Store", as its smaller npm bundle size will lead to improved performance and reduced overall bundle size.

Why Treeshakable?

In modern JavaScript applications, especially those using React, tree-shaking is a crucial optimization technique. Tree-shaking helps eliminate dead code, reducing the overall bundle size and improving load times. However, when importing components from separate files, state management libraries can create separate stores, leading to redundancy and increased package size. Additionally, the creation of multiple stores can break the functionality of the library, as different components or hooks imported from different files end up interacting with isolated stores. This issue is particularly prevalent with libraries built using Zustand and similar libraries.

Without Treeshakable:

• Importing components from different files may lead to multiple instances of the same store.
• This redundancy increases package size and memory usage.
• It can degrade performance due to unnecessary state management overhead.
• Importing components from different files may break functionality that depends on a central global store.

Treeshakable addresses these challenges by ensuring a single shared state across different imports, optimizing tree-shaking, and reducing overall package size.

For a live example demonstrating these concerns see the official website

✅ Universal Compatibility: Works with various state management libraries.

✅ Tree-Shaking Optimization: Enables full tree-shaking for efficient code splitting and reduced package size.

✅ Shared State Management: Facilitates shared state across different imports, preventing the creation of multiple stores.

✅ Create fully Treeshakable (import from treeshakable/client/loader-container)

✅ Fully TypeScript Supported

✅ Leverage the power of React 18 Server components

✅ Compatible with all React 18 build systems/tools/frameworks

✅ Documented with Typedoc (Docs)

✅ Examples for Next.js, Vite, and Remix

Please consider starring this repository and sharing it with your friends.

Getting Started

Installation

1$ pnpm add treeshakable

or

1$ npm install treeshakable

or

1$ yarn add treeshakable

Usage

Here is a basic example of how to use Treeshakable with a state management library:

1import treeshakable from "treeshakable";
2import { create } from "zustand";
3
4interface CounterState {
5  count: number;
6  setCount: (count: number) => void;
7}
8
9export const useTreeshakableCounterStore = treeshakable("counter-store", () =>
10  create<CounterState>(set => ({
11    count: 0,
12    setCount: count => set({ count }),
13  })),
14);

In this example, Treeshakable is applied as a higher-order function to enhance the Zustand store with tree-shaking capabilities.

Why use treeshakable('my-store', () => createStore(...)) and not treeshakable('my-store', createStore(...))?

The distinction here is critical:

• treeshakable('my-store', createStore(...)) would immediately invoke createStore and create the store instance during module initialization. This approach can defeat the purpose of tree-shaking because the store would be created regardless of whether it is used or not.
• treeshakable('my-store', () => createStore(...)) passes a function that returns the store instance. This approach ensures the store creation happens only once, optimizing performance and reducing bundle size through lazy initialization.

For detailed API and options, refer to the API documentation.

Motivation

I developed Treeshakable after encountering issues with importing from specific folders for better tree-shaking, which resulted in the creation of separate Zustand stores and increased package size. Treeshakable addresses this by ensuring shared state across different imports, optimizing tree-shaking, and reducing overall package size.

License

This library is licensed under the MPL-2.0 open-source license.

Please consider enrolling in our courses or sponsoring our work.

---

with 💖 by Mayank Kumar Chaudhari