React Lifecycle, Quickly by the Method – Gabriel Kunkel – Medium

React Lifecycle, Quickly by the Method  #javascript #react #reactjs

  • React Lifecycle, Quickly by the MethodThese methods aren’t perfectly desirable to use, but they’re a way of exerting more control over the situation when the rest of the world just doesn’t want to cooperate with React.componentWillMount: Use for connecting to API’s on root components or containers.
  • componentDidMount: Load your data and do anything you need to do to a component.
  • After a parent component did some value changing.
  • This is the place to change outside DOM things in respect to changes that are linked up to the values tracked by react.
  • If you’re going to kill your component, this is the place where you clean-up everything that react won’t clean up on its own, including network requests, event listeners, and a canvas box.The whole cycle with methods.

These methods aren’t perfectly desirable to use, but they’re a way of exerting more control over the situation when the rest of the world just doesn’t want to cooperate with React.

@ReactDOM: React Lifecycle, Quickly by the Method #javascript #react #reactjs

These methods aren’t perfectly desirable to use, but they’re a way of exerting more control over the situation when the rest of the world just doesn’t want to cooperate with React.

componentWillMount: Use for connecting to API’s on root components or containers. By “connecting,” I don’t mean retrieving. (Use defaultProps to set the state.)

componentDidMount: Load your data and do anything you need to do to a component. setState!

componentWillRecieveProps(nextProps): After a parent component did some value changing. We might want to do something with those values? …And maybe with the previous values. In this sweet function we have access to the values on this.props and the values on nextProps! This is a great way to trigger state transitions. setState!

shouldComponentUpdate(nextProps, nextState): Should always return a boolean, because we use this function to prevent re-rendering when it really doesn’t matter and we care deeply about performance. (An example might be a graphic that only changes in larger increments than what was updated?)

componentDidUpdate: This is like componentDidMount, but after things have changed; a re-rendering of some sort. This is the place to change outside DOM things in respect to changes that are linked up to the values tracked by react. In other words, we might need to change something on the DOM that doesn’t otherwise react to react. setState!

componentWillUnmount: Every component must die at some point. If you’re going to kill your component, this is the place where you clean-up everything that react won’t clean up on its own, including network requests, event listeners, and a canvas box.

React Lifecycle, Quickly by the Method – Gabriel Kunkel – Medium