DEV Community

Discussion on: Why custom react hooks could destroy your app performance

Collapse
wintercounter profile image
Victor Vincent

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} />
Enter fullscreen mode Exit fullscreen mode
Collapse
adevnadia profile image
Nadia Makarevich Author

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

Collapse
wintercounter profile image
Victor Vincent

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