How to return values from UseEffect Hook

user_15276785 0
Viewed 2864

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?
use-effect reactjs parameter-passing arguments
3 Answers

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.

user_140151260

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.

user_52249750

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

user_88256160
Related