react-useStateRef

> 前端框架

开源

一起使用 useRef 和 UseState!

197 stars0 点赞0 次浏览

访问官网 GitHub

工具介绍

一起使用 useRef 和 UseState!

react-useStateRef

useRef and UseState together!

How to use

Installation

bash

$ 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

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:

javascript

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 (
  
)
}

To solve it I created a new hook useStateRef

See it in action:

javascript

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 (
  
)
}