In React projects, utility types like Partial, Pick, Omit, and ReturnType help you write safer and cleaner code by shaping and inferring types for props, component logic, and functions. Understanding these utilities lets you avoid repetitive type definitions and makes your code flexible as your components evolve.

Partial<T> transforms all properties of a type T into optional properties. This is useful in React when you want to allow passing only some props, such as in update forms or when creating default props. For example, suppose you have a User type with required properties, but you want to allow partial updates:

type User = {
  id: number;
  name: string;
  email: string;
};

type UserUpdateProps = Partial<User>;

// Now all UserUpdateProps fields are optional
const UpdateUser = (props: UserUpdateProps) => {
  // You can use props.name, props.email, etc., and they may be undefined
  return <div>{props.name}</div>;
};

Pick<T, K> creates a new type by selecting a subset of properties K from type T. This is handy when you want a component to receive only certain props. For example, if you want a UserName component that only cares about the name property:

type User = {
  id: number;
  name: string;
  email: string;
};

type UserNameProps = Pick<User, "name">;

const UserName = (props: UserNameProps) => <span>{props.name}</span>;

Omit<T, K> is the opposite of Pick—it creates a new type by removing certain properties K from type T. Use this when you want to pass most props except a few. For example, to create a user profile component that does not need the email:

type User = {
  id: number;
  name: string;
  email: string;
};

type UserProfileProps = Omit<User, "email">;

const UserProfile = ({ id, name }: UserProfileProps) => (
  <div>
    <p>ID: {id}</p>
    <p>Name: {name}</p>
  </div>
);

ReturnType<T> extracts the return type of a function type. This is useful when you want to infer the type returned by a helper function, such as a custom hook, and use it elsewhere. For example, if you have a hook that returns user data:

function useUser() {
  return { id: 1, name: "Alice" };
}

type UserFromHook = ReturnType<typeof useUser>;
// UserFromHook is { id: number; name: string }

const UserComponent = () => {
  const user = useUser();
  // user is typed as UserFromHook
  return <div>{user.name}</div>;
};