Render Once for Multiple set States using useState hook in React

Question

Is there a way to refresh / render a function component once after updating multiple states?

For example:

const [first, setFirst] = useState(false);
const [second, setSecond] = useState(false);

when called ...

...
setFirst(true);
setSecond(true);

... then the component will refresh twice. Is it possible to set both and refresh (or render) only once?

Answer 1

You can use your states as an object and set them in one instead of separete states like

const [exampleState, setExampleState] = useState(
  {fields: {
        fieldOne: false,
        fieldTwo: false
        }
   })

You can set in this way

    setExampleState({...exampleState, fields: {
        fieldOne: true,
        fieldTwo: true
        },
   })