Removed unsafe lifecycle methods function body moved to other methods

- componentWillMount moved to componentDidMount

- componentWillUpdate moved to getDerivedStateFromProps

- Checks that toggleFloating is defined when relying on prop opened

- Wrapped example ChatBot in React.StrictMode

Author: pascalgagneur

example/components/Example.jsx

@@ -25,7 +25,9 @@ const steps = [
 
 const ThemedExample = () => (
   <ThemeProvider theme={otherFontTheme}>
+    <React.StrictMode>
     <ChatBot steps={steps} />
+    </React.StrictMode>
   </ThemeProvider>
 );
 

lib/ChatBot.jsx

@@ -61,7 +61,7 @@ class ChatBot extends Component {
     this.speak = speakFn(props.speechSynthesis);
   }
 
-  componentWillMount() {
+  componentDidMount() {
     const { steps } = this.props;
     const {
       botDelay,
@@ -104,6 +104,23 @@ class ChatBot extends Component {
       chatSteps[firstStep.id].message = firstStep.message;
     }
 
+    const { recognitionEnable } = this.state;
+    const { recognitionLang } = this.props;
+
+    if (recognitionEnable) {
+      this.recognition = new Recognition(
+        this.onRecognitionChange,
+        this.onRecognitionEnd,
+        this.onRecognitionStop,
+        recognitionLang,
+      );
+    }
+
+    if (this.content) {
+      this.content.addEventListener('DOMNodeInserted', this.onNodeInserted);
+      window.addEventListener('resize', this.onResize);
+    }
+
     const {
       currentStep,
       previousStep,
@@ -138,31 +155,15 @@ class ChatBot extends Component {
     });
   }
 
-  componentDidMount() {
-    const { recognitionEnable } = this.state;
-    const { recognitionLang } = this.props;
-
-    if (recognitionEnable) {
-      this.recognition = new Recognition(
-        this.onRecognitionChange,
-        this.onRecognitionEnd,
-        this.onRecognitionStop,
-        recognitionLang,
-      );
-    }
-
-    if (this.content) {
-      this.content.addEventListener('DOMNodeInserted', this.onNodeInserted);
-      window.addEventListener('resize', this.onResize);
-    }
-  }
-
-  componentWillUpdate(nextProps, nextState) {
-    const { opened } = nextProps;
-
-    if (opened !== undefined && opened !== nextState.opened) {
-      this.setState({ opened });
+  static getDerivedStateFromProps(props, state) {
+    const { opened, toggleFloating } = props;
+    if (toggleFloating !== undefined && opened !== undefined && opened !== state.opened) {
+      return {
+        ...state,
+        opened
+      }
     }
+    return state;
   }
 
   componentWillUnmount() {