useIsFirstRender

useIsFirstRender (첫 렌더링 감지)

useIsFirstRender 훅은 컴포넌트가 처음 렌더링되는지 감지해요. 첫 번째면 true, 아니면 false를 반환해요.

출처: 문서

본문

useIsFirstRender 훅은 컴포넌트가 처음 렌더링되는 중이면 true, 그렇지 않으면 false를 반환해요.

import { useState } from 'react';
import { Button, Text } from '@mantine/core';
import { useIsFirstRender } from '@mantine/hooks';

function Demo() {
  const [counter, setCounter] = useState(0);
  const firstRender = useIsFirstRender();
  return (
    <Text ta="center" fz="sm">
      Is first render:{' '}
      <Text span c={firstRender ? 'teal' : 'red'} inherit inline>
        {firstRender ? 'Yes' : 'No!'}
      </Text>
      <Button onClick={() => setCounter((c) => c + 1)} mt="sm">
        Rerendered {counter} times, click to rerender
      </Button>
    </Text>
  );
}

정의 (Definition)

function useIsFirstRender(): boolean;

더 알아보기 (Learn more)