getting 3 console.logs

[iqbal125]

I am getting 3 console logs I dont know why. I tried everything hooks/classes inside outside component and it doesnt work.

import React, { useEffect, Component } from 'react';
import ContextState from './context_state_config';
import history from './utils/history';
import ReactGA from 'react-ga';
import { observe } from 'react-performance-observer';

ReactGA.initialize('UA-144556525-1');

history.listen((location) => {
    ReactGA.pageview(location.pathname + location.search);
});

var observer = observe(measurements => {
  console.log(measurements);
});

class App extends Component {

  // var observer = new PerformanceObserver(list => {
  //     list.getEntries().forEach(entry => {
  //       // Display each reported measurement on console
  //       if (console) {
  //         console.log("Name: "       + entry.name      +
  //                     ", Type: "     + entry.entryType +
  //                     ", Start: "    + entry.startTime +
  //                     ", Duration: " + entry.duration  + "\n");
  //       }
  //     })
  //   });
  //   observer.observe({entryTypes: ['resource', 'mark', 'measure']});
  //   performance.mark('registered-observer');
  //
  //   function clicked(elem) {
  //     performance.measure('button clicked');
  //   }

  render() {
    return(
      <div>
        React
        <ContextState />
      </div>
    )
  }
}


export default App;

[jamiebuilds]

Are you sure your app isn't rendering 3 separate times?

[iqbal125]

@jamiebuilds hey thanks for the quick response! you were right.

If you can help me understand one more thing. Im getting 2 different values when Im using the react-performance-observer and the regular performance observer. Can you help me understand why.

[jamiebuilds]

Hm, I'm not sure. Are those logging in the same run?