¿Está bien usar async componentDidMount ()?

¿Es componentDidMount()una buena práctica usar como función asíncrona en React Native o debería evitarlo?

Necesito obtener información de AsyncStoragecuándo se monta el componente, pero la única forma que sé de hacerlo es hacer que la componentDidMount()función sea asíncrona.

async componentDidMount() {
    let auth = await this.getAuth();
    if (auth) 
        this.checkAuth(auth);
}

¿Hay algún problema con eso y hay otras soluciones para este problema?

Comencemos señalando las diferencias y determinando cómo podría causar problemas.

Aquí está el código del componentDidMount()método de ciclo de vida asíncrono y "sincronizado" :

// This is typescript code
componentDidMount(): void { /* do something */ }

async componentDidMount(): Promise<void> {
    /* do something */
    /* You can use "await" here */
}

Al mirar el código, puedo señalar las siguientes diferencias:

1. Las asyncpalabras clave: en mecanografiado, esto es simplemente un marcador de código. Hace 2 cosas:
   • Forzar que el tipo de retorno sea en Promise<void>lugar de void. Si especifica explícitamente que el tipo de devolución no es prometedor (por ejemplo, nulo), el mecanografiado le arrojará un error.
   • Le permite usar awaitpalabras clave dentro del método.
2. El tipo de retorno se cambia de voidaPromise<void>
   • Significa que ahora puedes hacer esto:
     async someMethod(): Promise<void> { await componentDidMount(); }

3. Ahora puede usar la awaitpalabra clave dentro del método y pausar temporalmente su ejecución. Me gusta esto:

   async componentDidMount(): Promise<void> {
       const users = await axios.get<string>("http://localhost:9001/users");
       const questions = await axios.get<string>("http://localhost:9001/questions");
   
       // Sleep for 10 seconds
       await new Promise(resolve => { setTimeout(resolve, 10000); });
   
       // This line of code will be executed after 10+ seconds
       this.setState({users, questions});
       return Promise.resolve();
   }

Ahora, ¿cómo podrían causar problemas?

1. La asyncpalabra clave es absolutamente inofensiva.

2. No puedo imaginar ninguna situación en la que necesite hacer una llamada al componentDidMount()método, por lo que el tipo de retorno también Promise<void>es inofensivo.

   Llamar a un método que tiene tipo de retorno de Promise<void>sin awaitpalabra clave no hará ninguna diferencia de llamar a uno que tiene tipo de retorno de void.

3. Dado que no hay métodos de ciclo de vida después de componentDidMount()retrasar su ejecución, parece bastante seguro. Pero hay una trampa.

   Digamos que lo anterior this.setState({users, questions});se ejecutará después de 10 segundos. En medio del tiempo de retraso, otro ...

   this.setState({users: newerUsers, questions: newerQuestions});

   ... se ejecutaron con éxito y el DOM se actualizó. El resultado fue visible para los usuarios. El reloj siguió marcando y transcurrieron 10 segundos. El retraso this.setState(...)se ejecutaría y el DOM se actualizaría nuevamente, esa vez con usuarios antiguos y preguntas antiguas. El resultado también sería visible para los usuarios.

=> Es bastante seguro (no estoy seguro del 100%) para usar asynccon el componentDidMount()método. Soy un gran admirador y hasta ahora no he encontrado ningún problema que me dé mucho dolor de cabeza.

Actualización de abril de 2020: el problema parece haberse solucionado en la última Reacción 16.13.1, consulte este ejemplo de sandbox . Gracias a @abernier por señalar esto.

He investigado un poco y he encontrado una diferencia importante: React no procesa errores de los métodos asíncronos del ciclo de vida.

Entonces, si escribes algo como esto:

componentDidMount()
{
    throw new Error('I crashed!');
}

entonces su error será detectado por el límite de errores , y puede procesarlo y mostrar un mensaje elegante.

Si cambiamos el código así:

async componentDidMount()
{
    throw new Error('I crashed!');
}

que es equivalente a esto:

componentDidMount()
{
    return Promise.reject(new Error('I crashed!'));
}

entonces su error será tragado en silencio . La culpa es tuya, reacciona ...

Entonces, ¿cómo procesamos los errores que? La única forma parece ser una captura explícita como esta:

async componentDidMount()
{
    try
    {
         await myAsyncFunction();
    }
    catch(error)
    {
        //...
    }
}

o así:

componentDidMount()
{
    myAsyncFunction()
    .catch(()=>
    {
        //...
    });
}

Si aún queremos que nuestro error alcance el límite de error, puedo pensar en el siguiente truco:

1. Detecte el error, haga que el controlador de errores cambie el estado del componente
2. Si el estado indica un error, tírelo desde el rendermétodo

Ejemplo:

class BuggyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
  }

  buggyAsyncfunction(){ return Promise.reject(new Error('I crashed async!'));}

  async componentDidMount() {
    try
    {
      await this.buggyAsyncfunction();
    }
    catch(error)
    {
        this.setState({error: error});
    }
  }

  render() {
    if(this.state.error)
        throw this.state.error;

    return <h1>I am OK</h1>;
  }
}

Tu código está bien y es muy legible para mí. Vea este artículo de Dale Jefferson donde muestra un componentDidMountejemplo asíncrono y se ve muy bien también.

Pero algunas personas dirían que una persona que lee el código puede suponer que React hace algo con la promesa devuelta.

Entonces, la interpretación de este código y si es una buena práctica o no es muy personal.

Si quieres otra solución, puedes usar promesas . Por ejemplo:

componentDidMount() {
    fetch(this.getAuth())
      .then(auth => {
          if (auth) this.checkAuth(auth)
      })
}

Cuando usa componentDidMountsin asyncpalabra clave, el documento dice esto:

Puede llamar a setState () inmediatamente en componentDidMount (). Activará una representación adicional, pero sucederá antes de que el navegador actualice la pantalla.

Si lo usa async componentDidMount, perderá esta capacidad: se producirá otro procesamiento DESPUÉS de que el navegador actualice la pantalla. Pero, si estás pensando en usar asíncrono, como buscar datos, no puedes evitar que el navegador actualice la pantalla dos veces. En otro mundo, no es posible PAUSAR componentDidMount antes de que el navegador actualice la pantalla

Actualizar:

(Mi versión: React 16, Webpack 4, Babel 7):

Al usar Babel 7 descubrirás:

Usando este patrón ...

async componentDidMount() {
    try {
        const res = await fetch(config.discover.url);
        const data = await res.json();
        console.log(data);
    } catch(e) {
        console.error(e);
    }
}

te encontrarás con el siguiente error ...

Error de referencia no capturado: regeneratorRuntime no está definido

En este caso necesitará instalar babel-plugin-transform-runtime

https://babeljs.io/docs/en/babel-plugin-transform-runtime.html

Si por alguna razón no desea instalar el paquete anterior (babel-plugin-transform-runtime), entonces querrá apegarse al patrón Promise ...

componentDidMount() {
    fetch(config.discover.url)
    .then(res => res.json())
    .then(data => {
        console.log(data);
    })
    .catch(err => console.error(err));
}

Creo que está bien siempre y cuando sepas lo que estás haciendo. Pero puede ser confuso porque async componentDidMount()aún puede ejecutarse después de que se componentWillUnmounthaya ejecutado y el componente se haya desmontado.

También es posible que desee iniciar tareas sincrónicas y asincrónicas dentro componentDidMount. Si componentDidMountfuera asíncrono, tendría que poner todo el código síncrono antes del primero await. Puede que no sea obvio para alguien que el código anterior al primero se awaitejecuta sincrónicamente. En este caso, probablemente mantendría componentDidMountsincronizado, pero lo llamaría a métodos de sincronización y asíncrono.

Ya sea que elija async componentDidMount()los métodos de componentDidMount()llamada vs sincronización async, debe asegurarse de limpiar los oyentes o los métodos asíncronos que aún pueden estar ejecutándose cuando el componente se desmonta.

En realidad, la carga asíncrona en ComponentDidMount es un patrón de diseño recomendado a medida que React se aleja de los métodos de ciclo de vida heredados (componentWillMount, componentWillReceiveProps, componentWillUpdate) y pasa a Async Rendering.

Esta publicación de blog es muy útil para explicar por qué esto es seguro y para proporcionar ejemplos de carga asíncrona en ComponentDidMount:

https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

Me gusta usar algo como esto

componentDidMount(){
   const result = makeResquest()
}
async makeRequest(){
   const res = await fetch(url);
   const data = await res.json();
   return data
}