Gatsby componentDidUpdate() create an infinite loop

[pinaudnico]

Hi everyone,
I'm trying to make a component who can give me GPS coords. This component will update very often and I want to catch the coords in a parent. Problem : my componentDidUpdate() create an error . Wht does I miss ?

import React from 'react';
import ReactDom from 'react-dom';

//components
import Navigation from './navigation'
import Fenetre from './fenetre'

// css
import'../style/index.css';

import GPS from '../pages/GPS'
import Donnees from '../pages/donnees'



class App extends React.Component {
          
state = {
	contenuaffichage: "",
	latitude: "latitude"
}

//call back des fonctions d'affichage
fonctiontexte = () => {
    	this.setState({ contenuaffichage: "texte" });
    	};

fonctionphoto = () => {
    	this.setState({ contenuaffichage: "photo" });
		};

fonctionaudio = () => {
    	this.setState({ contenuaffichage: "audio" });
		};

//call back du module donnees
fonctiongps = (latitude) => {
	this.setState({ latitude: latitude });
	
	};	


render() {
	        
		return (
			<div className="zobi">
				
				<div><Fenetre contenu={this.state.contenuaffichage}/></div>
				<div><Navigation fonctiontexte={this.fonctiontexte}
				                 fonctionphoto={this.fonctionphoto}
				                 fonctionaudio={this.fonctionaudio}/></div>	
                <div><GPS fonctiongps={this.fonctiongps}/></div>
				<div>latitude vu de l'enfant : {this.state.latitude}</div>
				<div></div>

				<div><br /></div>
				<div>Coordonnées enregistrées</div>
				<div>Latitude : {this.props.data.allTableaudespointsCsv.edges[0].node.field2}</div>
				<div>Longitude : {this.props.data.allTableaudespointsCsv.edges[0].node.field3}</div>
			</div>

			)
	}
}


export default App;


export const Query = graphql`
query AppQuery {
allTableaudespointsCsv {
  edges {
	node {
	  field1
	  field2
	  field3
	  field4
	  field5
	  field6
	}
  }
}

}
`

and my GPS.js 👍

import React from 'react';

import {geolocated} from 'react-geolocated';

 

class GPS extends React.Component {

  componentDidUpdate () {
    this.props.fonctiongps(this.props.coords.latitude);
  }

  state = {
    latitudegps: 0,
    longituedgps: 0
  } 

	render() {
    
  return !this.props.isGeolocationAvailable
      ? <div>Your browser does not support Geolocation</div>
      : !this.props.isGeolocationEnabled
        ? <div>Geolocation is not enabled</div>
        : this.props.coords
          ? <div>
                  <div>Module GPS</div>
                  <div>latitude : {this.props.coords.latitude}
                  <br />
                  longitude : {this.props.coords.longitude}
                  </div>
                  <div><br /></div>
            </div>
          : <div>Getting the location data&hellip; </div>;
          
	}
}


export default geolocated({
  positionOptions: {
    enableHighAccuracy: true,
  },
  userDecisionTimeout: 5000,
})(GPS);

[fabien0102]

https://scrimba.com/c/cDyk7sp

It's just due to react-geolocated, too many triggers

[fabien0102]

@pinaudnico A way to do what you want, is to inverted your logic. Add geoloc data into your parent, and give the props to children.

Example: https://scrimba.com/c/cKQgNcd

[fabien0102]

BTW, I close this issue because is not related with gatsby 😉

[pinaudnico]

Thanks for help.
With the last problem I had (read a csv into gatsby layout and make data available in a child module), I finished by include the module I want to make in the parent index.js. Here, I finish to include the module in the parent. Now I am asking me if it's a good idea to use react because all is in the parent ???

[fabien0102]

The main goal of react is to permit to separate your ui in small/dump ui parts (easier to read/maintain and test). After it also permit to have access to all react components/plugins community 😉 So it depends of your needs. But I can totally understand that you use partially react for a specific need (if you use Gatsby for example, you don't have to deal with webpack, dev server and build) so yes, for this reason, react is still a good idea ;)

BTW, I don't have all yours specs, but it's often (always?) possible to split your logic in many small modules 😉 (but it's the hard part of a developer jobs 😉 ). To finish, I also use react for a single page website, just to split my logic (example: https://github.com/fabien0102/fabien0102.com), make totally sense!