最近Reactのコードを書いていて親から子へのpropsの渡し方って色々あるなと思いまとめてみました。
多分他にも色んな渡し方があると思うので随時更新していきます。

前提として親コンポーネント(App.tsx)から子コンポーネント(Home.tsx)へ

const user = {
  name: "tanaka",
  age: 25,
};

このuserのデータを渡すという前提で考えます。

・(1)userの情報を分けて渡す

親コンポーネント(App.tsx)

// userを用意
const user: Props = {
  name: "Tanaka",
  age: 25,
};

// userの型を用意。exportさせておく
export type Props = {
  name: string;
  age: number;
};

/* 
  子のコンポーネントへuser.nameとuser.ageをそれぞれ
  "name""age"として分けて渡す
*/
export default function App() {
  return (
    <>
      <Home name={user.name} age={user.age}  />
    </>    
  )
}

子コンポーネント(Home.tsx)

// 型をimportしておく
import { Props } from "../App";

export const Home = ({ name,  age }: Props) => {
　　return (
    <>
      <p>{name}</p>
      <p>{age}</p>
    </>
  )
}; 

これで画面上には
Tanakaと25が表示されます。
個人的にはこの形が好みです。

・(2)userの情報を一括で渡す

続いてこちらは親のコンポーネントから一気にuserオブジェクトを渡す方法です。

親コンポーネント(App.tsx)

// userを用意
const user: Props = {
  name: "Tanaka",
  age: 25,
};

// userの型を用意。exportさせておく
export type Props = {
  name: string;
  age: number;
};

/* 
  user={user}で一気に渡す
*/
export default function App() {
  return (
    <>
      <Home user={user}  />
    </>    
  )
}

子コンポーネント(Home.tsx)

import { Props } from "../App";

/* 
   オブジェクトがネストされて渡ってきているため
　　　さらに型を用意します。
*/
type HomeProps = {
  user: Props;
};

export const Home = ({ user }: HomeProps) => {
  // user.name user.ageとして使用可能
  return (
    <>
      <p>{user.name}</p>
      <p>{user.age}</p>
    </>
  );
};

新たに型を用意しないといけないのが手間ですね。

・(3)userの情報の中身を一括で渡す

(2)では、

user={user}

の形で一気渡していたため、ネストされたオブジェクトになっていました。
これをクリアすべくオブジェクトの中身を一気に渡すパターンも紹介します。

親コンポーネント(App.tsx)

// userを用意
const user: Props = {
  name: "Tanaka",
  age: 25,
};

// userの型を用意。exportさせておく
export type Props = {
  name: string;
  age: number;
};

/* 
  　　{...user}でプロパティのみを渡す
*/
export default function App() {
  return (
    <>
　　　　　　<Home {...user} />    
　　　　</>    
  )
}

子コンポーネント(Home.tsx)

import { Props } from "../App";

export const Home = ({ name, age }: Props) => {
  return (
    <>
      <p>{name}</p>
      <p>{age}</p>
    </>
  );
};

こっちの方が(2)よりもシンプルに記述できる。