useEvent Hook Snack š® and Announcing new Youtube Channel āØ
Hey friend,
Wishing you a happy new year :) I hope you had a relaxing time off! š
Thanks for all your support in 2022, and I hope 2023 is a fantastic year for us all!
During the holidays, I did a lot of thinking about how I can continue to help you grow. And for that, I have lots of topics planned. More on that in the coming weeks :) Let's review our weekly snack,
Our Weekly Snack: useEvent
What is useEvent?
Imagine if you want to execute an on-click handler code for your child component inside the parent component. You would do something like this,
Now, if the Parent component renders, it will re-render and re-calculate handleOnClickHandler because that's how React works.
This could lead to a massive performance hit ā”ļø if the ChildComponent also had a few other components. This means if handleOnClickHandler renders, ChildComponent will re-render, but along with that, all the components that ChildComponent has declared. This could be better.
How can we get around this?
We can use useMemo, but we are patching the problem instead of fixing the root cause.
The correct solution would be to make some changes inside handleOnClickHandler, which doesn't cause the re-render of the ChildComponent. š¤
Introducing useEvent āØ
Once the function is created, it will give you the reference. It is a more powerful useCallback(). That's a game-changer when it comes to preventing child component re-rendering.
Let's review a snack for this,
Frontend News š„
We discussed useEvent today as the React team is now looking to change its name to useEffectEvent. Please take a look here, š
āReact team is renaming useEvent to useEffectEventā
Announcing My Youtube Channel Launch š
I have recorded 2 videos on my channel, and many more are coming up.
Check it out and subscribe to my channel for more content related to Frontend, Leadership and Career Development. šŖ
I hope you have a great day!