Reactの関数を定義する場所

Question

Reactの勉強のため、ReactとAPIでSPAを開発しています。
さしあたって質問があります。
例えばloginのような関数を定義する場所は、
➀親コンポーネントにまとめて定義してpropsで渡す
➁各コンポーネントに独立して保持させる。
のどちらがベストなのでしょうか？

以下に例を書きます。

➀
全ての親となるApp.jsに定義し、子propsで渡す

export default class App extends React.Component {

　login = () => {
  ---loginMethod---
  }

  render() {
    return(
      <LoginComponent login={ this.login }/>
    )
  }
}

➁
各コンポーネントが独自に保持

export default function LoginComponent() {
  const login = () => {
  ---loginMethod---
  } 
  return(
    <button onClick={ () => login }></button>
  )
}

個人的には、コンポーネントの付け替えが容易になる事から、➁の独自に保持させるやり方を取っています。
また、➀や➁ではないベストな方法があれば教えていただきたいです。
何卒よろしくお願いいたします。

Answer 1

例えばloginのような関数を定義する場所は、

➀親コンポーネントにまとめて定義してpropsで渡す
➁各コンポーネントに独立して保持させる。
のどちらがベストなのでしょうか？

どちらでもなく、「コンポーネントと別個に定義する」ことが可能ならそれが適切かと思います。