How to make React Hooks return an array

This looks good to me except for not returning JSX from the component In the last use case and in the other cases you are. Try this

 return (
         <ul>
        {items.map((item, index) => <li key={index}>{item.title} </li> )}
         </ul>
    );

Note if your items have unique ids it is better practice to use those as the key instead of the index.

EDIT : Here is an example of how you could make a hook to use in articles

function useGetArticles() {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);

  useEffect(() => {
    fetch('https://hn.algolia.com/api/v1/search?query=redux')
      .then((res) => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result.items);
        },
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      );
  }, []);

  return [items, isLoaded, error];
}

function Articles() {
  const [items, isLoaded, error] = useGetArticles();

  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
    return (
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item.title} </li>
        ))}
      </ul>
    );
  }
}

If all you are trying to do is maintain Articles as a function, you cannot without making it a promise(which is redundant as fetch is doing what you need to already).

And you can write custom hook as you are trying to, but then Articles (must be named useArticles as react needs it to) cant be a function the way you want and you will be complicating for no useful reason.

My suggestion would be to simply move the useEffect, and other state hooks to your parent component like this (Note App is your parent component not Articles):

import React, {useState, useEffect} from 'react';

const App = () => {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);

  useEffect(() => {
    Articles()
        .then(res => {
        setIsLoaded(true);
        setItems(res.hits);
        setError(false);
      })
      .catch(error => {
        setIsLoaded(true);
        setError(true);
      })
    // you are repeating then/catch again even though you were doing it already on fetch. Only good reason to do this is if you are reusing the api calls in other places.
  }, [])

   return (
    <React.Fragment>
      Test
      <ul>
       {items.map((item, index) => <li key={index}>{item.title} </li> )}
     </ul>
    </React.Fragment>

    );

}

function Articles() {
  // too much code just to hide it inside a function
    return new Promise((resolve, reject) =>
    fetch("https://hn.algolia.com/api/v1/search?query=redux")
    .then(res => resolve(res.json()))
    .catch(error => reject(error))
  );
}

export default App;

Here is the hooks way to reformat your code. But that itself doesn't mean its better:

import React, {useState, useEffect} from 'react';

const App = () => {
  // getting all useful state from the hook
  const {error, isLoaded, items, fetchItems} = useGetArticles();

  useEffect(() => {
    fetchItems(); // calling the method that ask for new data and loads item in the hook's state
  })

   return (
    <React.Fragment>
      <ul>
       {items.map((item, index) => <li key={index}>{item.title} </li> )}
     </ul>
    </React.Fragment>

    );

}
const useGetArticles = () => {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);

  const fetchItems = () => {
    fetch("https://hn.algolia.com/api/v1/search?query=redux")
    .then(res => res.json())
    .then(res => {
      setIsLoaded(true);
      setItems(res.hits);
      setError(false);
    })
    .catch(error => {
      setIsLoaded(true);
      setError(true);
    })
  };

  // only return useful states and functions that main component can use
  return {error, isLoaded, items, fetchItems}
}

export default App;