import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';

class App extends Component {
  /*
    Leia a resposta: 
      https://stackoverflow.com/questions/61715632/react-class-component-rendering-twice 

      Explica o motivo do componente baseado em classe ser construído 2 vezes...

    "
       Isso é feito invocando intencionalmente duas vezes as seguintes funções:
        
        Métodos de construtor de componente de classe, render e shouldComponentUpdate => (SEU CASO)**
        Método estático getDerivedStateFromProps do componente de classe
        Corpos dos componentes das funções
        Funções do atualizador de estado (o primeiro argumento para setState)
        Funções transmitidas para useState, useMemo ou useReducer
      
      Felizmente, isso se aplica apenas ao modo de desenvolvimento , portanto você não terá essa renderização dupla na produção.
    "
    
  */
  constructor(props){
    super(props)
    console.log('Construindo componente...');
    axios 
      .get('/postagens')
      .then(resposta => {
        console.log(resposta)
      })
    
  }

  render(){
  return (
    <div className="App">
        <p>
          teste1
        </p>
    </div>
  );
  }
}

export default App;

// ALTERNATIVA UTILIZANDO React Hooks

import React, { useEffect } from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';

const App = () => {

  // Utilizando o useEffect(Ciclo de vida c/ React Hooks): callback executado toda vez que o componente for montado
  useEffect(() => {
    console.log('Componente Montado...');
    axios 
      .get('/postagens')
      .then(resposta => {
        console.log(resposta)
      })
  },[]);

  return (
    <div className="App">
        <p>
          teste1
        </p>
    </div>
  );
  
}

export default App;