Proposta de melhoria de componentes about rcrd-labs HOT 5 CLOSED

Fala @ricardogouveia3

  componentDidMount() {
    fetch(API_LABS_ENDPOINT)
      .then((response) => response.json())
      .then((data) => this.setState({ labItems: data }));
  }

poderia ser reescrito usando os hooks useEffect e useState

ficando similar a

import React, { useEffect, useState } from 'react'

const [labItems, setLabItems] = useState([])

useEffect(()=>{
fetch(API_LABS_ENDPOINT)
      .then((response) => response.json())
      .then((data) => setLabItems(data));
},[ ])

os métodos de ciclo de vida do React podem ser controlados por meio do hook useEffect, mais detalhes aqui

from rcrd-labs.

@ricardogouveia3 perdão, eu acabei não vendo sua mensagem anteriormente, mas é como @marcelodasilva sugeriu, se tiver alguma duvida, a gente vai tentando ajudar.
E, de fato, Hooks é sempre mais bacana pra usar haha

from rcrd-labs.

@raffaeldantass muito obrigado pela ajuda!

Mudei a sintaxe de todos os componentes pra stateless seguindo seu exemplo. Só não consegui mudar o AppMain porque ele usa o hook componentDidMount para alterar um state. Esse ficou como ClassComponent mesmo (é necessário? não sei).

Coloquei todo o estilo em styled components. Como é pouca coisa, deixei no mesmo arquivo, não ficou ruim na minha opinião.

from rcrd-labs.

@marcelodasilva @raffaeldantass espera, o componentDidMount não é um hook do React Hooks?

eu pensei que fosse, já que o Angular e o Vue tem lifecycle hooks parecidos... mas acho que eles não tem algo parecido com useEffect e useState...

vou dar uma lida na documentação desses hooks, apesar de acho que entendi mais ou menos como ocorre a ativação deles aí...

from rcrd-labs.

Obrigado @marcelodasilva @raffaeldantass
implementei as mudanças convertendo o AppMain pra um function component

from rcrd-labs.