class301-02.md

React Lifecycle

• Source

Lifecyle Events:

• Methods that are able to be performed on class components or function components
• Lifecyle events (methods) can be called during the lifecycle of a component to update UI or application states
  • A component has three (3) Lifecycle Phases:
    1. Mounting - when an instance of the component is created and inserted into the DOM
    • lifecyle events (in order):
      1. Constructor
      2. (static) getDerivedStateFromProps - state relies on changes in props over time
      3. render() - REQUIRED method in class component, examines this.props and this.state
      4. componentDidMount() - invoked as soon as component is mounted, used to load anything using a network request or initialize the DOM
    2. Updating - when a compontent is updated, changes state or is rerendered
    • lifecyle events (in order):
      1. (static) getDerivedStateFromProps
      2. shouldComponentUpdate() - used (set to false) to prevent default React behavior of rerendering after every state change
      3. render() - see above
      4. getSnapshotBeforeUpdate() - captures picture of DOM to check prior to updating DOM
      5. componenDidUpdate() - used to perform network requests after a change
    3. Unmounting - when a component is removed from the DOM
    • lifecyle events (in order):
      1. componentWillUnmount() - used to clean up the DOM, network requests, and subscriptions

React State vs Props

• Source

State:

• handled INSIDE of a component
• is updated inside of a component
• when changed, that component is rerendered
• used to change or rerender your application based on a user input
• examples:
  • count
  • forms input elements, checkboxes, etc

Props:

• handled OUTSIDE of a component
• passed into a component similar to arguments to a function
• must be updated outside of a component (can't change within a component)
• examples:
  • titles/headers that don't need to be updated

Things I want to know more about:

• TBD