Geist UI

useCurrentState

Get the latest value in functional component. By default, state in a React function component can only get the value at render time, not the latest.

This is a small tool to get the latest value, It is very useful in async actions such as setTimeout. if you like a bigger solution, try useReducer.

This is custom React hooks, you need to follow the Basic Rules when you use it.

General

Code Editor

() => {
  const [value, setValue] = React.useState(0)
  const [value2, setValue2, value2Ref] = useCurrentState(0)
  const handler = () => {
    setValue(pre => pre + 1)
    setValue2(pre => pre + 1)
    const str = `render state: ${value}, the latest value: ${value2Ref.current}`
    alert(str)
  }
  return (
    <Button scale={0.5} auto onClick={handler}>Click to show</Button>
  )
}

() => {
  const [value, setValue] = React.useState(0)
  const [value2, setValue2, value2Ref] = useCurrentState(0)
  const handler = () => {
    setValue(pre => pre + 1)
    setValue2(pre => pre + 1)
    const str = `render state: ${value}, the latest value: ${value2Ref.current}`
    alert(str)
  }
  return (
    <Button scale={0.5} auto onClick={handler}>Click to show</Button>
  )
}

APIs

`useCurrentState`

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

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

Contributors

Geist is an open source project from the community.