Кастомный хук, определяющий первый рендер компонента

Условие

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

export default function App (props) { 
  const isFirstRender = useFirstRender();
  if(isFirstRender) return null;
  
  return props.children;
}

Ответ

Для примера с отложенным показом children используйте состояние true и переключите его в false после первого commit через useEffect. Это также вызовет необходимый второй рендер.

import { useEffect, useState } from 'react';
function useFirstRender() {
  const [isFirst, setIsFirst] = useState(true);
  useEffect(() => { setIsFirst(false); }, []);
  return isFirst;
}

В отличие от изменения одного ref, setState действительно повторно вызовет компонент, поэтому children появятся без внешнего обновления. Смысл флага — «первый commit ещё не прошёл», а не подсчёт всех технических вызовов render. В Strict Mode и при прерванном рендере React может вызвать функцию несколько раз до commit; не используйте такой флаг для необратимых побочных действий.