DEV Community

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

View post
Collapse
 
wintercounter profile image
wintercounter •

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 •

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
wintercounter •

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