Function Components - The 4 Ways Explained

// 1. The Classic Way

export default function CompName(){return (<>...</>)}

// 2. The Cool Short Way

const CompName = () => {return (<>...</>)}

// 3. The Old TypeScript Way

const CompName: React.FunctionComponent<{ message: string }> = ({ message }) => ( <div>{message}</div> );

// 4.Short version of #3

const CompName: React.FC<AppProps> = ({ message }) => <div>{message}</div>;

Think of it like introducing yourself...

Imagine you're telling someone your name. You can say it in different ways:

"Hi, I'm Pramod!"

"My name is Pramod"

"You can call me Pramod"

They all mean the same thing, but some ways feel more natural!

The 4 Ways Explained

1️⃣ export default function CompName() — The Classic Way

export default function CompName() {

  return <div>Hello!</div>

}

Like saying "Hi, I'm Pramod!" — clear, simple, everyone understands it instantly.

✅ Best for pages and big components

✅ Easiest to read

✅ Works great in .jsx and .tsx

2️⃣ const CompName = () => — The Cool Short Way

const CompName = () => {

  return <div>Hello!</div>

}

Like saying "Call me Pramod" — a bit shorter, still totally fine.

✅ Popular in modern React

⚠️ Can't be used before it's written in the file (unlike #1)

3️⃣ React.FunctionComponent<{message: string}> — The Old TypeScript Way

const CompName: React.FunctionComponent<{ message: string }> = ({ message }) => (

  <div>{message}</div>

);

Like wearing a name tag with your full title — "Hello, my name is Pramod Kumar Boda" 😅

❌ React team says don't use this anymore

❌ It used to auto-include children prop (caused bugs!)

❌ Too verbose

4️⃣ React.FC<AppProps> — Short version of #3

const CompName: React.FC<AppProps> = ({ message }) => <div>{message}</div>;

Same as #3, just shorter. Still the same problems.

❌ Also not recommended anymore (same reasons)

🏆 Expert Answer: Use #1 or #2

The Expert TypeScript way today 👇

// Define props separately (clean!)

type ButtonProps = {

  label: string;

  onClick: () => void;

}



// Use #1 or #2 — NOT React.FC

export default function Button({ label, onClick }: ButtonProps) {

  return <button onClick={onClick}>{label}</button>

}

Simple rule: Just avoid React.FC and React.FunctionComponent — they're old habits. Use plain functions with typed props instead! 🎉