// components/button.tsx
 
export default function Button() {
  const greet = () => alert("Hi!");
 
  return <button onClick={greet()}>Click me</button>;
}

// index.tsx
 
import Button from "/components/button.tsx";
 
function Homepage() {
  return (
    <div>
      <Button /> // Hi!
    </div>
  );
}

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

import { useState, useEffect } from "react";
 
function Timer() {
  const [seconds, setSeconds] = useState(0);
 
  useEffect(() => {
    const interval = setInterval(() => setSeconds((sec) => sec + 1), 1000);
 
    return () => clearInterval(interval);
  }, []); // without dependencies usEffect will run only once
 
  return <p>Seconds: {seconds}</p>;
}