useDidUpdate

useDidUpdate Hook executed when the component updates its dependencies.

Import: import { useDidUpdate } from '@kubed/hooks;'

Source: View source code

Docs: Edit this page

npm: @kubed/hooks

Usage

useDidUpdate is identical to useEffect except that it ignores the first execution and only executes when dependencies are updated.

import React from 'react';
import { useDidUpdate } from '@kubed/hooks';
import { Button, Group } from '@kubed/components'

export default function App() {
   const [counter, setCounter] = React.useState(0);
   const [updateCount, setUpdateCount] = React.useState(0);
     useDidUpdate(() => {
       setUpdateCount((updateCount) => updateCount + 1)
     }, [counter]);

     return (
       <div>
         <p>counter:{counter}</p>
         <p>updateCount: {updateCount}</p>
         <Group spacing="xl">
           <Button onClick={() => setCounter((counter) =>counter + 1 )}> counter +1 </Button>
         </Group>
       </div>
     );
}

1
import React from 'react';
2
import { useDidUpdate } from '@kubed/hooks';
3
import { Button, Group } from '@kubed/components'
4

5
export default function App() {
6
   const [counter, setCounter] = React.useState(0);
7
   const [updateCount, setUpdateCount] = React.useState(0);
8
     useDidUpdate(() => {
9
       setUpdateCount((updateCount) => updateCount + 1)
10
     }, [counter]);
11

12
     return (
13
       <div>
14
         <p>counter:{counter}</p>
15
         <p>updateCount: {updateCount}</p>
16
         <Group spacing="xl">
17
           <Button onClick={() => setCounter((counter) =>counter + 1 )}> counter +1 </Button>
18
         </Group>
19
       </div>
20
     );
21
}
22

23

API

1
function useDidUpdate(
2
   fn: () => void,
3
   dependencies?: any[]): void