Managing React component state with useState

recipes.old.tsx

export const RecipeList = () => {
  
  //component state
  const [isLoading, setIsLoading] = useState(true);
  const [loadingFailed, setLoadingFailed] = useState(false);
  const [loadingError, setLoadingError] = useState("");
  const [recipes, setRecipes] = useState<Recipe[]>();

  //load data
  useEffect(() => {
    setIsLoading(true);
    setLoadingFailed(false);
    api.getRecipes().then(response => {
        setRecipes(response.data);
      }).catch((error: string) => {
        setLoadingFailed(true);
        setLoadingError(error);
      }).finally(() => {
        setIsLoading(false);
      });
  }, []);
	
  return (
    <div>
      {isLoading && "Loading..."}
      {loadingFailed && "Error: " + loadingError}
      {!isLoading && !loadingFailed && recipes && (
        <ul>
          {recipes.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
};