Back to React Recipes

The `useInitialRender` hook: distinguish between the initial and subsequent renders

Implementation

// use-initial-render.js
import { useRef, useEffect } from 'react';

const useInitialRender = () => {
const isInitialrender = useRef(true);
useEffect(() => {
isInitialrender.current = false;
}, []);
return isInitialrender.current;
};

export default useInitialRender;

Usage

import { useState, useEffect } from 'react';
import useInitialRender from './use-initial-render.js';

const MyComponent = props => {
const isInitialRender = useInitialRender();
const [myState, setMyState] = useState(0);
useEffect(() => {
if (isInitialRender) {
// componentDidMount
}
// componentDidUpdate
}, [myState]);
};