Запрос к API c React Hooks, HOC или Render Prop

я так понимаю, вы про такой вариант говорите.

const Component1 = ({ getData }) => <div>{getData(1)}</div>;
const Component2 = ({ getData }) => <div>{getData(2)}</div>;

const WrapperRenderProp = ({ children }) => {
  const DATA = [1, 2, 3, 4];
  const getData = i => DATA[i];
  return <div>{children(getData)}</div>;
};

const ResultWithRenderProp = () => (
  <WrapperRenderProp>
    {getData => (
      <div>
        <Component1 getData={getData} />
        <Component2 getData={getData} />
      </div>
    )}
  </WrapperRenderProp>
);

но это можно и так написать без renderProp

const Component1 = ({ getData }) => <div>{getData(1)}</div>;
const Component2 = ({ getData }) => <div>{getData(2)}</div>;

const WrapperWithProps = ({ Template1, Template2 }) => {
  const DATA = [1, 2, 3, 4];
  const getData = i => DATA[i];
  return (
    <div>
      <Template1 getData={getData} />
      <Template2 getData={getData} />
    </div>
  );
};

const ResultWithProps = () => (
  <Wrapper Template1={Component1} Template2={Component2} />
);

Какой подход выбрать — нужно смотреть на детали. Если, например, есть лэйаут (WrapperWithProps), который в зависимости от темы рендерит разный Template1/Template2 и передает одни и те же пропсы я бы выбрала подход WrapperWithProps.
А если надо общий JSX но при этом супер нетривиальная логика с Template внутри я бы выбрала WrapperRenderProp. Но в любом случае это имеет смысл, когда есть общая верстка-раппер (общий JSX).
Посыл в статье с хуками про то, что удобно переиспользовать логику. Если нужно переиспользовать верстку, то композиция компонентов всегда была сильной стороной React — можно по-разному.

Запрос к API c React Hooks, HOC или Render Prop

Но это ведь просто не правда. Строчек кода столько же, «безопаснее» быть не может в силу полной эквивалентности семантики.

строчек кода меньше.

В js любую синхронную ф-ю всегда можно вызвать асинхронно. А вот наоборот — нельзя.

в componentDidMount синхронный вызов будет откладывать отрисовку DOM. Иногда это правда надо, но из моего опыта как раз наоборот — 1 случай из 10.

но если нужен синхронный вызов то есть хук — useLayoutEffect
reactjs.org/docs/hooks-reference.html#uselayouteffect

Запрос к API c React Hooks, HOC или Render Prop

Потому что это проще писать и меньше строчек кода. Если говорить про сайд-эффекты — useEffect — это ещё и безопаснее. В useEffect переданная функция будет вызван асинхронно в отличие от componentDidMount.

Запрос к API c React Hooks, HOC или Render Prop

Хуки — это способ использовать локальный стейт и вызывать сайд-эффекты (например запрос к API) в функциональных компонентах. До этого это было возможно только в компонентах-классах. В доках можно детали посмотре ь https://reactjs.org/docs/hooks-intro.html

Запрос к API c React Hooks, HOC или Render Prop

хук — это молоток с крючком, как картинка в статье )) я еще раз повторюсь хуки — это удобный инструмент. Появились хуки — многие вещи стало писать проще. Про scoped-slots c React это можно написать так:

const Template = ({ col1, col2 }) => (
  <div>
    {col1}
    {col2}
  </div>
);

const TemplateWithData = ({ data }) => (
  <Template col1={<div>{data.first}</div>} col2={<div>{data.second}</div>} />
);

Запрос к API c React Hooks, HOC или Render Prop

Почему нельзя, можно, только зачем? ) HOC (как и Render Prop) — это способ переиспользования логики/верстки в нескольких местах. Композиция UI представления (компоненты) — всегда была сильной стороной React. Просто выносишь в компонент и переиспользуешь. А вот чтобы шерить логику, не было простого инструмента. Для этого как раз все использовали HOC/Render Prop. Как раз hook — это новый правильный, простой «молоток» для переиспользования логики.