Создание пользовательского хука для определения первой отрисовки

Условие

Необходимо реализовать хук useFirstRender, который будет возвращать булево значение — true, если компонент только что был смонтирован, и false в последующих рендерах.

react 
const useFirstRender = () => { };

function RenderAfterFirstRender(props) {
    const isFirstRender = useFirstRender();

    if (isFirstRender) {
        return "Hwuero";
    }

    return props.children;
}

Ваша задача – написать тело хука так, чтобы компонент RenderAfterFirstRender корректно различал первый и последующие рендеры и отображал соответствующий контент.

Ответ

Храните признак в ref и переключайте его после первого commit в эффекте. Изменение ref само по себе не запускает следующий рендер.

const useFirstRender = () => {
  const first = React.useRef(true);
  React.useEffect(() => { first.current = false; }, []);
  return first.current;
};

Это различает первый committed показ и последующие обновления, а не считает каждый пробный вызов React. Если children должны появиться сразу после монтирования без внешнего обновления, используйте state и эффект: это уже другая семантика с дополнительным рендером.