@types/use-sync-external-store

What is @types/use-sync-external-store?

The @types/use-sync-external-store package provides TypeScript type definitions for the useSyncExternalStore hook, which is a part of React's experimental API for subscribing to external stores. This hook allows you to synchronize your component's state with an external store without causing unnecessary re-renders, making it particularly useful for integrating non-React state management libraries with React components.

What are @types/use-sync-external-store's main functionalities?

Type-safe integration with external stores

This code demonstrates how to create a custom hook that uses useSyncExternalStore to subscribe to an external store. The hook takes a store object with subscribe and getState methods, subscribes to the store, and returns the current state. TypeScript types ensure the integration is type-safe.

import { useSyncExternalStore } from 'use-sync-external-store';

function useCustomStore(store) {
  const state = useSyncExternalStore(
    store.subscribe,
    store.getState
  );
  return state;
}

Other packages similar to @types/use-sync-external-store

zustand

Zustand is a state management library that offers a similar functionality to useSyncExternalStore by allowing you to create global state within your app and access it in any component. Unlike useSyncExternalStore, which is a hook for integrating with external stores, Zustand provides its own state management solution.

redux

Redux is a predictable state container for JavaScript apps, often used with React. It can be integrated with React components using the react-redux package. While Redux itself is not a hook, react-redux offers the useSelector hook, which can be seen as an alternative to useSyncExternalStore for subscribing to Redux store changes in a React component.

mobx-react

MobX-react integrates MobX with React components. Similar to useSyncExternalStore, it allows for efficient updates by selectively re-rendering components when the data they depend on changes. However, MobX-react focuses on observable data sources and automatic dependency tracking, offering a different approach to state management compared to the manual subscription model of useSyncExternalStore.

README

Installation

npm install --save @types/use-sync-external-store

Summary

This package contains type definitions for use-sync-external-store (https://github.com/facebook/react#readme).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/use-sync-external-store.

Additional Details

• Last updated: Tue, 07 Nov 2023 15:11:36 GMT
• Dependencies: none

Credits

These definitions were written by eps1lon, and Mark Erikson.