The problem with useEffect

VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"

Let's talk about useEffect in React for a bit. There is a real problem with useEffect that we, as React developers, need to address. useEffect doesn't make it easy for us to follow its rules correctly, and that usually leads to developers taking shortcuts and shipping bugs in production. The rule is this: anything that is used in the useEffect is considered a dependency and has to go in the dependency array. It's the rule. If you have to wrap the dependency in a useMemo or useCallback, then you have to do it. Don't ignore it like many developers do and don't disable eslint! It's going to come back and get you later!

[shivamsharma]

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

[RolandAyala]

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
}
```

[yashmundra]

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!!.

[hugorafaelmc]

react urgently needs to implement lifecycle hooks.

[erik.schlegel]

Stellar explanation as always, Darius. Thank you!

[carloseduardoraezescarcena]

Thanks so much, was absolutely clarify it 👌🏻

[xiiEJRAM]

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

[manutube]

Super good info!!!! Greatly appreciated.

[Voltra_]

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

[ahmadbenchakhtir]

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

[JaffyMaglinte]

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

[alanthomasgramont]

Everyone forgets about Angular, but a lot of huge companies use Angular. Angular is far easier to work with and understand if you come from Java, C# or C++, especially their service injectors and state managers. Just don’t over use RXJS and you’re golden.

[uploadxxl]

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

[mountaindev]

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

[irfansaeedkhan]

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

[nonequivalence]

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.

[zenova]

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

[shubhamshekhar]

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

[Mroskas]

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

[IoanAlexandruAndrei]

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