CODEWITHSUNDEEP
reactjsargumentsparameter-passinguse-effect
lache
lache

Reputation: 830

How to return values from UseEffect Hook

I am getting the latitude and longitude from a Use Effect hook (which I am relatively new to). I want to return the values outside the use effect hook and store them in variables or even state if needed. I can console log the values but do i just add a return statement or pass arguments somehow? What feature do i need to make use of? I plan to pass the lat and long data into other parts of code which is why i am trying to retrieve it from the useEffect hook.

useEffect(() => {
    if ("geolocation" in navigator) {
      console.log("Available");
    } else {
      console.log("Not Available");
    }
    navigator.geolocation.getCurrentPosition(function (position) {
      let lat = position.coords.latitude;
      let long = position.coords.longitude;
      console.log(lat);
      console.log(long);
    });
  }, []);

let newLat = lat?
let newLong = long?

Upvotes: 4

Views: 12016

Answers (3)

YoYee
YoYee

Reputation: 23

you can try useState with useEffect

const [state, setState] = useState(initialState);

initialState can be string , number , object or array and so on. you only can use setState to change state's value. you can return your value and put in state and use it outside useEffect. if your value need preState, remember to pass an arrow function in setState and pass preState as a parameter.

Upvotes: 1

Marko Borković
Marko Borković

Reputation: 1912

You can save them in a state or a reference hook.

Here is how I would do it with a reference hook:

const lat = useRef(null);
const long = useRef(null);

useEffect(() => {
    if ("geolocation" in navigator) {
      console.log("Available");
    } else {
      console.log("Not Available");
    }
    navigator.geolocation.getCurrentPosition(function (position) {
      lat.current = position.coords.latitude;
      long.current = position.coords.longitude;
      console.log(lat);
      console.log(long);
    });
  }, []);

You can then access the lat and long values using .current on them. Changing them will not trigger a re-render.

If you want to use states you can do it like this

const [lat, setLat] = useState(null);
const [long, setLong] = useState(null);

useEffect(() => {
    if ("geolocation" in navigator) {
      console.log("Available");
    } else {
      console.log("Not Available");
    }
    navigator.geolocation.getCurrentPosition(function (position) {
      setLat(position.coords.latitude);
      setLong(position.coords.longitude);
      console.log(lat);
      console.log(long);
    });
  }, [setLat, setLong]);

And you can use them like any normal state.

Also make sure that their values are not null when trying to use them.

Upvotes: 6

Zenryo
Zenryo

Reputation: 61

Use must set lat and long in outside of useEffect You can try this:

let lat, long;

useEffect(() => {
    if ("geolocation" in navigator) {
      console.log("Available");
    } else {
      console.log("Not Available");
    }
    navigator.geolocation.getCurrentPosition(function (position) {
      lat = position.coords.latitude;
      long = position.coords.longitude;
      console.log(lat);
      console.log(long);
    });
  }, []);

Your lat and long variable will not has value because its initiate inside useEffect

Upvotes: -1

Related Questions