M1A_24.md

M1#A24 - Lifecycle: fluxo de atualização (shouldComponentUpdate)

shouldComponentUpdate

Ele é executado toda vez que o componente recebe uma nova propriedade.

Serve para testarmos valores. Podemos por exemplo checar se a propriedade anterior é diferente da minha próxima propriedade.

Se você não quiser que o método renderize numa determinada propriedade esse método é o cara certo para o trabalho

'use strict'

import React, { Component } from 'react'
import Timer from './timer'

class App extends Component {
  constructor () {
    console.log('contructor')
    super()
    this.state = {
      time: 0
    }
  }

  componentWillMount () {
    console.log('componentWillMount')
  }

  componentDidMount () {
    console.log('componentDidMount')
  }

  render () {
    console.log('render')
    return (
     <div>
      <Timer time={this.state.time} />
      <button onClick={() =>
        this.setState({ time: this.state.time + 10 })
      }>Change props</button>
     </div>
    )
  }
}
export default App

'use strict'

import React, { Component } from 'react'

class Timer extends Component {
  constructor () {
    super()
    this.state = {
      time: 0
    }

    this.timer
  }

  componentWillReceiveProps (nextProps) {
    console.log('componentWillReceiveProps', this.props, nextProps)
  }

  shouldComponentUpdate (nextProps, nextState) {
    console.log('shouldComponentUpdate', this.state, nextState)
    return this.state.time !== nextState.time
  }

  componentDidMount () {
    this.timer = setInterval(() => {
      this.setState({
        time: this.state.time + 1
      })
    }, 1000)
  }

  componentWillUnmount () {
    clearInterval(this.timer)
  }

  render () {
    console.log('render timer')
    return <div>Timer: {this.state.time}</div>
  }
}

Timer.defaultProps = {
  time: 0
}

export default Timer