Does a React custom hook "strictly" need to be reusable to qualify as a custom hook? I have enrolled in a frontend course with exams after certain modules about the covered topic (roughly 60 minutes in duration). One of the exam questions was the following:

===

Why Use Custom Hooks in React JS?

Implement a custom hook using “ http://< DOMAIN >/api/post-newest ” this api

Show title field data only

Manage loading , error , implement using try catch block

Submission Guidelines:

Directory mension is not nessecery . You can test your code on your own machine and then copy & paste here .

===

I've changed the domain here with a placeholder of course, because disclosing it doesn't seem to be relevant to my query. Anyway, my answer was the following:

===

1: to encapsulate reusable logic, make components smaller and more readable by moving out same logic that might be needed in multiple places, and do it in 'react way'. it's convention to start custom hook with 'use', for ex: useApiData().

2, #3, & #4:

// file: src/hooks/useNewestPosts.jsx (for #2 & #4)

import { useState, useEffect } from "react";
import axios from "axios";

function useNewestPosts() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(
          "//inertia-pos.manirul.xyz/api/post-newest"
        );
        if (response.status === 200 && response.data.status === "Success") {
          setData(response.data.data);
        } else {
          console.log(response);
          throw new Error("Something went wrong");
        }
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return { data, loading, error };
}

export default useNewestPosts;

// file: src/components/PostList.jsx (for #3)

import useNewestPosts from "../hooks/useNewestPosts";

function PostList() {
  const { data, loading, error } = useNewestPosts();

  if (loading) return Loading...;
  if (error) return Error: {error.message};

  return loading ? (
    Loading...
  ) : error ? (
    Error: {error}
  ) : (
    
      {data?.map((post, index) => (
        {post.title}
      ))}
    
  );
}

export default PostList;

===

According to the evaluating teacher, the answer is partialy wrong because it misses the 'reusablity' part (the URL is hardcoded, not passed as an argument).

So my question is, does it have to be "reusable" here to meet the criteria of the question? I did some googling, and it seems while reusability is a major and beneficial feature of custom hooks (as we stated in the very beginning of the answer of #1), it doesn't necessarily need to be "reusable" for every case. Furthermore, the question simply stated to implement a custom hook to call a specific API, and it seems the answer meets the criteria.

I mean in a 'real' project, we were taught to save the base URL as a environment variable too, but for just an exam with a limited duration (although the duration is not short by any means), our focus usually revolves around what's being asked in the question, rather than going beyond and doing everything the 'proper' way I guess.

So the point of URL not being passed to make it reusable to qualify it as a 'custom hook' is a valid point here? I'm not concerned about the marks given here (90% was given, which is, of course, not bad at all), but rather, my pursuit here is about knowing the proper concept.