Function components, props as input, keeping components pure

🔹 What is a Functional Component?

A Functional Component is just a plain JavaScript function that returns JSX (UI).

function Welcome() {
  return <h1>Hello World</h1>;
}

Or using arrow function:

const Welcome = () => {
  return <h1>Hello World</h1>;
};

🔹 Key Characteristics

1. Simple & Clean

No this, no complex syntax — just functions.

2. Uses Hooks

With Hooks like useState, useEffect, you can manage:

• State
• Side effects
• Lifecycle behavior

Example:

import { useState } from "react";
const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

3. Reusable

You can reuse components anywhere like custom HTML tags.

const Greeting = (props) => {
  return <h2>Hello, {props.name}</h2>;
};

Usage:

<Greeting name="Gautam" />

4. Declarative UI

You describe what UI should look like, not how to update it.

🔹 Real Example (Mini Component)

const UserCard = ({ name, age }) => {
  return (
    <div style={{ border: "1px solid gray", padding: "10px" }}>
      <h3>{name}</h3>
      <p>Age: {age}</p>
    </div>
  );
};

✅ Functional Components — Key Points

• Plain JavaScript functions that return JSX
• Simpler syntax, easier to read and maintain
• No this keyword (avoids binding issues)
• Use Hooks (useState, useEffect, useContext, etc.)
• Better for modern development (recommended by React team)
• Less boilerplate code
• Easier to test and debug
• Encourages separation of concerns
• Supports custom hooks for reusable logic
• Better performance optimization with hooks like useMemo, useCallback

❌ Class Components — Key Points

• ES6 classes that extend React.Component
• Require render() method
• Use this.state and this.setState()
• Need to bind this in event handlers
• Lifecycle methods are more complex (componentDidMount, etc.)
• More boilerplate and harder to read
• Difficult to reuse logic (before Hooks, needed HOC or render props)
• Being phased out in modern React (legacy approach)

🔹 Best Practices

• Use arrow functions for cleaner syntax
• Keep components small and focused
• Use destructuring ({ name, age })
• Use Hooks properly (don’t call inside loops/conditions)

🔹 When to Use Functional Components?

👉 Always (unless you have a very specific legacy requirement)

Demo :- Refactor UI into reusable functional components.

[embed]GitHub - Gautammak/Learn-React-Js at functional-components Contribute to Gautammak/Learn-React-Js development by creating an account on GitHub.github.com