Migrating From Unsafe React Lifecycles Hooks - ReactKHI meetup #01

ChatAfter.js

import React, { Component } from 'react';
import Message from './message';
import { getMessage } from './getMessage';

class Chat extends Component {
  // Initial State.
  state = {
    messages: [getMessage()],
    isStreaming: this.props.isStreaming
  }

  // Message Container.
  static MessageContainer = ({ messages, ulRef }) => {
    return (
      <ul ref={ulRef} className="chatBox" >
        {
          messages.map((message, index) => {
            return <Message {...message} key={index} />
          })
        }
      </ul>
    )
  }

  // Header of application.
  static Header = () => {
    return (
      <div className="Chat-legend">
        Chat Messages
        </div>
    );
  }


  componentDidMount() {
    this.timerID = setInterval(() => {
      if (this.state.isStreaming) {
        this.generateMessage();
      }
    }, 1000);
    document.addEventListener("keydown", this.handleKey);
  }

  static getDerivedStateFromProps(props, state) {
    if (props.isStreaming !== state.isStreaming) {
      return {
        isStreaming: props.isStreaming
      };
    }
    return null;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    const { current } = this.ulRef;
    return {
      shouldAutoScroll:
        current.scrollTop + current.clientHeight >=
        current.scrollHeight
    };
  }

  componentDidUpdate(prevProps, prevState, { shouldAutoScroll }) {
    if (shouldAutoScroll) {
      const { current } = this.ulRef;
      current.scrollTop = current.scrollHeight;
    }
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
    document.removeEventListener("keydown", this.handleKey);
  }

  // fetch the new messages.
  generateMessage = () => {
    const message = getMessage();
    this.setState(prevState => ({
      messages: [...prevState.messages, message]
    }));
  };

  // Handles the keystroke.
  handleKey = e => {
    if (e.key === "c") {
      this.setState({ messages: [getMessage()] });
    }
  };

  //  Ref of ul
  ulRef = React.createRef();

  // Main Render
  render() {
    return (
      <div>
        <Chat.MessageContainer messages={this.state.messages} ulRef={this.ulRef} />
      </div>
    );
  }
}

export default Chat;

ChatBefore.js

import React, { Component } from 'react';
import Message from './message';
import { getMessage } from './getMessage';

class Chat extends Component {
  // Initial State.
  state = {
    messages: [getMessage()],
    isStreaming: this.props.isStreaming
  }

  // Message Container.
  static MessageContainer = ({ messages, ulRef }) => {
    return (
      <ul ref={ulRef} className="chatBox" >
        {
          messages.map((message, index) => {
            return <Message {...message} key={index} />
          })
        }
      </ul>
    )
  }

  // Header of application.
  static Header = () => {
    return (
      <div className="Chat-legend">
        Chat Messages
        </div>
    );
  }


  UNSAFE_componentWillMount() {
    this.timerID = setInterval(() => {
      if (this.state.isStreaming) {
        this.generateMessage();
      }
    }, 1000);
    document.addEventListener("keydown", this.handleKey);
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.isStreaming !== this.state.isStreaming) {
      this.setState({
        isStreaming: nextProps.isStreaming
      });
    }
  }

  UNSAFE_componentWillUpdate(nextProps, nextState) {
    const { current } = this.ulRef;
    this.shouldAutoScroll =
      current.scrollTop + current.clientHeight >=
      current.scrollHeight;
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.shouldAutoScroll) {
      console.log('hello');
      const { current } = this.ulRef;
      current.scrollTop = current.scrollHeight;
    }
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
    document.removeEventListener("keydown", this.handleKey);
  }

  // fetch the new messages.
  generateMessage = () => {
    const message = getMessage();
    this.setState(prevState => ({
      messages: [...prevState.messages, message]
    }));
  };

  // Handles the keystroke.
  handleKey = e => {
    if (e.key === "c") {
      this.setState({ messages: [getMessage()] });
    }
  };

  //  Ref of ul
  ulRef = React.createRef();

  // Main Render
  render() {
    return (
      <div>
        <Chat.MessageContainer messages={this.state.messages} ulRef={this.ulRef} />
      </div>
    );
  }
}

export default Chat;

visit https://docs.google.com/presentation/d/1WT_wGFp0Esrj2VMRzLKr0wZmWAi6UC7cuPUGAj4IFpw/edit?usp=sharing to access the slides.

Both the componentWillReceiveProps and the static getDerivedStateFromProps() add significant complexity to the component. See this blog post: https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization\