react-use-states v1.0.6

react-use-states

It's simple hook that combine multiple hooks into one.

Installation

// NPM
npm install --save react-use-states

// YARN
yarn add react-use-states

Why and how to use

Lets describe some example and how to use and why. Bellow you can see 3 examples how to write code.

Example 1

First create simple signInForm component with three fields:

const signInForm = () => {
  const [firstName,setFirstName] = useState('');
  const [lastName,setLastName] = useState('');
  const [age,setAge] = useState(0);
  
  const handleSubmit = () => {
    // do something
  }
  
  const handerFirstNameChange = (ev) => {
    setFirstName(ev.target.value);
  }
  
  const handerLastNameChange = (ev) => {
    setLastName(ev.target.value);
  }
  
  const handerAgeChange = (ev) => {
    setAge(ev.target.value);
  }
  
  return (<>
    <div>fistName: <input type='text' value={firstName} onChange={handleFirstNameChange} /> </div>
    <div>fistName: <input type='text' value={lastName} onChange={handleLastNameChange} /> </div>
    <div>fistName: <input type='number' value={age} onChange={handleAgeChange} /> </div>
    
    <button onClick={handleSubmit}>submit</button>
  </>)
}

The main problem in this example - too many local variables and code for small functionality. Lets try combine some code.

Example 2

Lets make short refactor and combine states into object.

const signInForm = () => {
  const [state,setState] = useState({ firstName:'', lastName:'', age: 0});
  
  const handleSubmit = () => {
    // do something
  }
  
  const handleChange = (ev) => {
    const [name,value] = ev.target;
    setState({
        ...state
        [name] : value
      }
    );
  }
  
  return (<>
    <div>fistName: <input type='text' name='firstName' value={state.firstName} onChange={handleChange} /> </div>
    <div>fistName: <input type='text' name='lastName' value={state.lastName} onChange={handleChange} /> </div>
    <div>fistName: <input type='number' name='age' value={state.age} onChange={handleChange} /> </div>
    
    <button onClick={handleSubmit}>submit</button>
  </>)
}

This code looked more compact,but every time when we change state, we need reconstruct state - it's not soo good solution for performance. Lets try improve by using useStates hoook.

Example 3

Same signInForm but with useStates hook.

const signInForm = () => {
  const [state,setState] = useStates({ firstName:'', lastName:'', age: 0});
  
  const handleSubmit = () => {
    // do something
  }
  
  const handleChange = (ev) => {
    const [name,value] = ev.target;
    setState({
        [name] : value
      }
    );
  }
  
  return (<>
    <div>fistName: <input type='text' name='firstName' value={state.firstName} onChange={handleChange} /> </div>
    <div>fistName: <input type='text' name='lastName' value={state.lastName} onChange={handleChange} /> </div>
    <div>fistName: <input type='number' name='age' value={state.age} onChange={handleChange} /> </div>
    
    <button onClick={handleSubmit}>submit</button>
  </>)
}

difference only into two lines of code

  const [state,setState] = useStates({ firstName:'', lastName:'', age: 0});
  vs
  const [state,setState] = useState({ firstName:'', lastName:'', age: 0});

and when we use setState method

   setState({
        [name] : value
      }
    );
    vs
    setState({
        ...state
        [name] : value
      }
    );

In last example we combine states with useStates method, but setState method not requre destructorization. Inside useStates not use destruction of object and it's should be imporatant when react compare states and decide recalculate/reflow/rebuild dom. It's small improvement but sometimes it's should be helpfull.