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

Situation	Use This
Pages, big components	#1 function CompName()
Small utility components	#2 const CompName = () =>
TypeScript props?	Just define a separate type or interface

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! 🎉