zustand

[jordan-choi]

zustand 라이브러리를 분석합니다 (다음주는 zod).

[56aiden90]

const createStoreImpl: CreateStoreImpl = (createState) => {
  type TState = ReturnType<typeof createState>
  type Listener = (state: TState, prevState: TState) => void
  let state: TState
  const listeners: Set<Listener> = new Set()

  const setState: StoreApi<TState>['setState'] = (partial, replace) => {
    // TODO: Remove type assertion once https://github.com/microsoft/TypeScript/issues/37663 is resolved
    // https://github.com/microsoft/TypeScript/issues/37663#issuecomment-759728342
    const nextState =
      typeof partial === 'function'
        ? (partial as (state: TState) => TState)(state)
        : partial
    if (!Object.is(nextState, state)) {
      const previousState = state
      state =
        replace ?? (typeof nextState !== 'object' || nextState === null)
          ? (nextState as TState)
          : Object.assign({}, state, nextState)
      listeners.forEach((listener) => listener(state, previousState))
    }
  }

  const getState: StoreApi<TState>['getState'] = () => state

  const getInitialState: StoreApi<TState>['getInitialState'] = () =>
    initialState

  const subscribe: StoreApi<TState>['subscribe'] = (listener) => {
    listeners.add(listener)
    // Unsubscribe
    return () => listeners.delete(listener)
  }

  const destroy: StoreApi<TState>['destroy'] = () => {
    if (import.meta.env?.MODE !== 'production') {
      console.warn(
        '[DEPRECATED] The `destroy` method will be unsupported in a future version. Instead use unsubscribe function returned by subscribe. Everything will be garbage-collected if store is garbage-collected.',
      )
    }
    listeners.clear()
  }

  const api = { setState, getState, getInitialState, subscribe, destroy }
  const initialState = (state = createState(setState, getState, api))
  return api as any
}

• type을 함수 안에 선언해서 사용하기도 하는구나
• 기본 플로우

  • createStoreImpl: 아래 함수들을 생성후 api 오브젝트로 묶어 반환.

    • setState
    • getState
    • getInitialState
    • subscribe
    • destroy

  • useStore

    • createStoreImpl을 통해 반환된 api 오브젝트를 useSyncExternalStoreWithSelector를 통해 리액트 라이프 사이클과 연결.

  • useSyncExternalStoreWithSelector

    • [Source code](https://github.com/facebook/react/blob/2e72ea8401df491c1c6aa7af80419af8e21d8cc6/packages/use-sync-external-store/src/useSyncExternalStoreWithSelector.js)
      useSyncExternalStoreWithSelector 파일 확장자가 js인데 왜 코드는 ts?
    • 리액트 기본 hook중의 하나인 useSyncExternalStore에 selector 개념을 더한 것. zustand의 장점 중 하나로 "[Renders components only on changes](https://github.com/pmndrs/zustand#:~:text=Renders%20components%20only%20on%20changes)”를 제시하고 있는데 selector를 통해 선택된 render가 가능한 것.

    /**
     * Copyright (c) Meta Platforms, Inc. and affiliates.
     *
     * This source code is licensed under the MIT license found in the
     * LICENSE file in the root directory of this source tree.
     *
     * @flow
     */
    
    import * as React from 'react';
    import is from 'shared/objectIs';
    import {useSyncExternalStore} from 'use-sync-external-store/src/useSyncExternalStore';
    
    // Intentionally not using named imports because Rollup uses dynamic dispatch
    // for CommonJS interop.
    const {useRef, useEffect, useMemo, useDebugValue} = React;
    
    // Same as useSyncExternalStore, but supports selector and isEqual arguments.
    export function useSyncExternalStoreWithSelector<Snapshot, Selection>(
      subscribe: (() => void) => () => void,
      getSnapshot: () => Snapshot,
      getServerSnapshot: void | null | (() => Snapshot),
      selector: (snapshot: Snapshot) => Selection,
      isEqual?: (a: Selection, b: Selection) => boolean,
    ): Selection {
      // Use this to track the rendered snapshot.
      const instRef = useRef<
        | {
            hasValue: true,
            value: Selection,
          }
        | {
            hasValue: false,
            value: null,
          }
        | null,
      >(null);
      let inst;
      if (instRef.current === null) {
        inst = {
          hasValue: false,
          value: null,
        };
        instRef.current = inst;
      } else {
        inst = instRef.current;
      }
    
      const [getSelection, getServerSelection] = useMemo(() => {
        // Track the memoized state using closure variables that are local to this
        // memoized instance of a getSnapshot function. Intentionally not using a
        // useRef hook, because that state would be shared across all concurrent
        // copies of the hook/component.
        let hasMemo = false;
        let memoizedSnapshot;
        let memoizedSelection: Selection;
        const memoizedSelector = (nextSnapshot: Snapshot) => {
          if (!hasMemo) {
            // The first time the hook is called, there is no memoized result.
            hasMemo = true;
            memoizedSnapshot = nextSnapshot;
            const nextSelection = selector(nextSnapshot);
            if (isEqual !== undefined) {
              // Even if the selector has changed, the currently rendered selection
              // may be equal to the new selection. We should attempt to reuse the
              // current value if possible, to preserve downstream memoizations.
              if (inst.hasValue) {
                const currentSelection = inst.value;
                if (isEqual(currentSelection, nextSelection)) {
                  memoizedSelection = currentSelection;
                  return currentSelection;
                }
              }
            }
            memoizedSelection = nextSelection;
            return nextSelection;
          }
    
          // We may be able to reuse the previous invocation's result.
          const prevSnapshot: Snapshot = (memoizedSnapshot: any);
          const prevSelection: Selection = (memoizedSelection: any);
    
          if (is(prevSnapshot, nextSnapshot)) {
            // The snapshot is the same as last time. Reuse the previous selection.
            return prevSelection;
          }
    
          // The snapshot has changed, so we need to compute a new selection.
          const nextSelection = selector(nextSnapshot);
    
          // If a custom isEqual function is provided, use that to check if the data
          // has changed. If it hasn't, return the previous selection. That signals
          // to React that the selections are conceptually equal, and we can bail
          // out of rendering.
          if (isEqual !== undefined && isEqual(prevSelection, nextSelection)) {
            return prevSelection;
          }
    
          memoizedSnapshot = nextSnapshot;
          memoizedSelection = nextSelection;
          return nextSelection;
        };
        // Assigning this to a constant so that Flow knows it can't change.
        const maybeGetServerSnapshot =
          getServerSnapshot === undefined ? null : getServerSnapshot;
        const getSnapshotWithSelector = () => memoizedSelector(getSnapshot());
        const getServerSnapshotWithSelector =
          maybeGetServerSnapshot === null
            ? undefined
            : () => memoizedSelector(maybeGetServerSnapshot());
        return [getSnapshotWithSelector, getServerSnapshotWithSelector];
      }, [getSnapshot, getServerSnapshot, selector, isEqual]);
    
      const value = useSyncExternalStore(
        subscribe,
        getSelection,
        getServerSelection,
      );
    
      useEffect(() => {
        // $FlowFixMe[incompatible-type] changing the variant using mutation isn't supported
        inst.hasValue = true;
        // $FlowFixMe[incompatible-type]
        inst.value = value;
      }, [value]);
    
      useDebugValue(value);
      return value;
    }

[jordan-choi]

Key features of Zustand

• Minimal API: Zustand has a very small and simple API, which means less code to learn and implement.
• No boilerplate code required (No complex setup): It doesn't require wrapping your entire app in providers or setting up a large configuration.
• No separate actions/reducers: Zustand combines actions and state in a single store, eliminating the need for separate action creators and reducers.
• No need for immutable update patterns: Zustand uses Immer under the hood, allowing you to write simpler update logic without manually ensuring immutability.
• Selective re-rendering: Zustand only re-renders components when their specific subscribed state changes, improving performance.
• Supports hooks out of the box
• TypeScript friendly: TypeScript types are inferred automatically.
• Can be used with or without React

What things contribute to Zustand's lightweight feature?

Zustand has small bundle size, which is typically around 1kB (minified and gzipped).

1. Minimal API
   1. Store creation: create function is used to define the store.
   2. State and actions in one place: The store contains both the state and the actions to update it.
   3. Simple updates: State updates are done using the set function.
   4. Easy consumption: The store can be used in components with a simple hook-like syntax.
   5. No boilerplate: There's no need for action creators, reducers, or context providers.
2. No dependencies: Unlike some other state management libraries (e.g., Redux, Mobx, Recoil), Zustand (and Jotai) has no significant external dependencies, reducing its overall footprint.
   - Redux: often used with additional libraries like react-redux, redux-thunk or redux-saga, reselect.
   - Mobx: core dependencies include mobx-react-lite, mobx-react
   - Recoil: Primarily depends on React itself.
3. No middleware by default: While middleware can be added, it's not required, keeping the base implementation lean.

Zustand doesn't require your app to be wrapped in context providers. How?

1. Global store
   • Instead of using React's Context API, Zustand creates a global store outside of the React component tree.
   • This store is essentially a closure (see [[Closures]]) that holds the state and methods to interact with it.
     • When you create a store with Zustand, it creates a closure that encapsulates the store's state and methods (setState, getState, getInitialState, subscribe, destroy).
     • This closure maintains access to the state even after the store creation function has finished executing.
2. Use of Hooks
   • Zustand leverages React hooks useSyncExternalStoreWithSelector.
   • This hook allows components to subscribe to an external store without needing a provider.

export function useStore<TState, StateSlice>(
	api: WithReact<ReadonlyStoreApi<TState>>,
	selector: (state: TState) => StateSlice = identity as any,
	equalityFn?: (a: StateSlice, b: StateSlice) => boolean,
) {
	...
	
	const slice = useSyncExternalStoreWithSelector(
		api.subscribe,
		api.getState,
		api.getServerState || api.getInitialState,
		selector,
		equalityFn,
	)
	
	return slice
}

3. Subscription Model
   • Zustand uses a pattern similar to PubSub pattern. Zustand implements a subscription mechanism where components can subscribe to store changes.
   • Subscription
     • When a component uses the store (useStore), it effectively subscribes to changes.
     • This is handled by the subscribe function in the store.
   • Notification
     • When the state changes (via setState), Zustand notifies all subscribers.
     • This is done by calling all registered listener functions
   • Update Propagation
     • React components re-render based on these notifications, but only if their selected slice of the state has changed.
     • Zustand doesn't broadcast the entire state to all subscribers.
       • It allows components to select only the part of the state they need, reducing unnecessary updates.
       • The useSyncExternalStoreWithSelector hook (which Zustand uses internally) helps in optimizing this selection and update process.
   • Differences from Traditional PubSub:
     • There's no separate event channel.
     • The "events" are essentially just state updates.
     • Subscribers (components) are automatically notified of all changes but can choose to react only to relevant ones.

Immutability

Zustand ensures immutability in state updates. This is achieved through its use of Immer, which is baked into Zustand's core functionality.
Here's a breakdown of how Zustand handles immutability:

• Immer integration: Immer allows you to write code that appears to mutate state directly, but actually produces a new immutable state object.
• The set function: When you use the set function to update state, Zustand automatically ensures that a new state object is created rather than mutating the existing one.

interface User {
	name: string
	age: number
}

interface UserState {
	user: User
	updateUser: (user: User) => void
}

const useUserStore = create<User>((set) => ({ 
	user: { name: 'John', age: 30 }, 
	updateName: (newName: string) => set((state) => { 
		// This looks like we're mutating state directly 
		state.user.name = newName 
		// But Zustand/Immer ensure a new immutable state is created 
	}),
	...
}))

How Zustand optimize performance despite ensuring immutability?

Zustand is optimized to only trigger re-renders for components that are subscribed to the specific parts of the state that have changed.

What happens when create is called in Zustand to create the store?

Assume that create is called for React.

1. create function is called.
   • This is the entry point for creating a Zustand store.
   • create is essentially a wrapper around createImpl.

export const create = (<T>(createState: StateCreator<T, [], []> | undefined) =>
	createState ? createImpl(createState) : createImpl) as Create

2. createImpl function is called. This function is the main interface for using the store in React components.

import { createStore } from './vanilla.ts'

const createImpl = <T>(createState: StateCreator<T, [], []>) => {
	if (
		import.meta.env?.MODE !== 'production' &&
		typeof createState !== 'function'
	) {
		console.warn(
			"[DEPRECATED] Passing a vanilla store will be unsupported in a future version. Instead use `import { useStore } from 'zustand'`.",
		)
	}
	
	const api =
		typeof createState === 'function' ? createStore(createState) : createState
		
	const useBoundStore: any = (selector?: any, equalityFn?: any) =>
		useStore(api, selector, equalityFn)
	
	Object.assign(useBoundStore, api)
	
	return useBoundStore
}

• createStore comes from the imported vanilla.ts file (Explain how it works later).

What happens when createStore is called?

When createStore is called, createStoreImpl function is called, same as create.

export const createStore = ((createState) =>
	createState ? createStoreImpl(createState) : createStoreImpl) as CreateStore

The createStore function is a crucial part of Zustand's core functionality. It's responsible for creating the actual store with its state management mechanisms.
createStore:

1. acts as a factory function that returns an object (the store API) with methods to interact with the store:
   1. setState: Updates the store's state
   2. getState: Retrieves the current state
   3. getInitialState: Gets the initial state
   4. subscribe: Adds listeners for state changes
   5. destroy (deprecated): Clears all listeners
2. calls createStoreImpl, which sets up the store's internal structure.

The createStoreImpl function sets up HERE.

const createStoreImpl: CreateStoreImpl = (createState) => {
	type TState = ReturnType<typeof createState>
	type Listener = (state: TState, prevState: TState) => void
	let state: TState
	const listeners: Set<Listener> = new Set()
	
	const setState: StoreApi<TState>['setState'] = (partial, replace) => {
		// TODO: Remove type assertion once https://github.com/microsoft/TypeScript/issues/37663 is resolved
		// https://github.com/microsoft/TypeScript/issues/37663#issuecomment-759728342
		const nextState =
			typeof partial === 'function'
				? (partial as (state: TState) => TState)(state)
				: partial
		if (!Object.is(nextState, state)) {
			const previousState = state
			state =
				replace ?? (typeof nextState !== 'object' || nextState === null)
					? (nextState as TState)
					: Object.assign({}, state, nextState)
			listeners.forEach((listener) => listener(state, previousState))
		}
	}
	
	const getState: StoreApi<TState>['getState'] = () => state
	
	const getInitialState: StoreApi<TState>['getInitialState'] = () =>
		initialState
		
	const subscribe: StoreApi<TState>['subscribe'] = (listener) => {
		listeners.add(listener)
		// Unsubscribe 
		return () => listeners.delete(listener)
	}
	
	const destroy: StoreApi<TState>['destroy'] = () => {
		if (import.meta.env?.MODE !== 'production') {
			console.warn(
				'[DEPRECATED] The `destroy` method will be unsupported in a future version. Instead use unsubscribe function returned by subscribe. Everything will be garbage-collected if store is garbage-collected.',
			)
		}
		listeners.clear()
	}
	
	const api = { setState, getState, getInitialState, subscribe, destroy }
	const initialState = (state = createState(setState, getState, api))
	return api as any
}

Lesson Learned from TypeScript friendly Zustand

Zustand is TypeScript-friendly and provides excellent type support.
Since state generic T is invariant, you have to write create<T>()(...) where T is the type of the state when using TypeScript. If not, it is inferred as unknown.

import { create } from 'zustand'

interface User {
	name: string
	age: number
}

interface UserState {
	user: User
	updateUser: (newUser: User) => void
}

const useUserStore = create<UserState>()((set) => ({
	user: {
		name: '',
		age: 0,
	},
	updateUser: (newUser: User) => set({ user: newUser }),
}))

To explore the source code of Zustand, you can see the custom type StateCreator.

export type StateCreator<
	T,
	Mis extends [StoreMutatorIdentifier, unknown][] = [],
	Mos extends [StoreMutatorIdentifier, unknown][] = [],
	U = T,
> = ((
	setState: Get<Mutate<StoreApi<T>, Mis>, 'setState', never>,
	getState: Get<Mutate<StoreApi<T>, Mis>, 'getState', never>,
	store: Mutate<StoreApi<T>, Mis>,
) => U) & { $$storeMutators?: Mos }

export interface StoreMutators<S, A> {}
export type StoreMutatorIdentifier = keyof StoreMutators<unknown, unknown>

As I've already been familiar to type definition using generic types, I'm curious �about how Zustand supports custom middlewares and their type inference.

1. Middleware input signature (Mis) and middleware output signature (Mos) represent the type of middleware that can be applied to the store and applies to the store, respectively.
2. Both are arrays of tuples, where each tuple contains a StoreMutatorIdentifier and an unknowntype.
3. The StoreMutatorIdentifier is a string literal type that identifies the middleware.

Tip: What is the deprecation process in open source library?

export function useStore<S extends WithReact<ReadonlyStoreApi<unknown>>>(
	api: S,
): ExtractState<S>

export function useStore<S extends WithReact<ReadonlyStoreApi<unknown>>, U>(
	api: S,
	selector: (state: ExtractState<S>) => U,
): U

/**
 * @deprecated The usage with three arguments is deprecated. Use `useStoreWithEqualityFn` from 'zustand/traditional'. The usage with one or two arguments is not deprecated.
 * https://github.com/pmndrs/zustand/discussions/1937
 */
export function useStore<S extends WithReact<ReadonlyStoreApi<unknown>>, U>(
	api: S,
	selector: (state: ExtractState<S>) => U,
	equalityFn: ((a: U, b: U) => boolean) | undefined,
): U

export function useStore<TState, StateSlice>(
	api: WithReact<ReadonlyStoreApi<TState>>,
	selector: (state: TState) => StateSlice = identity as any,
	equalityFn?: (a: StateSlice, b: StateSlice) => boolean,
) {
	...
}

[56aiden90]

import { create } from "zustand";
import "./App.css";

interface PersonState {
  person: {
    name?: string;
  };
  setPersonName: (name: string) => void;
}

const usePersonStore = create<PersonState>((set) => ({
  person: {
    name: 'defaultName'
  },
  setPersonName: (name) =>
    set((state) => {
// This does not trigger rerender
      state.person.name = name;
      return state;
     // This triggers rerender.
      return {
        ...state,
        person: {
          name
        }
      }
    }),
}));

function App() {
  const personName = usePersonStore((state) => state.person.name);
  const setPersonName = usePersonStore((state) => state.setPersonName);

  return (
    <>
      {personName}
      <div onClick={() => setPersonName("naaaa")}>Name</div>
    </>
  );
}

export default App;

[jordan-choi]

제가 잘못 정리한 게 맞았습니다. 어쩐지 넘 이상하다 했네요;; ai가 정리해준 내용 잘 검토해서 올리겠습니다 😅

The set function merges state at only one level. If you have a nested object, you need to merge them explicitly.

[JeGwan]

zustand 는 독일어로 상태, jotai 를 만든 카토 다이시가 제작에 참여

• 사용방식이 단순함
• 핵심 로직이 아주 적음
• 프레임워크 독립적

Core

• pub / sub 모델을 기반으로 이루어짐 (framework agnostic, React Adapter)
• 즉 리스너(subscriber)를 모아뒀다가 상태 변경시 한번에 알려줌(publisher)

React 의 hook API 에 적응한 설계 패턴 (사이드 이펙트 추가-즉시적, 삭제-콜백으로 후행적-을 제공)
추가. 콜백으로 받는 리스너의 식별자를 따로 지정하지 않고, 클로저를 이용해서 제거함수를 쉽게 제공

const subscribe = (listener, selector, equalityFn) => {
  if (selector || equalityFn) {
    return subscribeWithSelector(listener, selector, equalityFn);
  }
  listeners.add(listener);

  return () => listeners.delete(listener);
};

더 자세한건 코드 보면서 ㅎㅎ
https://ui.toast.com/posts/ko_20210812

[jordan-choi]

다음주에 상태 관리 라이브러리 페어 프로그래밍