UseSyncExternalStore.js — react Source File

Source Code

/**
 * 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';

const {useState, useEffect, useSyncExternalStore} = React;

// Create a simple external store for demonstratio
function createStore<T>(initialValue: T): {
  subscribe: (cb: () => void) => () => any,
  getSnapshot: () => T,
  setValue: (newValue: T) => void,
} {
  let value = initialValue;
  const subscribers = new Set<() => void>();

  return {
    subscribe(callback) {
      subscribers.add(callback);
      return () => subscribers.delete(callback);
    },
    getSnapshot() {
      return value;
    },
    setValue(newValue) {
      value = newValue;
      subscribers.forEach(callback => callback());
    },
  };
}

const counterStore = createStore(0);
const themeStore = createStore('light');

export default function UseSyncExternalStore(): React.Node {
  return (
    <>
      <h2>useSyncExternalStore()</h2>
      <SingleHookCase />
      <HookTreeCase />
      <MultipleStoresCase />
    </>
  );
}

function SingleHookCase(): React.Node {
  const count = useSyncExternalStore(
    counterStore.subscribe,
    counterStore.getSnapshot,
  );

  return (
    <div>
      <h3>Single hook case</h3>
// ... (74 more lines)