I was under the impression that a second "setter" method param was needed for setting variables to state with the useState() hook. For example, in the following line of code, "widgets" would be used to get widgets from local state but setWidgets() would be needed to set widgets to state:

const [widgets, setWidgets] = useState(new Map<string, JSX.Element>());

However, I inadvertently wrote code to set widgets directly to state via the widgets state variable:

widgets.set(...)

I confirmed that this approach is successfully setting widgets to local state. Was the second param required in earlier versions of React hooks and the useState() hook has been simplified to support a single parameter as described above? If so then do you know in which version of React this was introduced? Or am I possibly doing something in my code that is only making me think that the 1-param useState is valid?

CodePudding user response：

Maps, Sets and other complex objects can be updated, but you won't trigger rerenders by calling they're native methods, as the object reference itself would be the same. The overall effect of this becomes evident on these type of state values being passed down through props or context.

The proper way of handling setting state on this type of object is something like this:

setWidgets(prev => {
  prev.set(id, value);
  return new Map(prev);
})

This ensures that the object reference is updated so that changes are properly propagated.

CodePudding user response：

widgets.set(...) is wrong. It might seem to work depending on how it is used, but the state should always be updated immutably using the second element of the array returned by useState (setWidgets).

You can update the map immutably like this:

setWidgets(prevMap => new Map(prevMap.set(key, value)))

BTW storing JSX as part of the state is bad practice.