I use functional components. If I import global state (either through Context API or Redux) into a functional component, if the global state changes, the function component will re-render and the functions that are inside it will be re-created. And yes, I know how to prevent this with useMemo and useCallback...etc.

Whenever I write a pure function I try to place it's definition outside of the functional component to prevent the need for it to be re-created on subsequent renders. Many of the functions I have to write inside of these functional components rely on state from either a global store or local component state and so I must define them within the functional component itself.

My question has 2 considerations; performance, best practice.

Would it be bad practice to define my functions that rely on state (either global or local) outside of the functional component itself and pass the state needed as a parameter to that function? If so, why?

A follow up question, would the performance increase of doing this be negligible?

A contrived example of what I'm talking about