1

I am creating a hook to fetch all properties from a database. the function is asynchronous, when I call the hook in another function, it is []. I know that the function to fetch from the database is asynchronous, I understand that it has to wait for the server for a response. I don't fully understand it well, how do I get the hook to return the data I need?

I used this same logic in another function to fetch properties and it worked, however, I want to put it in a hook because I will be using it in many other parts of the program. Please don't be mean and condescending with the responses, I am learning that's why I come here to ask.

const getAllProperties = async () => {
  const propertyRef = ref(database, "properties");

  const getProperties = async () => (await get(propertyRef)).val();
  const [allProperties, setAllProperties] = useState([]);

  getProperties().then((properties) => {
    setAllProperties(properties ? Object.values(properties) : []);
  });
  console.log(allProperties);

  return allProperties;
};
skyboyer
  • 22,209
  • 7
  • 57
  • 64
lams
  • 352
  • 1
  • 10
  • Are you sure it's `null` and not `[]`? – Konrad Apr 23 '23 at 20:34
  • it is [], empty array – lams Apr 23 '23 at 20:35
  • You should first get an empty array and then correct values when you get the response – Konrad Apr 23 '23 at 20:37
  • 1
    You should only use hooks like `useState` inside React function components or hooks. Hooks should start with `use` by convention. So this function should probably be called `useAllProperties` or `useFetchAllProperties` to signify that it's an async filled value. Having said that this function should work. Do note that `console.log(allProperties)` is logging multiple times. The first time it's called it will log an empty array, because the properties still have to be fetched. Once fetched, it should update the state and trigger a render in which it should log the properties correctly. – 3limin4t0r Apr 24 '23 at 14:52

1 Answers1

-1

Your logic is incorrect in two ways

  • access the variable after a .then won't be accessible instead use await because the code present after the .then will run soon after the function is called
  • state variable does not get updated as soon as it is set
setCount(1)
console.log(count) // will print pervious value

const getAllProperties = async () => {
const propertyRef = ref(database, "properties");

const getProperties = async () => (await get(propertyRef)).val();
const [allProperties, setAllProperties] = useState([]); // no need of this

const properties = await getProperties()

setAllProperties(properties ? Object.values(properties) : []); // no need of this

console.log(properties);

return properties; // directly return it
};
Syed Aman Ali
  • 151
  • 5
  • i want to return the state allProperties, when i try that, it is still [], but when i return properties i get everything – lams Apr 23 '23 at 20:43
  • yes allProperties will be empty refer this https://stackoverflow.com/questions/54867616/console-log-the-state-after-using-usestate-doesnt-return-the-current-value it is how reactJs works and also you didn't require that state in the hook remove it and directly return the properties – Syed Aman Ali Apr 24 '23 at 14:23