useDidUpdate

useDidUpdate 在组件在依赖更新时执行的 Hook。

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

Source: View source code

Docs: Edit this page

npm: @kubed/hooks

用法

useDidUpdate 使用上与 useEffect 完全相同，只是它忽略了首次执行，只在依赖项更新时执行。

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