If function is kept inside the component it will get re-initialised on every render which can be prevented with useCallback but that itself has some cost. Should we keep functions outside the component and pass props, state, state updater functions or whatever is required as arguments?
Yes, because this way it will be more convenient to manage the function, you build it only once and pass dynamic values to it. If you define it in every component of your code you will write the same function several times, which is not effective at all