use hook issue about react

[hungcung2409]

@Eng1Mahmoud

• Your promise is created every render so it prints out multiple log.
• Just create a promise outside of Component and it will work as expected [codesanbox]

[amiii123malviya]

Is this issue still active?

[Eng1Mahmoud]

@hungcung2409 thanks it work fine now

[Eng1Mahmoud]

data displayed many time in console and then give me this error

[Eng1Mahmoud]

@jwinr So what is the use of use hook if I replace it with useEffect and useState؟

[AMANn5153]

If fetchData is being invoked directly inside the component body, it could cause multiple fetches on each render.
fetchData is an async function, but use expects a Promise or context. Since fetchData is not being invoked as a Promise but just passed as a function, it will not work as intended.

using useEffect hook can resolve this problem it will only fetch data once the component mount

[Eng1Mahmoud]

in react 19 use hook should be solve call fetch function inside comment, but it not work as expected @AMANn5153

[surenpoghosian]

@Eng1Mahmoud You can do it this way also

const fetchData = async (): Promise<Record<any, any>> => {
  const resp = await fetch('https://jsonplaceholder.typicode.com/todos/1*');
  const result = resp.json();

  return result;
};

export default function App() {
  const data = use(fetchData());
  return <div>{JSON.stringify(data)}</div>;
}