CODEWITHSUNDEEP
reactjsdesign-patternsreact-hooks
Ali Ahmadi
Ali Ahmadi

Reputation: 741

Do I need to worry about performance impact of calling useHook when its not used?

Let's say I have a component like this:

import { useSnackbar } from 'notistack';

const Button = ({ onClick, confirmClickEnabled = false }) => {
    const { enqueueSnackbar } = useSnackbar()

    const onLocalClick = (event) => {
        if (confirmClickEnabled) {
            enqueueSnackbar({variant: 'Confirmation', onYes: () => onClick})
        }
        else        
            onClick()
    }

    return <ButtonBase onClick={onLocalClick} >Button</ButtonBase>
}

export default Button;

If confirmClickEnabled is false, do I need to worry about simply calling a hook such as useSnackbar() affecting my performance or not?
Please note this button is going to be used a lot, for example, if it's used inside a grid that has 10000 rows, it's used 10000 times.

Some additional info about why I need this that you might like to read:
I'm creating a fairly complex library that has its own Button, I was thinking of adding the "confirmClickEnabled" feature where if the button is clicked it shows a notification and asks the user if he is sure that he wants to proceed.
A very easy solution for me is simply implanting this feautre inside my Button component and only using it if the confirmClickEnabled is true but I'm worried about any possible performance issue that calling the useSnackbar which is a hook for another library might have on my Button component

Upvotes: 0

Views: 38

Answers (1)

Nicholas Tower
Nicholas Tower

Reputation: 85132

do I need to worry about simply calling a hook such as useSnackbar() affecting my performance or not?

That entirely depends on what useSnackbar does. It looks like all it is is a wrapper for useContext, so the execution time is trivial. Listening to a context does potentially mean that if the context value changes the component will need to rerender, but they have correctly set the context value up so it does not change.

Rendering 10,000 rows may still cause you performance problems, but if it does it won't be because of useSnackbar

Upvotes: 1

Related Questions