Integrate with External State Managers Using useSyncExternalStore

import React, { useSyncExternalStore, useState } from 'react';

// --- A simple external store implementation ---
// (This could be any external state management library or browser API)
const createStore = (initialState) => {
  let state = initialState;
  const listeners = new Set();

  return {
    getState: () => state,
    subscribe: (listener) => {
      listeners.add(listener);
      return () => listeners.delete(listener); // Unsubscribe function
    },
    setState: (newState) => {
      state = { ...state, ...newState };
      listeners.forEach((listener) => listener());
    },
  };
};

const myExternalStore = createStore({ count: 0, message: 'Hello' });

// --- React Component using useSyncExternalStore ---
function CounterWithExternalStore() {
  // Subscribe to the external store
  const state = useSyncExternalStore(
    myExternalStore.subscribe, // How to subscribe to changes
    myExternalStore.getState   // How to get the current snapshot
  );

  const increment = () => {
    myExternalStore.setState({ count: state.count + 1 });
  };

  const changeMessage = () => {
    myExternalStore.setState({ message: state.message === 'Hello' ? 'World' : 'Hello' });
  };

  return (
    <div style={{ padding: '20px', border: '1px solid #eee', borderRadius: '8px' }}>
      <h3>External Store Integration</h3>
      <p>Count: <strong>{state.count}</strong></p>
      <p>Message: <strong>{state.message}</strong></p>
      <button onClick={increment} style={{ marginRight: '5px' }}>Increment Count</button>
      <button onClick={changeMessage}>Toggle Message</button>
    </div>
  );
}

// Usage example:
// function App() {
//   return <CounterWithExternalStore />;
// }