react-parent-child-lifecycle-order

react parent child lifecycle order

live demo

https://33qrr.csb.app/

https://codesandbox.io/s/react-parent-child-lifecycle-order-33qrr

https://react-parent-child-lifecycle-order.stackblitz.io

https://stackblitz.com/edit/react-parent-child-lifecycle-order

import React, { Component } from "react";
import log from "../utils/log";

class Child extends Component {
  constructor() {
    super();
    this.state = {};
    log(`child constructor`, 0);
  }
  // new API
  // getDerivedStateFromProps() {
  //   log(`child getDerivedStateFromProps`, 11);
  // }
  // getSnapshotBeforeUpdate() {
  //   log(`child getSnapshotBeforeUpdate`, 22);
  // }
  // old API
  componentWillMount() {
    log(`child WillMount`, 1);
  }
  // UNSAFE_componentWillMount() {
  //   log(`child WillMount`, 1);
  // }
  componentDidMount() {
    log(`child DidMount`, 2);
  }
  componentWillReceiveProps() {
    log(`child WillReceiveProps`, 3);
  }
  // UNSAFE_componentWillReceiveProps() {
  //   log(`child WillReceiveProps`, 3);
  // }
  shouldComponentUpdate() {
    log(`child shouldComponentUpdate`, 4);
    return true;
    // return true or false;
  }
  componentWillUpdate() {
    log(`child WillUpdate`, 5);
  }
  // UNSAFE_componentWillUpdate() {
  //   log(`child WillUpdate`, 5);
  // }
  componentDidUpdate() {
    log(`child DidUpdate`, 6);
  }
  componentWillUnmount() {
    log(`\nchild WillUnmount`, 7);
  }
  componentDidCatch(err) {
    log(`child DidCatch`, err);
  }
  render() {
    log(`child render`);
    return (
      <div className="child">
        <h1>child-lifecycle-order</h1>
      </div>
    );
  }
}

export default Child;




import React, { Component } from "react";

import Child from "./child";
import log from "../utils/log";

class Parent extends Component {
  constructor() {
    super();
    this.state = {
      show: true
    };
    // this.toggoleShow = this.toggoleShow.bind(this);
    log(`parent constructor`, 0);
  }
  // new API
  // getDerivedStateFromProps() {
  //   log(`child getDerivedStateFromProps`, 11);
  // }
  // getSnapshotBeforeUpdate() {
  //   log(`child getSnapshotBeforeUpdate`, 22);
  // }
  // old API
  componentWillMount() {
    log(`parent WillMount`, 1);
  }
  // UNSAFE_componentWillMount() {
  //   log(`parent UNSAFE_WillMount`, 1);
  // }
  componentDidMount() {
    log(`parent DidMount`, 2);
  }
  componentWillReceiveProps() {
    log(`parent WillReceiveProps`, 3);
  }
  // UNSAFE_componentWillReceiveProps() {
  //   log(`parent UNSAFE_WillReceiveProps`, 3);
  // }
  shouldComponentUpdate() {
    log(`parent shouldComponentUpdate`, 4);
    return true;
    // return true or false;
  }
  componentWillUpdate() {
    log(`parent WillUpdate`, 5);
  }
  // UNSAFE_componentWillUpdate() {
  //   log(`parent UNSAFE_WillUpdate`, 5);
  // }
  componentDidUpdate() {
    log(`parent DidUpdate`, 6);
  }
  componentWillUnmount() {
    log(`\n\nparent WillUnmount`, 7);
  }
  componentDidCatch(err) {
    log(`parent DidCatch`, err);
  }
  // toggoleShow() {
  //   const { show } = this.state;
  //   this.setState({
  //     show: !show
  //   });
  // }
  toggoleShow = () => {
    const { show } = this.state;
    this.setState({
      show: !show
    });
  };
  render() {
    log(`parent render`);
    const { show } = this.state;
    return (
      <div className="parent">
        <h1>parent-lifecycle-order</h1>
        {/* <button onClick={this.toggoleShow.bind(this)}>toggoleShow</button> */}
        {/* <button onClick={() => this.toggoleShow}>toggoleShow</button> */}
        <button onClick={this.toggoleShow}>toggoleShow</button>
        {show && <Child />}
      </div>
    );
  }
}

export default Parent;




import React, { useState, useEffect } from "react";

import "./styles.css";

import Parent from "./components/parent";

export default function App() {
  const [show, setShow] = useState(true);
  const toggoleShow = () => {
    setShow(!show);
  };
  useEffect(() => {
    // Update the document title using the browser API
    let flag = true;
    if (flag) {
      document.title = `react hooks ${show}`;
    }
    // cancel promise
    return () => (flag = false);
  }, [show]);
  return (
    <div className="App">
      <h1>react-parent-child-lifecycle-order</h1>
      <button onClick={toggoleShow}>toggoleShow</button>
      {show && <Parent />}
    </div>
  );
}