Interview Question 🔥🔥

[@professormoriarty7439]

We are not supposed to make callback function in useEffect async we should make a separate async function inside useEffect to make api calls and call it i side useEffect itself
This code will give error

[@edwardgaming5681]

Reason: useEffect expects a cleanup function or undefined as return.
But async function always returns a promise that’s why it will throw an error.

[@ArjunSingh-jv2pm]

useEffect() in React is designed to handle side effects in a synchronous manner. It expects a synchronous function as its argument, meaning the function you provide should not return a promise. However, an async function always returns a promise, which is why it cannot be directly passed to useEffect()

[@edwardgaming5681]

useEffect expects a cleanup function or undefined as return.
But async function always returns a promise that’s why it will throw an error.

[@yogeshsaini9021]

no it's because of useEffect hook structure. we have pass a synchronuous function in useEffect hook and now we can write logic in it

[@edwardgaming5681]

@@yogeshsaini9021 bro I explained the structure of useEffect only.
The reason why sync function is needed because the return of async function is always promise. And in use effect it expects a cleanup function or undefined as return not a promise.

[@MayurVilasPatil-l8w]

useEffect expects a cleanup function or undefined: An async function returns a promise, not a function, which violates this expectation. This may cause React to throw a warning like "Effect callbacks must return either a function or undefined.

[@dhaneshdhanawade]

Please provide answers as well it will help everyone

[@ashwanikumar415]

useEffect() is written in a way where it expects synchronous function as an argument. Async function returns a promise .

[@rushikeshjagtap4263]

We cannot use async for useEffect, it will throw error,
So this code is WRONG.

[@RohitVijayvargiya-gk7vg]

ERROR - useEffect hook expects a function as its argument, not a Promise or async function

[@pratikdas9469]

Async is provided already in the arrow function

[@qwerty-fx6gb]

​@@pratikdas9469 Yes but we need to define another function inside useeffect callback function

[@arnabsarkar5245]

This code is wrong. We cannot pass async function to useEffect(). It will throw an error. We can write the same function inside of a normal function then call it inside of the useEffect hook

[@Real_Life126]

Work is good but apka debounce function kaam nhi kr rha hai apne uper console lga rkha hai but still actual me api call ho rhi hai or utni hi bar ho rhi hai jitni bar user keypress kr rha hai please check your code

[@rajanayak1274]

This is code will give an error. Instead of this we can use Immediately Invoked Functional Expression In React (IIFE) ()().
useEffect(() => {
(async (req, res) => {
try {
const response = await fetch(url);
const data = await response.json();
setUsers(data);
} catch (e) {
console.error(e);
}
})();
}, []);

[@shubhambisht4775]

but if we want to after value update this IIFE function call then?

[@Ali-py8yh]

It will give error as async return promise and I think UseEffect doesn't return any callback

[@mkb-se7kw]

this will error out bcz async function return a promise, use Effect does not return any call back

[@himanshuvatsh900]

Async function wont work in useEffect

[@deepdas7674]

I will not works because async function return a promise and useEffect doesn't return anything so it may be occur an error

[@charmilakondayagunta584]

First thing is there is no parameter being passed in UseEffect
...so this UseEffect keeps executing continuously and also doing a setstate in UseEffect throws error for using setstate inside useeffect

[@RohitVijayvargiya-gk7vg]

since the dependency array is empty, it will run only once (at the initial load) and not infinitely. Also, we can do setState inside useEffect without any problem.
PS - Dont comment wrong answers

[@pratikdas9469]

​​@@RohitVijayvargiya-gk7vg no you cannot bcoz within one hook you cannot write another hook

[@RohitVijayvargiya-gk7vg]

​@@pratikdas9469 who said anything about creating a hook inside another hook!?
My statement was that we can use setState inside another hook. its a basic concept bro...

[@pratikdas9469]

@@RohitVijayvargiya-gk7vg you are stating, setState,
Setstate itlself updates the state how can you use inside an useEffect...
Its an utterly basic thing is
1) setState is used in class component...
You cannot take reference in functional component... So you need to hold the state to update by this.setState()
2) useEffect---> you cannot use Setstate inside inside useEffect.. Or any other hooks.. Not at all..
Without arguing plz go through docs
Its against the rule of hooks

[@RohitVijayvargiya-gk7vg]

​@@pratikdas9469 im not even referring to setState() of class component man, im referring to general case of using useState hook in react. something like this -
const [data, setData] = useState([]);
(where setData is the setter fn)

[@anandagar2k]

Yea it should work

[@KumbaKarnudu]

setUsers must be in dependency array I guss. eslint will throw warning. and cleanup funxtion is necessary in this

[@kshitijtidke6858]

Correct work

[@nishantsethi6625]

I believe no async in useeffect

[@aviralkhandelwal7927]

It will give warning of memery leak because you use async inside the useEffect.
To avoid the warning, you can clean the effect or just use async promises in another function and call the function inside the useEffect.

[@sreethejanarla2855]

Yes, better way is to write the async function call inside useEffect rather appending async directly to the hook.

[@chunckyfreshnut]

How is URL passed

[@kshitijtidke6858]

And dependency array is needed here

[@nirmalraj127]

Will it give us error

[@pvijay-w5v]

error

[@saitejaboda3782]

No