# Typing Component Props, Events, and Hooks

**TypeScript** really shines in React when working with component props, events, and hooks like `useState` or `useEffect`. Here’s how to type them properly so you get type safety and helpful autocompletions.

## Typing Component Props

```tsx
interface Todo {
  title: string;
  done: boolean;
}

interface TodoItemProps {
  todo: Todo;
  onToggle: (title: string) => void;
}

const TodoItem: React.FC<TodoItemProps> = ({ todo, onToggle }) => (
  <div>
    <input
      type="checkbox"
      checked={todo.done}
      onChange={() => onToggle(todo.title)}
    />
    {todo.title}
  </div>
);
```

> #### 💡 Tip: Try it in your IDE!
>
> With typed props, you’ll get autocompletion and instant feedback — making mistakes harder and coding faster.

## Typing useState

### Step 1: Create the state type

```tsx
interface Todo {
  title: string;
  done: boolean;
}
```

### Step 2: Type the useState hook

```tsx
// empty initial state
const [todos, setTodos] = useState<Todo[]>([]);
```

```tsx
const INITIAL_TODO: Todo[] = [
  {
    title: "first task",
    done: false,
  },
  {
    title: "second task",
    done: true,
  },
  {
    title: "third task",
    done: true,
  },
];

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

Now `todos` is typed as an array of `Todo` objects, and `setTodos` will only accept that type.

### Step 3: Using setTodos

Here are three valid and clean ways to use `setTodos`:

```tsx
// 1. Basic usage — straightforward and readable
setTodos([{ title: "new todo", done: false }]);

// 2. Callback form — preferred if referencing previous state or writing multiple lines
setTodos((prevTodos) => {
  return [...prevTodos, { title: "new todo", done: false }];
});

// 3. One-liner callback — clean if short
setTodos((prev) => [...prev, { title: "new todo", done: false }]);
```

> #### :brain: Why use the `callback` form?
>
> React batches updates — using the `callback` ensures you’re working with the **most recent state**, especially inside `useEffect` or async operations.

## Typing Events

React’s synthetic events are strongly typed too. Here’s an example with an input change handler:

```tsx
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  console.log(e.target.value);
};
```

## Typing Custom Hooks

If you create your own hooks, type the input and output clearly:

```tsx
function useTodoList(): [Todo[], (todo: Todo) => void] {
  const [todos, setTodos] = useState<Todo[]>([]);

  const addTodo = (todo: Todo) => setTodos((prev) => [...prev, todo]);

  return [todos, addTodo];
}
```

```tsx
const [todos, addTodo] = useTodoList();
addTodo({ title: "Learn TS", done: false });
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wiki.nushackers.org/orbital/typescript/typing-component-props-events-and-hooks.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.