Apollo render props vs. hooks (basic example)

ProductsList.js

function ProductsList() {
  const {loading, error, data} = useQuery(LIST_PRODUCTS);
  if (loading) return 'Loading...';
  if (error) return error.message;
  return (
    <ul>
      {data.products.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

function ProductsList() {
  return (
    <Query query={LIST_PRODUCTS}>
      {({loading, error, data}) => {
        if (loading) return 'Loading...';
        if (error) return error.message;
        return (
          <ul>
            {data.products.map(product => (
              <li key={product.id}>{product.name}</li>
            ))}
          </ul>
        );
      }}
    </Query>
  );
}

apollo hooks