react-typescript-cheatsheet.md

📘 React + TypeScript Cheat Sheet

🔧 Project Setup

npx create-react-app my-app --template typescript
# or with Vite
npm create vite@latest my-app -- --template react-ts

📁 File Extensions

• .tsx: For files that include JSX
• .ts: For files without JSX

🧱 Component Types

Functional Component (FC)

import React from 'react';

type Props = {
  title: string;
  count?: number; // optional prop
};

const MyComponent: React.FC<Props> = ({ title, count = 0 }) => (
  <h1>{title} - {count}</h1>
);

Without React.FC

type Props = {
  title: string;
};

function Header({ title }: Props) {
  return <h1>{title}</h1>;
}

🪄 useState Hook

const [count, setCount] = useState<number>(0);
const [name, setName] = useState<string | null>(null);

🌀 useEffect Hook

useEffect(() => {
  console.log('Component mounted');
}, []);

📤 Props and Children

type Props = {
  children: React.ReactNode;
};

const Wrapper = ({ children }: Props) => <div>{children}</div>;

🧪 Event Handling

const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  console.log(e.currentTarget);
};

⌨️ Form Inputs

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setValue(e.target.value);
};

⛓️ useRef

const inputRef = useRef<HTMLInputElement>(null);

<input ref={inputRef} />;

📚 useContext

type Theme = 'light' | 'dark';

const ThemeContext = createContext<Theme>('light');

const useTheme = () => useContext(ThemeContext);

🧩 Type vs Interface

// Interface
interface User {
  name: string;
  age: number;
}

// Type
type User = {
  name: string;
  age: number;
};

📦 Fetching Data

type Todo = {
  id: number;
  title: string;
  completed: boolean;
};

const [todos, setTodos] = useState<Todo[]>([]);

useEffect(() => {
  fetch('/api/todos')
    .then(res => res.json())
    .then(data => setTodos(data));
}, []);

🔁 Lists and Keys

{todos.map(todo => (
  <li key={todo.id}>{todo.title}</li>
))}

🧱 Custom Hooks (with Type)

function useToggle(initial: boolean): [boolean, () => void] {
  const [state, setState] = useState(initial);
  const toggle = () => setState(!state);
  return [state, toggle];
}

🧪 Testing Types

type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;

const Button = (props: ButtonProps) => <button {...props} />;