DEV Community

Why custom react hooks could destroy your app performance

Nadia Makarevich on January 24, 2022

Originally published at https://www.developerway.com. The website has more articles like this 😉 Scary title, isn’t it? The sad part is that i...

Read full post

Paul • Feb 3 '22

Great article and explanation, you make it so clear and concise very well done. Just wanted to make sure I understood that the ref isn't needed in the final code snippet.

<ModalBase onClosed={close} isOpen={isOpen} ref={ref} />

Nadia Makarevich • Feb 3 '22

You mean in ModalBaseWithAnalytics? (this is the last one)

Or for one of the ModalBase before? On <ModalBase it's always needed, since it passes ref down to the div. On ModalBaseWithAnalytics it's not needed, since the ref is created inside of this component

Victor Vincent • Jan 25 '22

The article in general is great, covers a lot of mistakes devs can make, just one thought that can easily solve the problems:

Generating componenets dynamically inside components/hooks is bad practice. Should be avoided in almost every case. Instead the Dialog component can be separated and it can expose API through its ref. This is a method a lot of 3rd party libraries are using for performance reasons.

const dialogRef = useRef()

useEffect(() => {
    dialogRef.open()
}, [])

return <Dialog ref={dialogRef} />

Nadia Makarevich • Jan 25 '22

I agree in general, creating components is usually quite bad :) But in the article most of the performance problems come not from it, but using hooks in not the most optimal way

Victor Vincent • Jan 25 '22

Yes, that's just a sidenote :) However, having state management inside the component and exposing the API through ref resolves the performance concerns.

Raí B. Toffoletto • Jan 24 '22

Nice article. 🎉 But I Never thought about putting rendered components inside hooks like your modal. For me they were always a way eiyher to access context or reuse logic.

Nadia Makarevich • Jan 25 '22

Good, then you don't have to fix them :D Creating components in render is usually terrible. It's only okay for something like modals, when we drop the DOM after it's closed.

JohanWerther • May 31

I don't think that its a good idea putting a component inside a custom hook, either with a useMemo or without it. You're creating a new component each time it must be reevaluated, I think, instead of just passing new props and rendering just what's necessary.

Hooks are meant to decouple the from your components, not for putting them inside hooks. Behavior of hooks inside of hooks is predictable, I think, because they have the same behavior inside the custom hook that at component level

Arpan Patel • Feb 14 '22 • Edited

Thank for the greact article. Just a quick question.
What benefit below memoization in useModal hook provides?
return useMemo(
() => ({
isOpen,
Dialog,
open,
close,
}),
[isOpen, Dialog, open, close],

I don't understand how it prevents host component from rerendering.

Nadia Makarevich • Feb 14 '22

It doesn't, that is the problem. Regardless of what we do, it will re-render.

Arpan Patel • Feb 15 '22

got it. thanks

Konstantin Kovalev • Feb 1 '22 • Edited

Probably, the only final change you need is to put [] in your useEffect as a second parameter. For me it works fine here codesandbox.io/s/re-renders-bad-wi...