urs

useRefState

🔥 React hook for maintaining correct values, in a clean way

🚨 This hook is under active development. Do not use in production! 🚨

Installation

yarn add urs      or     npm i -S urs

Usage

import useRefState from 'urs'

const App = () => {
  const [state, setState] = useRefState()


  // if your state is an object, it will recursively go through and turn everything into getters
  // for instance:
  useEffect(() => {
    setState({ no: 'way' })
  }, [])


  const onClick = () => {
    // to get the actual state you must do
    console.log('value', state.value)
    // if it's an object state, instead of having to do
    console.log('no', state.value.no)
    // you can just do
    console.log('no', state.no)
    // BUT, the caveat is you have to do `state.whatever`
    // you CANNOT destructure like: `const [{ no }, setState] = useState()`
  }

  return (
    <button onClick={handleClick}>Click Me!</button>
  )
}

Options

const [
  state,
  setState
] = useSSR({
  _blockOnUnmount: true, // true by default
  // `_depth` IS NOT IMPLEMENTED YET
  // this will make it recurse into an object
  // however many layers deep. 2 by default
  _depth: 2, // 2 by default
  // the rest of the fields in here are just
  // whatever default state you wanna give
})