Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
@antonioru antonioru useDrag ac5a719 Jan 13, 2020
1 contributor

Users who have contributed to this file

88 lines (62 sloc) 2.34 KB

useDidMount

Accepts a function to be performed when the component did mount.

Why? πŸ’‘

  • takes care of performing a callback when the component mount
  • It's as a shortcut to useEffect(onMount, [])

Basic Usage:

import { useState } from 'react';
import { useDidMount } from 'beautiful-react-hooks'; 

const ComponentDidMount = () => {
   const [mounted, setIsMounted] = useState(false);
   
   useDidMount(() => {
    const timeout = setTimeout(() => {
      setIsMounted(true);
      clearTimeout(timeout);
    }, 1000);
   });
      
   return (
     <DisplayDemo>
       {mounted && (<p>Component did mount!</p>)}
     </DisplayDemo>
   );
};

<ComponentDidMount />

Callback setter syntax:

if the first parameter is not provided, the returned function (a handler setter) can be used to set the useDidMount handler, as long as it is immediately invoked.

Please note: the returned handler setter is meant to change the value of the callback reference only, it does not cause the component rerender nor should not be invoked asynchronously.

import { useState } from 'react';
import { useDidMount } from 'beautiful-react-hooks'; 

const ComponentDidMount = () => {
   const [mounted, setIsMounted] = useState(false);
   const onMount = useDidMount(); 
   
   onMount(() => {
    const timeout = setTimeout(() => {
      setIsMounted(true);
      clearTimeout(timeout);
    }, 1000);
   });
      
   return (
     <DisplayDemo>
       {mounted && (<p>Component did mount!</p>)}
     </DisplayDemo>
   );
};

<ComponentDidMount />

βœ… Pro tip:

When using a React function component you should not really think of it in terms of "lifecycle".

The useDidMount hook is indeed intended as a shortcut to useEffect(onMount, []).

To deep understanding useEffect, what it is and how it should be properly used, please read "A complete guide to useEffect" by Dan Abramov

Mastering the hook

βœ… When to use

  • When in need of performing a function after the component did mount

πŸ›‘ When not to use

  • You can't use it asynchronously since this will break the rules of hooks
  • If using the handler setter, it should not be used asynchronously but immediately invoked
You can’t perform that action at this time.