So what im asking is there some kind of style guide for writing react functional components with hooks. Sometimes I work with components which includes different kind of hooks:

• Simple React hooks like: useMemo, useCallback, ...
• Project custom React hooks like: useCategory, useProducts, ...
• Third-party React hooks like: useRouter, useMediaQuery, ...

Example (this is not my real code example, just for understanding):

import React, { useMemo, useEffect, useCallback } from "react";

import { useRouter } from "next/router";

import { useMediaQuery } from "react-responsive";

import { useCategory, useProducts} from "@hooks";

export const Category: React.FC<CategoryProps> = () => {
  const foo = useMemo(() => (
    // some logic here..
  ), []);

  const { query } = useRouter();

  const { category, loading: categoryLoading } = useCategory(query.slug);

  const isDesktop = useMediaQuery({ query: "(min-width: 1280px)" });

  const handleFoo = useCallback(() => {
    // some logic here...
  }, []);

  const { products, loading: productsLoading } = useProducts(category.id);

  useEffect(() => {
    // some logic here...
  }, []);


  return (<h1>Some big template here...</h1>);
}

I'm struggling to find some kind of information about how to place (sort) hooks inside components. A few questions:

• Should third-party hooks go right at the start of component function body, or should be go last?
• Should useMemo hooks be above useEffect/useCallback hooks?
• Where should I place project custom hooks?

I know that is simple answer to that question is just to be consistent, but I want to know, what react community thinks, how you write your functional components with hooks?