useEffect is one of the most common React Hooks which every ReactJS developer should know. But using useEffect the right way is not easy as you mig...
For further actions, you may consider blocking this person and/or reporting abuse
Well done! I've read a lot of articles about hooks but this is the first one that actually explains what side effects are.
Two minor corrections:
Memorization should be Memoization.
Your setInterval will log every second, not every minute.
Thank you very much. :D Fixed
Hey there, It was amazing. I am having a little doubt.
Is it worth it to memoize the component who has useEffect hook?
Every time some dependencies is going to be changed, the callback function will trigger! So what's meaning of memoization here!
It depends on the scenario, the main purpose of using Memoization here is to prevent unnecessary re-render (i.e the List only cares about fakeList, but it's re-rendered just because of changes of other stuff). Actually in real-life project, determining whether to use Memoization or not is much more complex than that.
That's great.
Cool article. Thanks.
By the way, the 'useCallback+useMemo' sandbox example is a bit wrong. It includes
console.logfor mountedListwhile not havingfakeListdeclaration wrapped intouseMemo.Nice article, thanks. There are a couple of errors in the first code snippet under section 2b, though.
useEffectconst List = memo(({ list }) => ...(note the curly braces aroundlist)fakeListshould be an arrayfakeList = [...]and not a functionfakeList = () => [...]great. when I start to learn useEffect at the beginning. I didn't know why all effects were called at the first time even though the dependancies didn't change. Now I know the tip from you. However, I had to arrange useEffect in order so that the effect work as I expected.
It's been sometime I used react,
If my memory is correct, ur useRef variable isMounted should also be automatically part of dependencies array doesn't it?
If u don't add it, IDE doesn't complain?
Maybe someone could u get this to my head.
If I understood your question right - no,
ref(isMountedin this case) should not be a part of dependencies because it is something different (from the 'state' for example) by nature. That said, changinguseRef.currentvalue does not cause the re-render, so it's just being changed 'silently' and only help theuseEffects to fire when they really should.Great post, anyone who is confused about useEffecf must read this.
Great post! Loved the bit about using refs. I discovered this at work and looked for a solution and found it.
Saved a lot time. I really likes isMounted solution, it works well for my app. Thank you for sharing..
I believe useEffect shouldn't even exist. It's an anti-pattern, a bad practice. Instead we should be able to subscribe to changes of individual variables.
About the title, it's a way to build interest among readers.
In my opinion, all blog posts are retell the official docs someway, but the point here is that I try to explain and give examples about some cases I think it's not really clear in official doc and want to share my point of view and my experience about it. :D Sorry if it bothers you.
You are right @trunghieu99tt .
Hay quá anh
Awesome Thank you.
Good!
amazing post, thanks bro!
đẳng cấp là đây chứ đâu 😁👍
có điều đôi khi mình vẫn phải vô đây xem lại để làm cái reference vì thằng useEffect này kg quen sẽ bị bug ở đâu mà kg biết như nào XD
This is exactly the kind of article we miss on React.👍