[FIXED] How to make react components communicate each others in large component tree

Issue

In my react app, I have some complex component tree.

In this component tree, I have a <Footer/> component with buttons. I also have <SomeComponent/> component elsewhere in the tree. This component is actually loaded from some dynamic code and is not always the same (similar to some widget engine, where the container is handled by the app engine, and the content is dynamically loaded). It means the context has no knowledge of what are actually the components.

In order to plug everything else, I have a custom react context that holds some fields and methods, which is exposed trough a custom useMyContext hook.

This is working quite well except one remaining issue :

In my <Footer /> I have a button that should call something inside the <SomeComponent/> component. As an example I may have a 'Refresh' button that should ask the component to get latest data.

Basically I have this react tree:

• App
  • SomeContextProvider
    • Footer
      • RefreshButton
    • Deep/Nested/Component/Structure
      • SomeComponent
        • (contains a refresh function)

How can I call the refresh function in my component from the footer ?

I tried to play with forwarding refs and useImperativeHandler hook, which may work, but the deep nesting of component tree leads to a big mess of forwarding refs.

I also tried to extend the context provider, but I didn't found a way to "reverse" the callback (context can react to Refresh button action, but I cannot react to this in sibling branch of the component tree).

How could I handle this ?

PS: if it matters, I'm using react 16.13.1 and typescript 4.5

Solution

I think I have the start of a clean solution.

Basically, I can handle my scenario by implementing a subscribe/unsubscribe pattern hold by by app context.

This way I can emit some kind of event from my outer context, and let components in the tree subscribe and handle the events as needed.

Some repro : https://codesandbox.io/s/infallible-chaplygin-79c3gq?file=/src/App.tsx.

Relevant parts below:

Custom react context

type Subscribe = (cb: () => void) => () => void;

type AppContextData = {
  subscribe: Subscribe;
  onSubmit: () => void;
};

const AppContext = createContext<AppContextData | undefined>(undefined);

const useAppContext = (): AppContextData => {
  const context = useContext(AppContext);
  if (!context)
    throw new Error(`useAppContext must be used within a AppContextProvider`);

  return context;
};

Container component

const AppContextProvider: React.FC<PropsWithChildren<{}>> = ({ children }) => {
  const subscribtions: (() => void)[] = [];

  const subscribe: Subscribe = (cb) => {
    subscribtions.push(cb);
    return () => {
      subscribtions.splice(subscribtions.indexOf(cb), 1);
    };
  };

  const emitSubmit = () => {
    subscribtions.forEach((cb) => cb());
  };

  const appContext: AppContextData = {
    subscribe,
    onSubmit: emitSubmit
  };

  return (
    <AppContext.Provider value={appContext}>{children}</AppContext.Provider>
  );
};

App

export default function App() {
  return (
    <AppContextProvider>
      <div className="App">
        <Main />
        <Footer />
      </div>
    </AppContextProvider>
  );
}

And finally, subscription and submission trigger:

Component with button

const Footer: React.VFC = () => {
  const { onSubmit } = useAppContext();

  return <button onClick={onSubmit}>Submit</button>;
};

Component that subscribes (and unsubscribe thanks to react effect)

const Main: React.VFC = () => {
  const [myString, setMyString] = useState("initial");

  const context = useAppContext();

  useEffect(() => {
    return context.subscribe(() => setMyString("from context"));
  }, [context]);

  return <p>{myString}</p>;
};

Answered By - Steve B
Answer Checked By - - Willingham (ReactFix Volunteer)