BotFramework-WebChat

Using different versions of React for hosting an app with Web Chat

In Web Chat version 4.6, we migrated to React Hooks, which requires React 16.8.6 and up.

In this sample, we will show how to use Web Chat in a hosting app with React version 16.0.0, instead of the required 16.8.6.

There are several key limitations in this sample. They are outlined in this section.

How to run locally

Web Chat using React 16.8.6 hosting in an app using React 16.0.0

To run this sample, follow steps below:

  1. Clone this repository
  2. Run npm install
  3. Run npm start
  4. Browse to http://localhost:3000/

How it works

There are two packages in this monorepo:

The hosting app will create an isolated DOM element and pass it to the chat-component package. The chat component will control the rendering of the DOM element, while the hosting app controls the lifetime.

The hosting app will tell the chat component when it is time to remove the DOM element from the tree, and the chat component should stop any further rendering.

Chat component

In chat-component package, we created an entrypoint for rendering a React component to a specific DOM element. Note that we are using react-dom@16.8.6 when mounting and unmounting the component to the DOM.

import { render, unmountComponentAtNode } from 'react-dom';

function renderChatComponent(props, node) {
   render(<ChatComponent {...props} />, node);

   return () => unmountComponentAtNode(node);
}

This entrypoint will return a function, which, when called, will unmount the component. This function call can be called multiple times to update the props.

Hosting app

In the host application, we created a new component called <ChatComponentWrapper> and save the reference.

class ChatComponentWrapper extends React.Component {
   constructor(props) {
      super(props);

      this.saveChatComponentRef = ref => (this.chatComponentRef = ref);
   }

   render() {
      return <div ref={this.saveChatComponentRef} />;
   }
}

When <ChatComponentWrapper> is mounted or updated, we will call chat-component to do the rendering.

+ import renderChatComponent from 'chat-component';

  class ChatComponentWrapper extends React.Component {
    constructor(props) {
      super(props);

      this.saveChatComponentRef = ref => this.chatComponentRef = ref;
    }

+   componentDidMount() {
+     this.componentDidMountOrUpdate();
+   }

+   componentDidUpdate() {
+     this.componentDidMountOrUpdate();
+   }

+   componentDidMountOrUpdate() {
+     renderChatComponent(this.props, this.chatComponentRef);
+   }

    render() {
      return (
        <div ref={ this.saveChatComponentRef } />
      );
    }
  }

When it is time to unmount, we will call to the chat-component to unmount the component.

  import renderChatComponent from 'chat-component';

  class ChatComponentWrapper extends React.Component {
    constructor(props) {
      super(props);

      this.saveChatComponentRef = ref => this.chatComponentRef = ref;
    }

    componentDidMount() {
      this.componentDidMountOrUpdate();
    }

    componentDidUpdate() {
      this.componentDidMountOrUpdate();
    }

    componentDidMountOrUpdate() {
-     renderChatComponent(this.props, this.chatComponentRef);
+     this.unmountChatComponent = renderChatComponent(this.props, this.chatComponentRef);
    }

+   componentWillUnmount() {
+     this.unmountChatComponent();
+   }

    render() {
      return (
        <div ref={ this.saveChatComponentRef } />
      );
    }
  }

Why is this sample using two versions of React

Although we recommend that you upgrade your host app at your earliest convenience, we understand that host app may need some time before its React dependencies are updated, especially in regards to huge applications.

As stated in this article, React requires that all components using hooks exist in the same React DOM tree, and must use the same instance of React.

In this approach, we isolated the DOM element from the React DOM tree. Then we use another react-dom package to continue the rendering. So the React DOM tree is virtually divided into two parts, although they looks contiguous. This approach is a supported scenario outlined in React docs.

Why not to use two versions of React

There are several key limitations to this approach:

Further reading