import { Layout, Playground, Attributes } from 'lib/components'
import { useCurrentState, Link, Button, Spacer } from 'components'

export const meta = {
  title: ' 当前值 useCurrentState',
  group: '工具包',
}

## Use current state / 获取当前值

在函数式组件内获取 **最新的值**。默认场景下，React 函数式组件只能获取渲染当时 `state` 的值，这并非是最新的。

这是一个获取最新值的小工具，它在你进行像 `setTimeout` 等异步工作时会非常有用。但如果你喜欢更大的解决方案，
请试试 <Link target="_blank" color href="https://reactjs.org/docs/hooks-reference.html#usereducer">useReducer</Link>。

这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。

<Playground
  scope={{ useCurrentState, Button }}
  code={`
() => {
  const [value, setValue] = React.useState(0)
  const [value2, setValue2, value2Ref] = useCurrentState(0)
  const handler = () => {
    setValue(pre => pre + 1)
    setValue2(pre => pre + 1)
    const str = \`渲染时的值: \${value}， 最新的值: \${value2Ref.current}\`
    alert(str)
  }
  return (
    <Button size="small" auto onClick={handler}>点击显示</Button>
  )
}
`}
/>

<Attributes edit="/pages/zh-cn/components/use-current-state.mdx">
<Attributes.Title>useCurrentState</Attributes.Title>

```ts
type CurrentStateType<S> = [
  S,
  Dispatch<SetStateAction<S>>,
  MutableRefObject<S>,
]

const useCurrentState<S> = (
  initialState: S | () => S,
) => CurrentStateType<S>
```

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
