Como parte de la implementación de la renderización asíncrona en React, hay algunos métodos del ciclo de vida que serán obsoletos en React 17 (ver React Blog). Uno de los más utilizados es componentWillReceiveProps. En la mayoría de los casos se utiliza para manejar el cambio de
props de un componente.

Entonces, ¿qué hacer?

Una solución es utilizar el método static getDerivedStateFromProps. Hay un gran ‘HowTo’ dev.to Post de Larry Price.

Otra solución es utilizar React Hooks, especialmente el useEffect() Hook. Esto podría ser una buena solución si usted tiene un pequeño componente y quiere cambiar a un componente funcional dentro de este cambio.

Aquí está un ejemplo simple. Imagina que estamos renderizando un componente de tabla con una lista de elementos. Todos los ítems deben pasar inicialmente por el 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) })}

Con Hooks

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

Podemos utilizar el Hook useEffect()que por defecto se ejecuta en cada renderizado. Para evitar llamadas innecesarias, utilizamos como segundo parámetro. Así, useEffect() sólo se ejecuta cuando la propiedad items ha cambiado.

Aviso importante

Antes de cambiar a getDerivedStateFromProps() o useEffect() deberías comprobar si realmente necesitas este manejo de propiedades. Echa un vistazo a este Blogpost oficial de React para conocer los errores más comunes y el anti-patrón.

A veces escribimos algunas propiedades en el estado aunque no lo necesitemos. Si por ejemplo necesitas ordenar una lista que proviene de una propiedad, hazlo durante el renderizado y evita escribirlo en el estado del componente.