# react-usestateref

> useRef and UseState together!

Latest version **2.0.0** (published 2025-12-17) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-usestateref
pnpm add react-usestateref
yarn add react-usestateref
bun add react-usestateref
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2025-12-17 |
| First published | 2020-12-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 198 |
| Author | Aminadav Glickshtein |
| Maintainers | aminadav |
| Keywords | react, hooks, useState, useRef |

## Links

- npm: https://www.npmjs.com/package/react-usestateref
- Repository: https://github.com/Aminadav/react-useRefState
- Homepage: https://github.com/Aminadav/react-useRefState#readme
- Issues: https://github.com/Aminadav/react-useRefState/issues
- npm.io page: https://npm.io/package/react-usestateref

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2025-12-17
- 1.0.9 — 2024-05-26
- 1.0.8 — 2021-10-12
- 1.0.7 — 2021-10-10
- 1.0.5 — 2021-03-15
- 1.0.4 — 2020-12-28
- 1.0.2 — 2020-12-24
- 1.0.1 — 2020-12-24
- 1.0.0 — 2020-12-24

## README

# react-useStateRef

<a href="https://www.npmjs.com/package/react-usestateref"><img src="https://img.shields.io/static/v1?logo=npm&message=react-useStateRef"></a>

useRef and UseState together!

## How to use

### Installation

```shell
$ npm i react-usestateref
```

```javascript
import useState from 'react-usestateref'
function MyComponent(){
  var [state,setState,ref]=useState(0)
  // ref.current will always have the latest state  
}
```

As you can see it's 100% backward compatible. You can replace all your `useState` with this import and you will always have the latest state.

## Motivation:

Many StackOverflow questions that people struggling to get the current state

- https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately
- https://stackoverflow.com/questions/60438537/usestate-shows-previous-value-always
- https://stackoverflow.com/questions/57847594/react-hooks-accessing-up-to-date-state-from-within-a-callback
- https://stackoverflow.com/questions/55874789/using-react-hooks-why-are-my-event-handlers-firing-with-the-incorrect-state

In React when functions accessing the state they receive the state from the moment
the function defined - not the current state.

So if the state changed, your functions and effects my use older state.

Using `useRef`, can solve it because it have always one value. But when you update the Ref it's not re-render.

See the example code:

```js
function MyComponent(){
  var [counter,setCounter]=useState(0)
  function increment(){
    setCounter(counter+1)
    alert(counter) // will show 0 since the state not updated yet.			
  }
  useEffect(()=>{
    alert(counter) // Whatever is the current state. It always alert 0
    return ()=>{
        alert(counter) // On unmount it still alert 0, even if you called increment many times.
    }
  },[])
  return (
  <div>
    Current number: {counter}
    <button onClick={increment}>
      Increment
    </button>
  </div>)
}
```

To solve it I created a new hook `useStateRef`

See it in action:

```js
import useState from 'react-usestateref' // see this line
function MyComponent(){
  var [counter,setCounter,counterRef]=useState(0)
  function increment(){
    setCounter(counter+1)
    alert(counterRef.current) // will show 1
  }
  useEffect(()=>{
    alert(counterRef.current) // Always show the last value
    return ()=>{
        alert(counterRef.current) // // Always show the last value
    }
  },[])
  return (
  <div>
    Current number: {counter}
    <button onClick={increment}>
      Increment
    </button>
  </div>)
}
```

It's fully support the `useState` API, so you can change your `useState` to `useStateRef` and it will not break your app.

## Contribution

- Star & fork this project.
- I'm open to your contribution.
- Better documentation or whatever your like. Just open a PR

## Other innovations by cretors:

- [Boti - Bot Creator](https://boti.bot)

---
_Source: https://npm.io/package/react-usestateref · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._