0

If i'm having 3 variables to handle with useState in react is doing this:


const [ user , setUser ] = useState({
name : '',
phone : '',
age : ''
})
setUser({...user, phone: value})

Or this :


const [ phone , setPhone] = useState('')
const [ name , setPName] = useState('')
const [ age , setAge] = useState('')

setPhone(value)

Is there any différence in term of performance ? Which approach is more appropriate ?

Rinat08
  • 31
  • 1
  • 3
  • 6
    Don't worry about the performance until you can measure it and see an actual difference. Use which ever one you prefer. – evolutionxbox Apr 29 '22 at 08:50
  • It doesnt matter https://stackoverflow.com/questions/56950538/is-there-a-generic-way-to-set-state-in-react-hooks-how-to-manage-multiple-state/56950637#56950637 – Dennis Vash Apr 29 '22 at 08:52

2 Answers2

0

It depends on how you use them. If you use it in a form, it might be more convenient to have them in a single object. Technically, react has a watcher system that will only update what needs to be updated and therefore not re-render what hasn't changed. Here is a link to the official documentation that can help you understand when to use object based vs single state elements.

Jaro
  • 1,587
  • 5
  • 20
  • 39
0

to manage complex and nested objects and also if you have lots of states, it's better to use useReducer like this:

import { useReducer } from 'react';
const initialState = { name: '', phone: '', age: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'name':
      return { ...state, name: action.payload };
    case 'phone':
      return { ...state, phone: action.payload };
    case 'age':
      return { ...state, age: action.payload };
    default:
      return state;
  }
};
const LoginPage = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const onChangeNameHandler = (e) => {
    dispatch({type: 'name', payload: e.target.value})
  }
  return (
    <input value={state.name} onChange = {onChangeNameHandler} />
  )
}

And then you have all states in "state" that we define at first ex:

console.log(state.name) // name

I suggest you read this article that compares both useReducer and useState here.

Hossein Gerami
  • 119
  • 3