Como parte da implementação de renderização async no React, existem alguns métodos de ciclo de vida que serão depreciados no React 17 (veja o React Blog). Um comum usado é componentWillReceiveProps. Na maioria dos casos é usado para lidar com a mudança de
props de um componente.

Então o que fazer?

Uma solução é usar o método static getDerivedStateFromProps. Existe uma grande solução ‘HowTo’ para Post de Larry Price.

Outra solução é usar o React Hooks, especialmente o useEffect() Hook. Esta pode ser uma boa solução se você tiver um pequeno componente e quiser mudar para um componente funcional dentro desta mudança.

Aqui está um exemplo simples. Imagine que estamos a renderizar um componente de tabela com uma lista de itens. Todos os itens devem inicialmente correr através do método doSomething()>

código anterior

doSomething (items) { // some code to sort items ... return items}state = { items: this.props.items}componentWillReceiveProps (nextProps) { this.setState({ items: doSomething(nextProps.items) })}

> com Ganchos

const doSomething = (items) => { // some code to sort items ... return items}const = useState(doSomething(props.items))useEffect(() => { setItems(defaultSorting(items))}, )

Podemos usar o useEffect() Gancho que por defeito corre em cada renderização. Para evitar chamadas desnecessárias, nós usamos como segundo parâmetro. Assim useEffect() só corre quando a propriedade items mudou.

Aviso importante

Antes de mudar para getDerivedStateFromProps() ou useEffect() você deve verificar se realmente precisa deste tratamento de propriedade. Dê uma olhada neste blog oficial do React Blogpost para bugs comuns e anti-padrões.

Algumas vezes escrevemos algumas propriedades para o estado mesmo que não seja necessário. Se você por exemplo precisa ordenar uma lista que vem de uma propriedade, faça-o durante a renderização e evite escrevê-la no estado do componente.