It's weird how YT is flooded with "don't use useEffect" videos after that conf, almost like it should never be used XD

@StamyIIReturn

Жыл бұрын

Tbh I think as long as React is recommending them, we should use them. Too many youtubers claims to know "better".

@akshaysharma30498

Жыл бұрын

@@StamyIIReturn yep, useEffect was made to be used! Instead of going to the extent of external libraries to avoid it as if it's something really bad for the app.

@ranadenish

Жыл бұрын

I don't know why it started happening, so many KZreadrs making dumb videos just for a sake of making videos. But it's good in one way, that way the world will be balanced with really good devs and dumb devs. Kidding...

@veritas7010

Жыл бұрын

Also always easier to make banal content about don't do X than having to present various architecture methods in various scenarios. Obv viewership ROI has the short term monetary interests of creators held hostage

@bipinmaharjan4090

Жыл бұрын

Ya i have noticed this.

I think i'll continue to use useEffect to fetch data, downloading a library just for one fetch call (I'm working with Micro-frontends, so lots of small apps) in my app seems an overkill. it might not be the best way, but it works like a charm and it's not as cumbersome as presented

Amazingly concise summary! But on 8:50, you return the cleanup function after awaiting the fetch in the same async function and therefore it would not return until the fetch returns. A better approach would be to put the abort outside the async function and therefore it could be aborted even if fetch has not returned yet. Thanks for the great content btw.

Don't use useEffect but rather extra library that internally use useEffect - really smart choice. I have been working on enterprise management system with React and useEffect were and still will be my choice. I would always prefer to create custom hook whenever I feel that some common and repetitive logic can be extracted and reused, rather than jumping and relaying on 3rd party library for such a simple tasks.

@infoharian8442

Жыл бұрын

up vote, this is true. every hook always made by useEffect, so react query also made by useEffect XD

@redaelouahabi731

Жыл бұрын

YEAAh, that exactly what I believe , we prefere having more control / freedom over 'over-engineering'

@DisturbedNeo

Жыл бұрын

What's insane is this isn't just some dude saying "You should totally use this third-party dependency", no, *this is the React development team's official stance on data fetching* When the official documentation literally says not to use the built-in tooling, you know something's gone horribly wrong.

@anonimous__ho

Жыл бұрын

was looking for this comment to see if there still are sane people ....

I really appreciate this, well detailed content, Thanks a lot

Incredibly useful video, it helps me code much better in terms of code quality, thanks

Thank you ! Very nice and useful tutorial.

Great video. Quick question how is it different from ngOnInit() or ngAfterViewInit()?

what is wrong with changing state in useEffect (if its not causing endless execution loop)?

Great video, but you didn't explain why should i use react-query over native useEffect to fetch data. what's wrong with useEffect here and why i need a external library the do the thing ??

I have been using VueJs almost for 2 years, then i switched to react, and i will tell u, react is a pain in the ass, i spent a lot of time not knowing why in the hell there is a delay when updating an array, very annoying issue.

Thank you it’s a very good video

Amazing!

Do you have example to use react-query when you want set data in a select-input??, i could not to do it then i used useEffect :c

Where do event listeners go? I usually put it in the useLayoutEffect

Wow, the useffect hooks is really powerful, even though you are using react query you still had to use useEffect

useEffect makes sure that you are running the code in the last updated state

I usually tell my devs I work with, if your data fetching with use effect --> use react query. Pretty much everything you would be using the use effect hook you can probably use react query. I find myself only using this hook now and then to check mounting or maybe some very small side effect that react query imo would be a bit beefy to add for something like that.

@infoharian8442

Жыл бұрын

tbh, if you look at inside react query, they also pretty much clearly used useEffect when fetching the data. I mean, hook is always made by useEffect. adding the extra library to also use useEffect isn't that efficient, but very effective if you are worried about time coz react query simplify a things not make it better

@quelchx

Жыл бұрын

@@infoharian8442 I think your wrong. React Query has so many hooks baked in, it be in efficient to write half that yourself. I get what your saying but React Query is a standard and if you have a large team you can enforce a standard rather than have everyone write their own hooks. If your worried about bloat or something other than that maybe you shouldnt be using React. I never insisted using the library in replacement for a few useEffect calls, but if your managing state or data fetching it's top notch and actually is more efficient and straight forward -- like I said it enforces consistency. And patterns for a team to follow.

@lord_kh4n

Жыл бұрын

@@infoharian8442 Tell me you don't understand what react-query does without telling me you don't understand what react-query does

hi wnna ask you what is the diffrence between use costum hooks and use simple function

@akshaysharma30498

Жыл бұрын

Custom hooks are used when you want to separate out a functionality that can be reused (maintaining and allowing actions on its own state and, exporting the state and functions to alter it) in other components. For example let's say you want your number of components to have paginated API calls and don't want to use external library, you can create a custom hook which will maintain its own inner state of current page , total responses and all. Now this hook can be used in multiple components, and even in same component, multiple times to manage two different pagination states and actions. Other examples is managing the online status of your friends on your social media app across components (from react docs) You can head over to react docs as well, they're really well written 🙂

@zakidzz

Жыл бұрын

@@akshaysharma30498 thank you soo much

so writing hooks to do the same thing only provides readability not a difference in any functionality. It is still using the useffect to handle inside the hook so what is even the point of doing this. i am solely asking in terms of functionality?

there's a lot of misconception in this video, but thank you for sharing... 3:30 doesn't look like a good practice, it would recalculate the total on every render which is not ideal if the cartProducts did not change at all.

@tichouls5176

Жыл бұрын

yes, a useMemo would have been cleaner in my opinion. Although, he is right about not using useEffect in that case

Thanks to David Kourchid!

@RudraSingh-pb5ls

Жыл бұрын

For what ?

@thechrisgate

Жыл бұрын

@@RudraSingh-pb5ls useMachine

ok now I'm happy to not use useEffect anymore even I was struggling with it so now I'm happy about it thank u bro

@infoharian8442

Жыл бұрын

tbh, if you look at inside react query, they also pretty much clearly used useEffect when fetching the data. I mean, hook is always made by useEffect. adding the extra library to also use useEffect isn't that efficient, but very effective if you are worried about time coz react query simplify a things not make it better

@Salah-YT

Жыл бұрын

@@infoharian8442 ok bro thx for the info

very amazing, i can't find in your github where this source code is

💯💯👍

I was thinking if its better to wrap the logic in to a class and expose all actions in functions and result of that actions in properties of the class. For example, a have a table where a need to edit a value or sort, filter, selections and convert the list in a array of itens for pagination. You have only to sync one useState to save and update the state of the class each time you call some function of the class that changes all his properties. By the way thanks for the vid, aways aprecciate your content.

@CW91

Жыл бұрын

What you described exactly matches the purpose of useReducer() hook

make a complete video on react query

tbh, if you look at inside react query, they also pretty much clearly used useEffect when fetching the data. I mean, hook is always made by useEffect. adding the extra library to also use useEffect isn't that efficient, but very effective if you are worried about time coz react query simplify a things not make it better

Last attempt. There is no problem with “useEffect” + “fetch”, when you use the react-query, it does exactly this, but hidden this to you with the lib API, this information on the video is misleading. Please address this, you are misleading the community.

``` const totalPrice = cartProducts?.reduce((p, c) => p + c.price, 0) // not the same as const [totalPrice, setTotalPrice] = useState(0); useEffect(() => { if (cartProducts) { const total = cartProducts.reduce((p, c) => p + c.price, 0) setTotalPrice(total) } }, [cartProducts]) ``` the are not the same, because the second version is actually correct. First one will hold `undefined` or integer in `totalPrice` variable, while in the second example it will be only integer.

dude is calling useEffect bad practices saying "it makes no sense" since this is what everyone was taught this way when hooks launched 💀 this just sound like self pleasure pointing out things you know; anyway the video is informative at least

Uh, while in some cases I agree that useEffect should not be used (like data transform), in other I strongly disagree (data fetching, as someone pointed out, don't use useEffect, instead use library that internally uses useEffect anyway, increasing app bundle and possibly code complexity in this process - really...?), video lacks detailed explanation WHY you should not use it.

TBH I was hoping a more native way to handle data fetching instead of just promoting react-query.

@0xmaster584

Жыл бұрын

not to mention this is just almost just a video reaction to that state-machine talk on react-brussels, lol

@case6339

Жыл бұрын

This video is a good summaryof official react docs and in those docs (beta ones) it is clearly stated that they want us to use react-query and like instead of useEffect.

@0xmaster584

Жыл бұрын

@@case6339 Yes sir I see that but I think it's just me, I just hoped there's a non-3rd-party solution for it.

@infoharian8442

Жыл бұрын

tbh, if you look at inside react query, they also pretty much clearly used useEffect when fetching the data. I mean, hook is always made by useEffect. adding the extra library to also use useEffect isn't that efficient, but very effective if you are worried about time coz react query simplify a things not make it better

Looks like my comment was removed. Sad.

@ShinSpiegel

Жыл бұрын

Nice to see that this channel allows people to show when the author of the content fails to explain stuff.

I don't think the point on data fetching holds true. Data fetching with useEffect is not a mistake - sure there's helper libraries, but that doesn't mean data fetching goes against what useEffect should be for. And while you do mention that the react docs say this is a valid use case for useEffect, this can still cause confusion and be misleading to beginners.

i dint understand a shit in this video yes i know cos i am beginner for react but still grinding and such code affraid be because this think is not making any sence to me .. but indeed its doing some imp tasks

Since when does xstate simplify code and make a developer's life better? Is this an advertisement? There is such a boilerplate that horror)

This is actually the best example of click baiting. One if the worst react video in youtube.

@infoharian8442

Жыл бұрын

true, react query also used use effect inside it XD adding extra library just to simplify fetching data also too much overkill

sorry bro but your voice destroy me ears :/