react urgently needs to implement lifecycle hooks.

@faradzhusaev4597

5 ай бұрын

It’s been there for years.

@r34ct4

4 ай бұрын

Yeah something like "component definitelyMounted" or something

For simple case @1:04 where have some non-primitive static, I just define it outside the function like below -- this way, not disabling lint rule (which agree, terrible idea) and not needing to resort to memoization. Or, just put inside effect like you showed if just referenced locally inside useEffect. ``` import { useEffect } from "react"; const analyticsData = { userId: 1 }; export function Demo() { useEffect(() => { console.log("analyticsData", analyticsData); }, []); return {JSON.stringify(analyticsData)}; } ```

Just loved this video, being a beginner in React, I always have encountered such problems and had to google them everytime but after watching this video not anymore. Kudos to you . Please bring more such videos!!.

Loved the way the problem and solution is explained in such a way that people can get it.

Stellar explanation as always, Darius. Thank you!

If React adopt Signal concept we don’t need to deal with - useEffect - useMemo - useCallback - memo anymore , and I hope they will add it

@cosdensolutions

6 ай бұрын

You can use signals in React already, try preact. However I wouldn't recommend, you will soon run into other problems and at that point just use another framework if you want signals

@ankitpradhan4183

6 ай бұрын

then get fkd debugging so many subscriptions to signals.

@RaZziaN1

5 ай бұрын

signals implementations in react use useEffect under the hood, so it's not good idea@@cosdensolutions

7:51 I believe there is a mistake. it will not until having a state update inside the useEffect.

Quick question out of curiosity, wouldn't it work if we again destructure the userId from anayticsData and add the destructured value as dependency ?

@Rulito2405

6 ай бұрын

I think it depends on the complexity of analyticsData. If there is a unique id present with a primitive value (string or number), destructuring the id or simply putting "analyticsData.id" in the dependency array will prevent unnecessary rerender. But I don't know, if this will satisfy eslint

Great video and something every React developer should be aware of. But to keep things in perspective, I'd also say that this is the only case that I can remember where I've ever resorted to disabling an eslint rule so it's not like all of React is this unintuitive (I'm not suggesting that this video is saying that it is!). I went through my code to find where I did that and the rule doesn't exist anymore so I must have worked out how to solve the issue sometime later.

what type of linting are you using that marks such usecases like on 1:40? Thansk!

Thanks so much, was absolutely clarify it 👌🏻

Hi Thanks for your video. I am having exact issue to resolve. But useMemo expect a dependency. I am calling customHook inside useMemo. If I use dependency, useEffect triggers for any change in the form (use form) Any thoughts. Thanks.

Amazing content, you got a new sub!

Super good info!!!! Greatly appreciated.

This is super helpful. Thank you!

What a great video. As i was learning react ive instinctly knew to not "listen" to eslint warnings telling me to add the used varaibles in the dependency array BUT I also didnt handle it the way you did (by moving variables in the useEffect itself OR useMemo). Instead I just left the warning as it was just a warning, but in no way I thought of adding the estlint ignore line even tho Ive seen people suggesting that solution..

When the react architecture shifted from class to functional based components, I was excited primarily because of such hooks but I never understood how they would compensate for the hinderance they cause to lifecycle methods and performance issues (repaints and re-renders) even though they simplified our work as a developer.

@___jd

5 ай бұрын

Class components are superior in every way. The hooks API is perhaps the least intuitive design pattern imaginable.

@user-rs1wk4dj6n

5 ай бұрын

Can’t agree with that. I enjoy with hooks much significantly than with classes.

@AnuMessi10

5 ай бұрын

@@user-rs1wk4dj6n as I said, it definitely improves the DX but at what cost?

@Sk8nRock

5 ай бұрын

I stopped coding in React around the time they first introduced hooks. I remember that a lot of people weren't convinced that hooks are a good addition, but I see that they were widely adopted anyway. Now a few years later I have picked up React again and I see that the library is still suffering from this bad architecture decision and keeps adding new "features" in order to fix all the issues that the hooks introduced in the first place.

keep such constants in a separate file, import and use or define them above the component.

Hi, Just a quick question..Cant we use const analyticsData = useRef({userid:1}) in this case?

@supTE

6 ай бұрын

I have the same question. Usually I use useRef for this situation.

@cosdensolutions

6 ай бұрын

yes, but only if you will never use that value in the JSX as it won't ever cause your component to re-render

@supTE

6 ай бұрын

@@cosdensolutions Could you explain this bit more? useRef does not cause re-render. Isn't it?

@cosdensolutions

6 ай бұрын

@@supTE check out the video I did on useRef and you'll get it! useRef is the same as useState just that it doesn't re-render the component when it changes. So it functions differently and it's for different use cases

@ahmadbenchakhtir5787

28 күн бұрын

@@supTE It's great when you want the same things like useState but without re-render, u can use it in useEffect dependencies...

great explanation, any recommendations for a react native course ?

@cosdensolutions

6 ай бұрын

I don't know any off the top of my head tbh. I just dove straight into RN from React and never looked back until this YT channel hahaha

Man this explained alot. Asides learning react for getting a job it's still fun to use. But if the react team fixes this will there still be a need for useCallback?

@cosdensolutions

6 ай бұрын

probably not, it's definitely coming, they're currently internally testing it in fb and instagram but it will take a while to come out

Dude just created 11 minutes video, on what is already explained by linter at 1:34. 😂

@harag9

6 ай бұрын

Unless a previous dev has put // ignore lint on the line. :)

@cosdensolutions

6 ай бұрын

☺️

The most important now is that we know how it should work after watching this video :)

Hey Cosden and other viewers, regarding the const analyticsData what if we need to use it in jsx code? we will still have to use it out of useEffect right??

@jordan_w

6 ай бұрын

Yes, if you create it inside the useEffect it will only exist within the scope of that function. So must be created outside of the useEffect to be accessed elsewhere (like in your JSX for that component).

Hey Cosden and other viewers, i get this issue in useState when using propsData as initialState in useState, so have to use an useEffect to check if the props is not empty an then update it. i tried googling but stackoverflow also suggests this way. is there better way to solve this?. eg: const Component = ({propData}) => { const [state, setState] = useState(propData || {}) // here state is set to empty object rather than propData } Edit: I did find a solution where you set it like this: const Component = ({ propData }) => { const [state, setState] = useState(() => propData || {}); };

great you are talking about things that are required in real world problem

As simple as subscribing state without initial render is not even comes by default, thanks valtio for provide such simple solution, but yeah react functional approach is some kind of engineering mistake

Super informative 👌

Excellent explanation!!!

I would put that object outside the component declaration so it’s created once per application start.

I am sorry if this is a dump question I am still a beginner but what is the problem exactly with just wrapping it up with useState I know that it might be constant value so we wont use the setState so we will just not initialize it, it fixes the problem.

@cosdensolutions

5 ай бұрын

it does, and there's no problem, but state is reserved for things that will change over time. If something is a constant, state wouldn't make too much sense even though it would work

Hey devs, I am new to React and 1 thing I am not able to understand here is if that trackEvent function gonna fire once and that's we kept no dependency in useEffect(), so why can't we run it inside the Component function body, directly? I am what am I missing? For Example: --------------------- const Demo = () => { trackEvent('pageEvent', {userId: 2}) return } export default Demo; --------------------- Can't we do like this?

What about make the reference as analyticsData.userId? Will it infinite loop?

And what if we wrap our object in the dependencies array with JSON.stringify ?

@cosdensolutions

6 ай бұрын

I've never done it tbh

@iliesseddik4118

6 ай бұрын

cause I think it can make our variable primitive (string)@@cosdensolutions

i always put the state in the dependency array whenever I think that the value will change. and will want to rerender the component.

I am actually facing this issue, where I am trying to add some initial search query params inside the use effect for some initial data fetching. And if I add the variable in the dependency array which holds the value of the search query param, whenever i navigate to a different path the useEffect sets the search query params again and it makes the query param persist in the immediate next path I navigate. Hence, I am just leaving the dependency array empty just to make it work correctly, where ideally the query params should get removed on path change

@cosdensolutions

6 ай бұрын

This sounds like it could be refactored to not have this problem, and maybe not even need to use useEffect

@ritankarbhattacharjee7661

6 ай бұрын

@@cosdensolutions how can I show you my code. I follow your channel and have seen you review codes 😅. Actually I am developing a site for my friend and this is the first project with which I started learning react js so it is possible that I am not doing it correctly

@cosdensolutions

6 ай бұрын

@@ritankarbhattacharjee7661 post it on the discord!

@ritankarbhattacharjee7661

6 ай бұрын

@@cosdensolutions got it

Im confused isn’t useEffect always got trigger every single render tho. And of course if we set the state inside the useEffect we should not add the state itself as a dependency.but in this case the variable is an object and it will never be the same when ever the component got rendered but however regardless of that variable the useEffect still gonna get triggered right. then why can’t we just have it as a dependency.Please someone correct me if i am missing smt.

@cosdensolutions

6 ай бұрын

useEffect runs always once on mount, + every time its dependencies change. So if there is an empty array as dependencies, it will only run that one time

React was much more intuitive before hooks were invented. Of course they have more pros than cons, but if your useeffects get messy it is better to use class component

I am having an issue where i am notifying react about events that happens on backend server through websocket , and react have to call a function that will fetch data from API , but on first the event it calls API 4 times and if there's another event React just doubles the amount of API calls and on next subsequent events it just gets out of control causing browser to crash and system lag. When i try this in svelte , there's no problem or any issues regarding this.

@cosdensolutions

6 ай бұрын

yeah React makes it a little bit harder unfortunately. But that means there's a bug in your code that you have to fix!

Stellar information

you should do a video about when to use useEffect vs eventhandlers to deal with side effects

Thanks a lot for this

useEffect never causes me or the teams/projects i work with any issues, strange i hear this so much... just that many ppl can't read? sounds plausible

Really nice video

Thanks for sharing

thanks for the video

Awesomeee!!

hi question why others use this useEffect(() => { var mounted = true if (mounted){ // run fetch api } return () => { mounted = false } },[])

awesome explanation keep it up can you make video on how to make useEffect hook custome i was asked in interview

do you mind to make video about react or next js with typescript ? your videos is great. it will be amazing to learn typescript from your video 😊

@cosdensolutions

6 ай бұрын

planning to make a "convert JS to TS in React" video soon!

beautiful

So we can use either the state or the usememo right ?

@cosdensolutions

6 ай бұрын

in this example yes

It is possible to use @preact/signals package react, which is for signals.

@cosdensolutions

6 ай бұрын

Yeah but be careful, they have a whole lot of other problems

Thanks a lot

Ah yes, adding new user switching functionality and not even testing it out? 10/10 pro dev move there

Thank you :)

I see them as change listeners (or render listener if array is empty) so basically I know what I want to listen to, and that's why I'm am surprised on how would you miss your dependencies. You don't know what changes you want to listen to ?

@cosdensolutions

6 ай бұрын

Trust me it gets really difficult when you have a big component with a lot of variables. Think 5+ dependencies per effect. You forget without eslint. Or you change your mind in development and refractor but forget to add it in the dependency array. Happens too often

@dimitmoto1716

6 ай бұрын

​@@cosdensolutionsThat happens now in the project I am working on. The code initially was not written by me or my teammates and we had to add features. One every feature we add there are a lot of bugs and we spend a lot of hours to fix them. The main components are 1000 - 2000 lines long ( I think that's an anti-pattern) and inside them there are a lot of useffects and it's very very difficult to find which useffect influences each functionality and of course if we have the right dependences in each useffect, when we add one feature. I wonder if there is a better pattern to track changes in the app instead making of overusing useffects.

The first problem stems from making static data local instead of defining it outside the component. Tho react (and react devs) usually don't care about needless variables (often a lack of useMemo). React just likes to let you do stuff yourself instead of helping you as a framework should

I was facing same error in my last project..but today got it actually things

Hey your thoughts on react forget.

@cosdensolutions

6 ай бұрын

Haven't looked into it too much but it's definitely interesting. Curious to see what comes out of it

alternative title: the problem with react

you can named analyticsData with upper case show data it must be a constant

Can someone point where is that rule? Or where did it came from?

@cosdensolutions

6 ай бұрын

react docs, it's how React is meant to be used

@asagiai4965

6 ай бұрын

@cosdensolutions I didn't see it on react site. react(dev)

@asagiai4965

6 ай бұрын

​@cosdensolutions to be clear I meant this 0:53 which you say is a hard rule. But I see react(dev) discourage using this. Instead they approve putting object or function inside the useEffect.

@cosdensolutions

6 ай бұрын

well yeah, the reason they suggest putting it inside is because if you don't, it has to go in the dependency array

vue ftw

I've seen eslint to suggest not only to have the object in dependencies but also suggest to included the function too, and that suggestion is worse 😅

@cosdensolutions

6 ай бұрын

you actually should put the function too, if it's defined inside the component. If it causes problems, just wrap it in useCallback

using async is a mess in react, end up with bunch of boilerplate and wrapper code so react wont break

Please do some videos on "signals''

why useEffect given Signals?

First rule of programming -> if a code works we shouldn't touch it. 🤣🤣🤣🤣

just declare this constant at module level or put it in another file

@cosdensolutions

6 ай бұрын

Won't work if you need state in it

Hello Sir I see your code review videos I want you to review my code also can you do that???

@cosdensolutions

6 ай бұрын

Post it on the Discord!

why cant they just make things clear like Mount() UnMount() Watch() Computed()

@cosdensolutions

6 ай бұрын

it used to be more like this before 😁

useEffect is probably the worst, useless and most illogical function ever created in software history. I'm convinced the devs who created it were on LSD.

you should do [analyticsData.userId] for the dependency array. try to get to a primitive type within any objects you are depending on...in this example, you are not depending on analyticsData changing, you are depending on the user changing. Then even if/when it gets changed to state, it will still work correctly. using state and putting [analyticsData] for the dependency array is still unsafe. you can setState with a new object somewhere and then it would fire again because of the new object reference even if the userId didnt change, but some other property of analyticsData did you just have to remember the dependency arrays are doing shallow comparisons.

I dont understand why React is so popular. It have so much magic tricks and rerender errors i fucking hate that.

React is mostly used because it just works, it's like JavaScript, does not matter how you do things it will (mostly) work, and that's why sometimes we may forget about this kind of details, or not having a worry about the cleanest solution, the fact is, other stack do a lot of things better than React, but right now React is the most used just because is like writing vanilla JS. Have to say that, React team should improve this kind of things, but also, a lot of people code using React and not even worry about learning programming basics, a little bit of JS and the React hooks behind the scenes, carrying on this kind of problems, and React team cannot do anything to change this, it's not only their fault. Things like value types, reference types, how is done memory management by X or Y language, what makes this hook to fire (React hooks documentation is pretty well explained, those examples you gave are in the docs, for example), etc. is developer responsibility and something all of us must care, and it's not a bad thing to say this, it's important to always remember that foundations can help simplify these types of things.

Your "error case" example is just plain wrong, nobody would ever do this. Don't blame react for your own mistakes. You can easily avoid these mistakes by RTFM. And no I'm not a react fanboy, I've worked with all the major framkeworks and they all suck equally.

I don't get why React is so popular, its full of tricks and traps.

Because „it’s a rule“ is a pretty bad explaination 😅

Yeah idk man. Been doing React for 6 7yrs but Vue is better.