Custom hooks are functions that use other hooks

Author: flexbox

hackathon/spacecraft/src/components/StarshipCard.tsx

@@ -8,8 +8,8 @@ import { Image } from "~/components/Image";
 
 import type { StarshipProps } from "../../api/types";
 
-import { useImage } from "../hooks/useImage";
 import { Routes } from "../navigation/Routes";
+import { getImageSource } from "../utils/getImageSource";
 import { withAnimated } from "../utils/withAnimated";
 
 const AnimatedCard = withAnimated(Card);
@@ -27,7 +27,7 @@ interface StarshipDetailsScreenParams {
 export const StarshipCard = ({ index, ship }: StarshipCardProps) => {
   const { cost_in_credits: price, manufacturer, name: title } = ship;
 
-  const source = useImage(title);
+  const source = getImageSource(title);
 
   const handleBuy = () => {
     Alert.alert("Give me the money!");

hackathon/spacecraft/src/hooks/useImage.ts renamed to hackathon/spacecraft/src/utils/getImageSource.ts

@@ -1,14 +1,15 @@
 /**
- * A custom hook that returns the image source for a given starship title.
+ * Returns the image source for a given starship title.
  *
  * @param {string} title - The title of the starship.
- * @returns {any} The image source corresponding to the starship title.
  *
  * @example
- * const imageSource = useImage("Millennium Falcon");
- * // imageSource will be the path to the Millennium Falcon image.
+ * ```
+ * const imageSource = getImageSource("Millennium Falcon");
+ * ```
+ * imageSource will be the path to the Millennium Falcon image.
  */
-export const useImage = (title: string) => {
+export const getImageSource = (title: string) => {
   const imageName = `${title.toLowerCase().replace(" ", "")}`;
 
   let source;