Creating a custom hook to determine the first render

It is necessary to implement a React hook useFirstRender that will return true only during the very first render of the component and false on all subsequent renders. The hook can be used in any functional component for conditional rendering of content only after the first render.

Example usage:

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

    if (isFirstRender) {
    return "Haviero";
    }

    return props.children;
}

export default () => {
    const [counter, setCounter] = useState(1);

    const incrementCounter = () => {
    setCounter(counter + 1);
};

return <div>
    <section>
    <h2>Hook</h2>

    <p>Peanw3O8aTb xyrx useFirstRender</p>

    <RenderAfterFirstRender>Pengep m{counter}</RenderAfterFirstRender>

    <div>
    <button onClick={incrementCounter}>next render</button>
    </div>
    </section>
</div>
)