useEffect(() => {
    eventBus.on("update", setData);
    return () => eventBus.off("update", setData);
}, []);

pnpm i zustand

import { useBroadcast } from '@/store/useBroadcast';
import { useEffect } from 'react';

export default function Receiver() {
	const { registerCallback, unregisterCallback } = useBroadcast();

	useEffect(() => {
	    const handleMessage = (message) => {
	        if (message.action == 'A') {
		        // DO A
	        }
	        if (message.action == 'B') {
	            // DO B
	        }
	    };
	    registerCallback(handleMessage);
	    return () => {
	        unregisterCallback();
	    };
	}, [registerCallback, unregisterCallback]);

	return;
}

// @/store/useBroadcast.js
import { create } from 'zustand';

export const useBroadcast = create((set, get) => ({
    callbacks: [],

    registerCallback: (callback) => {
        set((state) => ({
            callbacks: [...state.callbacks, callback],
        }));
    },

    broadcast: (message) => {
        get().callbacks.forEach((callback) => callback(message));
    },

    unregisterCallback: (callback) => {
        set((state) => ({
            callbacks: state.callbacks.filter((cb) => cb !== callback),
        }));
    },
}));

// @/store/useEvent.js
import { create } from 'zustand';

export const useEvent = create((set, get) => ({
    listeners: {},

    on: (eventName, listener) => {
        set((state) => ({
            listeners: {
                ...state.listeners,
                [eventName]: [...(state.listeners[eventName] || []), listener],
            },
        }));
    },

    emit: (eventName, ...args) => {
        const listeners = get().listeners[eventName] || [];
        listeners.forEach((listener) => listener(...args));
    },

    off: (eventName, listener) => {
        set((state) => ({
            listeners: {
                ...state.listeners,
                [eventName]: (state.listeners[eventName] || []).filter((l) => l !== listener),
            },
        }));
    },
}));

// @/store/useFunction.js
import { create } from 'zustand';

export const useFunction = create((set, get) => ({
    functions: {},

    registerFunction: (name, fn) => {
        set((state) => ({
            functions: {
                ...state.functions,
                [name]: fn,
            },
        }));
    },

    callFunction: (name, ...args) => {
        const { functions } = get();
        const targetFn = functions[name];

        if (typeof targetFn === 'function') {
            return targetFn(...args);
        }
        return null;
    },

    hasFunction: (name) => {
        return typeof get().functions[name] === 'function';
    },
}));

import { useBroadcast } from '@/store/useBroadcast';

export default function Sender() {
	const { broadcast } = useBroadcast();
	return <button onClick={()=>broadcast({action:"A"})}></button>
}

import { useEvent } from '@/store/useEvent';
import { useEffect } from 'react';

export default function Receiver() {
    const { on, off } = useEvent();

    useEffect(() => {
        const handleCustomEvent = (data) => {
            if (data.action === 'A') {
                // DO A
            }
            if (data.action === 'B') {
                // DO B
            }
        };

        on('customEvent', handleCustomEvent);
      
        return () => {
            off('customEvent', handleCustomEvent);
        };
    }, [on, off]);

    return null;
}

import { useEvent } from '@/store/useEvent';

export default function Sender() {
    const { emit } = useEvent();
  
    return <button onClick={() => emit('customEvent', { action: 'A' })}></button>;
}

import { useFunction } from '@/store/useFunction';
import { useEffect } from 'react';

export default function Provider() {
    const { registerFunction } = useFunction();

    useEffect(() => {
        registerFunction('greet', (name) => {
            return `Hello, ${name}!`;
        });

        registerFunction('sum', (a, b) => {
            return a + b;
        });
    }, [registerFunction]);

    return null;
}

import { useFunction } from '@/store/useFunction';

export default function Caller() {
    const { callFunction } = useFunction();

    return (
        <div>
            <button onClick={() => console.log(callFunction('greet', 'Alice'))}>
                Say Hello
            </button>
            <button onClick={() => console.log(callFunction('sum', 5, 10))}>
                Add Numbers
            </button>
        </div>
    );
}