08 — TypeScript in React

Typing Components

import { FC } from 'react';

interface Props {
  name: string;
  age: number;
}

const Greeting: FC<Props> = ({ name, age }) => {
  return <div>Hello {name}, age {age}</div>;
};

Typing Hooks

import { useState, useEffect } from 'react';

function useUser(id: number) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    fetchUser(id).then(data => {
      setUser(data);
      setLoading(false);
    });
  }, [id]);
  
  return { user, loading };
}

Generic Components

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

function List<T>({ items, renderItem }: ListProps<T>) {
  return <div>{items.map(renderItem)}</div>;
}

Key Takeaways

• Type props and state
• Use generics for reusable components
• Type hooks for better DX
• Avoid any type