Anatomy of a modern react component

1. Imports

What the component depends on.

import { useState, useEffect, useMemo } from "react";
import "./Button.css"; // styles (or CSS-in-JS)

2. The Function component

function Button({ label, disabled = false, onClick }) {

• Props are just function arguments
• Destructuring is standard
• Default values inline

3. Hooks (top-level, always)

const [count, setCount] = useState(0);

useEffect(() => {
  console.log("Mounted or updated");
}, [count]);

Full Example

import { useState, useMemo } from "react";

export default function Counter({ initial = 0 }) {
  const [count, setCount] = useState(initial);

  const isEven = useMemo(() => count % 2 === 0, [count]);

  const increment = () => {
    setCount((c) => c + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <p>{isEven ? "Even" : "Odd"}</p>
      <button onClick={increment}>+</button>
    </div>
  );
}