React coding question
useIsFirstRender

3. useIsFirstRender()

Create a hook to tell if it is the first render.

All right,this question also uses Refs.

The code logic is very simple.

You can see my github file src/views/react/FirstRender.jsx (opens in a new tab)

import { useRef, useState } from 'react';
function useIsFirstRender() {
  const isFirstRender = useRef(true);
 
  if (isFirstRender.current) {
    isFirstRender.current = false;
    return true
  }
 
  return false;
}
// test
function FirstRender() {
  const [clicked, setClicked] = useState(1)
  return <div>
    <button onClick={() => setClicked(prev => prev + 1)}>
      clicked {clicked} times
    </button> 
    <h3>{useIsFirstRender() ? 'First Render!' : `${clicked}th Render` }</h3>
  </div>
}
 
export default FirstRender;
useTimeoutuseSWR