import { Canvas, Meta, Story } from "@storybook/addon-docs";
import useAfterFirstRender from "..";
import { FunctionArgument, FunctionArguments, UsageGuidelines } from "../../../storybook";

<Meta title="Hooks/useAfterFirstRender" />

# useAfterFirstRender

- [Overview](#overview)
- [Returns](#returns)
- [Usage](#usage)
- [Feedback](#feedback)

## Overview

Use this hook to track whether the page has been rendered at least once.

<Canvas>
  <Story name="Overview">
    {() => {
      const isRendered = useAfterFirstRender();
      return <div className="hooks-reference-element">{isRendered ? "Rendered!" : "Not yet!"}</div>;
    }}
  </Story>
</Canvas>

## Returns

<FunctionArguments>
  <FunctionArgument type="boolean" description="Whether the first render happened or not." />
</FunctionArguments>

## Usage

<UsageGuidelines
  guidelines={["Use this hook when you want to wait for the page to load at least once before doing something."]}
/>
