setState() hook - setting state variable directly?

Question

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?

Steve -Cutter- Blades · Accepted Answer · 2022-01-25 20:34:23Z

1

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.

answered Jan 25, 2022 at 20:34

Steve -Cutter- Blades

5,4623 gold badges30 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ramesh Reddy · Accepted Answer · 2022-01-25 20:37:40Z

1

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.

edited Jan 25, 2022 at 20:37

answered Jan 25, 2022 at 20:31

Ramesh Reddy

10.7k3 gold badges22 silver badges38 bronze badges

3 Comments

Steve -Cutter- Blades Over a year ago

I totally missed that they were trying to store JSX in state. You're right. Not a good idea.

react0r Over a year ago

can you please explain why setting jsx in state is a bad practice/idea?

Ramesh Reddy Over a year ago

@react0r The state is meant for storing the state of the application. You can create as many components as needed that return the JSX you want for reusability.

Collectives™ on Stack Overflow

setState() hook - setting state variable directly?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related