Common React Mistakes: useEffect - Part 2
ฝัง
- เผยแพร่เมื่อ 6 เม.ย. 2021
- Let's build on part 1 ( • Common React Mistakes:... ) by looking at the cleanup function on useEffect to make sure that we are using timeouts, intervals and registering event listeners properly.
Part 1: • Common React Mistakes:...
If you liked this video, buy me a coffee! www.buymeacoffee.com/bluecoll...
Hope you folks enjoy this!
👉 If you enjoy this video, please like it and share it.
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Weekly free newsletter: www.jackherrington.com/subscr...
👉 Discord server signup: / discord
💢 Watch our other videos:
💟 Hacking your Github contribution graph: • Hacking Your Github Co...
💟 Build a KK Slider Slider: • Build A K K Slider Sli...
Thank you for watching this video, click the "SUBSCRIBE" button to stay connected with this channel.
Subscription Link: bit.ly/2E7drfJ
#reactjs #useEffect - วิทยาศาสตร์และเทคโนโลยี
![[4K직캠] BABYMONSTER(베이비몬스터) - FOREVER](http://i.ytimg.com/vi/PS3UAFto1z8/mqdefault.jpg)
You are truely a Principal software engineer.
i was working on vuejs previously, just recently started learning react with real intent and found your channel, everything started to fall in place and made sense to me, ive seen other videos on react as well. this is great content. highly appreciate the effort. thanks jack.
gold gold gold gold gold!! These are some of the best quality overviews for more advanced concepts in React. Completely applicable to real-world scenarios, and delivered in such a wonderfully approachable way! Amazing channel.
Apart from the tutorials, which are absolutely fantastic, I love the fact that you engage with your followers and actually respond to the questions asked in the comments. I've picked up 2 things that's been bothering me just by reading the threads below. Thanks for a great channel and keep up the good work and focus.
Great video: great production values, good use of time, nice presentation, pleasant personality, and super-useful info. I love your work!
wow...just wow....Need more advanced hooks videos or require an entire series just on hooks....Awesome Jack, loved it keep it up :)
Very grateful to you.
It is really helping me to master the react.
well I think it goes over my head but I'll try to practice and come back to understand properly.
I just had a tech challenge for a React job interview last week. Bit more complex exercise, but this was the bottom line. The component didn`t unmount, so no trace of the leak in the browser. I was writing the required component tests first, so Jest caught me the memory leak, I went with the clearInterval solution. I think It went well, will see :) It`s nice to see your solution retrospectively, gives me some confidence.
Thank you so much uncle, Jack.
Awesome lesson again!
I end up saying the same thing on your videos, but that's pretty much the only thing I can say. Great video, great explanation and examples. Thank you!
Great video! Buddy!
Liked. Subscribed. Thanks.
Really glad to have discovered this channel last year. Tutorials that aren't common on the internet. Speaking of uncommon tutorials...Would you do one on plugin architecture & implementation? I mean like how shopify or Wordpress is a platform & provides facilities for plugin development for added functionality not included out of the box? Wonder how no one hasn't done it by now. Your easy to understand explanations are tip top!...continue with good work
I've done a video on using ScandiPWA for plugins, and also another on using Module Federation for plugins. I think the ScandiPWA has more legs because it's specifically designed to be a plugin framework, and they've recently done a lot of work that I haven't had time to cover to allow for plugins on CRA and NextJS. Here is a link to their site: plug-js-landing.vercel.app/
Nice content. Thank you
I LIKE THIS GUY!
This is priceless. 👀👍🏽
thank you are the best
what do you mean at 18:24 that if the ref changes (move that to a different div ... ?) i didn;t understand
I love the deep knowledge of react that you provide like how everything stuff work under the hood..
but one thing I am just wondering like react give me a warning of memory leak when we fetch data..
please make a video for it when fetching a network request and so on..
Hi Jack - Great tutorial ( you really know your stuff for sure) - I'm trying to extract your code into an actual component but it's killing me. Is there anywhere I could download a working copy of the code used in this video? I'm sure I can then get it working as a functional component. Much appreciated.
Great video! Would be great to dig into why using the previous timer state object solved the counting problem. I suppose the closure it creates is the magic there.
Can you give me a time reference?
@@jherr , thanks Jack ... at 6:07 ... “ what u need to do is use the version of setState” that returns the prev version of state setter that gives u the current value object as a function. This is the closure i was referring to.
6:07 to 6:21 where currentCount is mentioned. Im at point where i can get thrown off by this in my code, so its super helpful here to step back and walkthrough samples like this ... like u said to build up some confidence and lock in understanding. Oh, i wish you had a paid course! Id be there 👍
@@mmmmmmm8706 Ok gotcha. The trick is in realizing that there are two values here, the "count" which is state managed by React, and then that "captured count" which is zero because that was the value of "count" at the time when the useEffect callback was run. "Captured count" will never change. So in order to get access to the real count we use the callback version of the state setter which is guaranteed to give us the current state value, and then we can add one to that and everything works.
Ah... closures.. they are amazingly powerful, but also super hard to reason about at the same time.
@@jherr , couple in the fact that useEffect is run after render ... still easy to confuse myself here, my components can sometimes display an old value when im expecting the new one to render(sorry if thats confusing). Much appreciated, Jack!
Can clearInterval(intervalID) only be used in useEffect cleanup variant as the same thing I tried in onclick event but it didn't worked ?
I'm not sure I follow. Are are you creating a timer on a click? If so I would store the returned interval value in a `useState` value and then use a cleanup function in a `useEffect` (that did nothing else) to kill the interval on component unmount. That's a pretty complex way to go.
What would be easier would be to have some state that said whether or not you should have a timer. And then a useEffect that watched that toggle state and creates/destroys the timer as I showed in this video.
To talk more about this jump on my Discord server in the #react channel.
Can anyone explain at 5:55 why count value in setInterval function is 0 even after components rerender and creates new closure?
Because the effect function is still the same since the effect function wasn't re-created when the component was re-rendered since the dependency array is empty.
Without the "clearInterval", my counter increases in multiplication of two, like : 2, 4, 8,... I don't know why that is.
Probably hot module reloading. Try refreshing the page.
@@jherr It was as a result of useEffect being called more than once in React 18 StrictMode. You treated that in another tutorial. Thank you so much for your great contents.
What camera did you use to film outside?
Sony A7 with a 35mm lens with ND filter.
Very nice video about cleaning up, in between I want to know the difference between functional and class based component? Why it needed for Facebook to introduce that...
Class based components came first. Then function based components. But originally functional components couldn't have state. So FB added hooks. And now most folks choose functional components as the primary mechanism for defining components because they are simpler and more performant than class based components.
@@jherr thanks
*_React: Turning building of basic UIs into rocket science since 2013™_*
giphy.com/clips/XBLRIlD2Hw2kONXwzI You're not wrong.
I've been working in React hooks since they went live, and I still am having trouble knowing when to use useCallback. What are general use cases and advanced use cases to utilize the hook?
Any time you are creating a function within a component or in a custom hook. For components you might be able to get away with NOT using it if you are NOT passing it to another component. The issue is really referential integrity. useCallback ensures that you don't create a new callback function unless the underlying data used in the callback changes.
@@jherr So say you are building a form and not using a form library, would you use useCallback for setter functions, or can you use simple arrow functions? Would useCallback only be useful if these setter functions would be passed to controlled components with deeper propagation?
@@ShaggyKris Yeah, in the case where you are not using a form library then the usual arrow function is probably fine.
I totally understand that this advice is basically the opposite of Kent C Dobbs is saying in his article about it. His position is, use anonymous functions unless you know you need referential integrity. And mine is basically use useCallback unless you know you don't need referential integrity.
But I think those are actually the same position, it's just that I think, if you are just using hooks and custom hooks for state management, you need referential integrity a lot more than you think you do because dependency arrays depend on it.
Now if you are just using a few hooks here and there, and you are using a state manager for the big state management, then I don't think this stuff really matters all that much.
@@jherr Is there a way to use useCallback for things such as event listeners to maintain current state values when executing functions without the need of using a useEffect that depends on said value, removes the previous event listener (via return), and then adds a new event listener with the current function reference? Or would you need to update a ref or something to achieve that?
@Kristofer Pervin Totally a good thing to do:
const onAdd = useCallback(() => setCount(count + 1), [count]);
To me is more declarative than:
const onAdd = useCallback(() => setCount(c => c + 1), []);
And it's certainly better in the case when you have several pieces of state all that need to be adjusted.
Could you please tell me the theme?
Why did you use a useCallback inline function instead of an arrow function?
It's not particularly necessary in this case. If I were to create a callback as part of a custom hook, or I passed it to another component, then I would always recommend using useCallback in that case because of referential integrity.
@@jherr Do you have any further resources on referential integrity and performance optimisation, please?
@@mikewilliams5571 I have covered it in the past, but I don't have a specific video on it. But Kent C. Dobbs has a good article on it: kentcdodds.com/blog/usememo-and-usecallback#so-when-should-i-usememo-and-usecallback I will say that I vary a little from Kent, in that I have a preference to use useCallback and useMemo and his preference is to not to use them until there is a problem.
Maybe I’m too tired to think straight… How come we don’t use useCallback on click handlers like onClick?
By the book we should have been all this time, but... in a lot of cases it doesn't matter. But if you are building a custom hook, or passing the click handler down to sub-components then you should use it because of referential integrity.
The downside is a very small performance penalty in the cost of the useCallback call and the comparison of the dependency array.
Where does “currentState” come from?
Can you give me a time reference into the video so that I can be a bit more helpful?
@@jherr Of course. 6:22, line 12. I'm assuming "currentState" is something that can be called on any state, but I"m new to React and just haven't seen or heard of this, and not sure what the difference would be between "count" and "currentCount."
@@delcambrem Ah, I see. There are two ways to call the state setting function returned from useState. The first is with the new value you want for the state. And the second is with a function, and that function gets the current value (so "current count" in this case) and then it should return a new count based on that original value.
Was this live? If so, shucks I just missed it by 12 mins! :/
Nope. Live happens on Friday. This is new. ;)
The ref part is a bit confusing!
So what's the deal with the guitars in the background of youtube tech videos? Is that a meme, insider joke, or coincidence? Never a banjo, piano, or kazoo?
Why not? It looks cool. That's just a wall in my office. :) No inside joke.