Reemplazando por GetDerivedStateFromProps

Amanshu Kataria

Sigue

14 de mayo, 2018 – 2 min read

Con el lanzamiento de React 16.3, se han introducido algunos nuevos métodos de ciclo de vida, y el lanzamiento de React 17 desaprobará algunos métodos de ciclo de vida.

getDerivedStateFromProps es uno de esos métodos de ciclo de vida recién introducidos que sustituye a componentWillReceiveProps, que ahora se ha convertido en UNSAFE_componentWillReceiveProps.

getDerivedStateFromProps es un método estático que se invoca después de la instanciación de un componente, así como cuando recibe nuevos props. Como es un método estático, no se puede acceder a this dentro de este método ni tampoco a ningún otro método de la clase. A diferencia de componentWillReceiveProps no se puede establecer el estado dentro de este método, por lo que la única forma de actualizar el estado es devolviendo un objeto. Si no quieres actualizar ningún estado, simplemente devuelve null.

Vamos a sumergirnos en algo de código

Así es como funciona componentWillReceiveProps.

Comparamos nextProps.someValue con this.props.someValue y si ambos son diferentes entonces realizamos alguna operación, setState y llamamos a this.classMethod();.

Ahora veamos cómo funciona getDerivedStateFromProps.

Recibe dos params nextProps y prevState. Como se mencionó anteriormente no puedes acceder a this dentro de este método por lo que tendrás que almacenar los props en el estado para comparar el nextProps con los props anteriores. En el código anterior se comparan nextProps y prevState, si ambos son diferentes entonces se devolverá un objeto para actualizar el estado, de lo contrario se devolverá null indicando que no es necesario actualizar el estado. Si el estado cambia entonces se llama a componentDidUpdate donde podemos realizar las operaciones deseadas como hicimos en componentWillReceiveProps.