[Mantine UI Series] useListState & useSetState

[reboottime]

Overview

This article discusses two hooks supported by mantine/hooks:

• useListState
• useSetState

We will also explore the general pattern used in their source code ( as well as that of some other hooks , such as useDisclosure).

• The result of calling the two hooks mentioned above is an array,
• with the first element being the state and the second element being the handlers bundled into an object.

Besides, this article also covers the suggestions from official React documentations about how to handle mutable values, such as object, array, in React state management.

[reboottime]

Managing mutable state variables in React.

• Arrays and objects in JavaScript are mutable, but you should treat array/object React State as read-only. Here is an example of what is workable and not workable.

  • Not workable:

    user.name = 'newUser';
    users[0].name = 'newUser';

  • Workable:

    setUser({ ...user, name: 'newUser' });
    
    const [firstUser, ...restUsers] = users;
    setUsers([{ ...firstUser, name: 'newUser' }, ...restUsers]);

• Besides, for array-type React state, you should not use methods that mutate the array, such as push and pop, as these kinds of methods don't change the state variables referencing value.

• Workaround solutions:

  • One shortcut solution is to use immer.js, such that you can manipulate object-type React state like how you manipulate JavaScript variables.
  • If you do not use immer.js to resolve the mutable issue, one practical way is to use clone deep of lodash, such that every piece of a mutable object(array) doesn't point to the old value.

• References:

  1. https://react.dev/learn/updating-arrays-in-state
  2. https://react.dev/learn/updating-objects-in-state

[reboottime]

useListState

Detailed documentations:

• the official documentation and
• the source code

By utilizing the useListState hook, we can manipulate an Array-type state variable in React without disrupting the rendering trigger mechanism, similar to how we handle JavaScript array variables when working with mantine/ui and React.

Under the hood, useListState encapsulates a bunch of functions that have taken care of the immutable logic of Array type of React state variables already, seeing following:

[reboottime]

useSetState

When working with Object type React state variables, we face the same issue like working with Array type React state variables, the grammar to update part of the variable is cumbersome. For example, for the following code:

 setSensor({
    displayName: 'newSensor',
 });

the sensor data will be erased and only the displayName field value is kept.

useSetState resolves above pain by wrapping the exposed setState with state updater function. Let's take a look on the source code