functions declared in function components that use react hook

Question

My question is more oriented on the performance side I believe. In the following case I am rendering a select component.

Is there a problem (or a performance problem) in redeclaring the onValueChange function each time the select rerenders itself? Because in some other scenario we will have to go back to classes which will declare the onValueChange function only once.

Putting this function in the same file in this particular case would mean to send almost all the parameters received and the rest of the consts.

export default function CustomSelect({data, keyFn, displayFn, onChange}) {
    const [selectedObj, setSelectedObj] = useState({})
    const [selectedObjId, setSelectedObjId] = useState('')

    const onValueChange = event => {
        //use of data, keyFn, displayFn, onChange
        onChange && onChange(selectedObj)
    }

    return (
        <select onChange={onValueChange} ...>
            ...
        </select>
    )  
}

Depends how big your app is. In general, no there won't be a noticeable difference. However, calling it externally would probably be better — kemicofa
– kemicofa, Commented Apr 1, 2019 at 12:21
You don't need to go back to class-based, you can just put the function in the file, not inside the functional component. — Colin Burke
– Colin Burke, Commented Apr 1, 2019 at 12:23

Colin Burke · Accepted Answer · 2019-04-01 12:26:35Z

1

You don't need to go back to class-based, you can just put the function in the file, not inside the functional component.

Alternatively, you can use something like useCallback() to memoize the result of your function.

Reference here.

answered Apr 1, 2019 at 12:26

Colin Burke

17.3k13 gold badges57 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

functions declared in function components that use react hook

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related