Добрый день, есть куча компонентов с похожим функционалом:
const CategoryPage = (props) => {
const [data, setData] = useState(null);
const { url, params: { category } } = useRouteMatch(); // #1
useEffect(() => {
CategoryService.get(params.category) // #2
.then(res => setData(res));
}, [category]);
return <PageComponent data={data} />;
}
#1 - category, url параметр который будет для каждого компонент-страницы разный, например для компонента ProductPage, не category, а product
#2 - Сервис для работы с API тоже для каждой страницы свой
Встал вопрос, выделить этот функционал для переиспользования, сначала я решил сделать это с помощью
HOC, примерно вот так:
withPageData (HOC)
const withPageData = (Component, selectData, routeParam) => {
return (props) => {
const [data, setData] = useState(null);
const { url, params } = useRouteMatch();
useEffect(() => {
selectData(params[routeParam])
.then(res => setData(res));
}, [url]);
return <Component data={data} {...props} />;
};
};
Примерно так это должно выглядеть
Но тут я вспомнил, что можно создавать
пользовательские хуки, для подобных целей.
usePageData (hook)
const usePageData = (selectData, routeParam) => {
const [data, setData] = useState(null);
const { url, params } = useRouteMatch();
useEffect(() => {
selectData(params[routeParam])
.then(res => setData(res));
}, [url]);
return data;
}
И вот передо мной встал вопрос:
В каких случаях использовать HOC, а в каких пользовательские хуки? 
Простой