• I’ll exclusively be using functional components with the useState hook but many of the patterns are quite similar when you’re using class components so it generally isn't too difficult to translate.
• Whenever I’m working with state held in objects and arrays I’ll be making immutable updates to the state by making copies of the state before making the updates. I’ll be using the ES6 spread operator to create the copies but in codebases out in the wild I'm sure it’s not uncommon to see copies being made with one of the following, older methods instead:

const objectCopy = Object.assign({}, originalObject);
const arrayCopySlice = originalArray.slice();
const arrayCopyConcat = [].originalArray.concat();

• I'll be focusing on the different shapes of state data and the code that's responsible for setting the state but I’ll be omitting some of the other component code that would ordinarily be necessary to make things fully functional. There will be some code inside functions where you can assume the functions are being called and passed the parameters shown, and there are others where you can assume that you're operating on values that are being held in state or being passed in as props. It's all really interchangeable and just depends on how you structure your components and if you do inline functions or declare the functions on the component.
• As always in programming, there are many different ways to accomplish the same things that I'll be showing you, particularly when working with state in objects and arrays. The examples I'll be using will mostly use more modern syntax and more concise code patterns.

// string
const [userName, setUserName] = useState('');
// number
const [userAge, setUserAge] = useState('');
// boolean
const [isLoggedIn, setIsLoggedIn] = useState(true);

The initial userAge state variable is defined as an empty string because we’re using that state value as the input field’s value (what React calls a Controlled Component) so it needs to be a string in the browser, however, you’ll often need to convert input numbers from strings to numbers, particularly if you want to be able to use the number in calculations or when saving the number to a database. Common exceptions to this are phone numbers and unique IDs, which you’ll typically want as strings.

setUserName('Jason');
setUserAge(36);
setIsLoggedIn(false);

<input
  type='text'
  value={userName}
  placeholder='Enter name'
  onChange={(e) => setUserName(e.target.value)}
/>
<input
  type='number'
  value={userAge}
  placeholder='Enter age'
  onChange={(e) => setUserAge(parseInt(e.target.value))}
/>
<button onClick={() => setIsLoggedIn(false)}>
  Log Out
</button>

onChange={handleSetUserName}
onChange={handleSetUserAge}
onClick={handleLogOut}

// ES6 arrow function:
onChange={(e) => handleSetUserName(e, userId)}
// good ol' anonymous function:
onChange={function(e) {
  handleSetUserName(e, userId);
}}

const [isTrue, toggleIsTrue] = useState(false);
const [counter, setCounter] = useState(0);
<button onClick={() => toggleIsTrue(isTrue => !isTrue)}>
  Toggle Truthiness
</button>
<button onClick={() => setCounter(count => count + 1)}>
  +
</button>
<button onClick={() => setCounter(count => count - 1)}>
  -
</button>

<button onClick={() => toggleIsTrue(isTrue ? false : true)}>
  Toggle Truthiness
</button>
<button onClick={() => setCounter(counter + 1)}>+</button>
<button onClick={() => setCounter(counter - 1)}>-</button>

<button onClick={() => {
  // do some calculations to 
  // determine increment amount…
  // then set state
  setCounter(count => count + incrementAmount)
}}>
  Increment
</button>

function User() {
  const [userProfile, setUserProfile] = useState({
    userName: '',
    email: '',
    friends: []
  });
  // If you separate out each variable 
  // you'd have something like this:
  // const [userName, setUserName] = useState(‘’);
  // const [email, setEmail] = useState(‘’);
  // const [friends, setFriends] = useState([]);
}

function handleUpdateProperty(email, gender) {
  setUserProfile({
    ...userProfile, 
    // update existing property
    email: email
    // add new property
    gender: gender
  });
}

Unlike when working with state in class components, when you’re updating a state object in functional components you need to manually merge updates. In addition to preserving immutability, this is why I use the spread operator in the object above; it copies over all of the existing properties of the state object and adds/overrides the additional properties that are passed to the function. When you’re setting state in class components you only need to specify the properties that are being updated.

function handleUpdateProperty(key, value) {
  setUserProfile({
    ...userProfile, 
    [key]: value
  });
}

function handleAddFriend(friend) {
  setUserProfile({      
    ...userProfile, 
    friends: [
      ...userProfile.friends,
      friend
    ]
  });
}

function handleDeleteProperty(propertyName) {
  const stateCopy = {...userProfile};
  delete stateCopy[propertyName];
  setUserProfile(stateCopy);
}

const [users, setUsers] = useState([]);

setUsers([...users, newUser]);

setUsers([newUser, ...users]);

setUsers([
  ...users.slice(0, indexToAdd),
  newUser,
  ...users.slice(indexToAdd)
]);

setUsers([
  ...users.slice(0, indexToUpdate),
  updatedUser,
  ...users.slice(indexToUpdate + 1)
]);

setUsers([...users.slice(1)]);

setUsers([...users.slice(0, users.length - 1)]);

setUsers([
  ...users.slice(0, indexToRemove),
  ...users.slice(indexToRemove + 1)
]);

function handleAddUniqueUser(user) {
  // here I’m using the `some` method to determine
  // if at least one object in the array matches
  // the user’s ID:
  const userExists = users.some(_user => {
    return _user.id === user.id);
  }
  if (!userExists) {
    setUsers(user);
  } else {
    return 'An account for this user already exists!'
  }
}

function handleSaveUpdatedName(userId, name) {
  const updatedUsers = users.map(user => {
    if (user.id === userId) {
      return {
        ...user,
        userName: userName
        // since the `userName` property name is the 
        // same as the value you could also 
        // just list `userName` once without the colon
      }
    }
    return user;
  })
  setUsers(updatedUsers);
}

function handleDeleteUser(userId) {
  const updatedUsers = users.filter(user => {
    return user.id !== userId
  })
  setUsers(updatedUsers);
}