Repozytorium Web Developera

React lifecycle methods

Useful methods

componentWillMount()

  • invoked only before first rendering (before initial render)
  • mostly useless, defining state should be performed in constructor
  • we don't have access here to DOM and refs
  • avoid changing state here and don't call side-effects methods
  • do not fetch data here - if you don't have some data required to render, use defaultProps instead
  • use only for configuring app root or some variabled dependent on initial state and props (but it can be done in constructor)

componentDidMount()

  • invoked only after first rendering
  • that's the best place for fetching data
  • here you can initialize method which uses DOM
  • here you can add event listeners
  • here you can change state
  • causes rerendering

componentWillReceiveProps(nextProps)

  • good place when we want to check how props have changed and what we have to update (eg. make a new fetch for data because id has changed)
  • isn't called after before first rendering

shouldComponentUpdate(nextProps, nextState)

  • we use it when we want to improve performance of our component and avoid unnecessary renders
  • it should return boolean value

componentWillUpdate()

  • do not change state here!

componentDidUpdate()

  • here you can update state according to the new props and etc.

componentWillUnmount()

  • here you can clean unfinished API calls and event listeners

render()

  • it should be a pure function of props and state
  • that's not a place for fetching data and asynchronous operations
  • don't mutate state here or access DOM