If I have alot of `useState` and on the click of a button I call multiple `setHook`, does it renders multiple times or only once? 

e.g.

```
export default function setMultipleHooks() {

    const [hook1, setHook1] = useState(false)
    const [hook2, setHook2] = useState(false)
    const [hook3, setHook3] = useState(false)
    const [hook4, setHook4] = useState(false)

    const setHooks = () => {
        setHook1(true)
        setHook2(true)
        setHook3(true)
        setHook4(true)
    }

    return (
        <button onClick={setHooks} >Hey</button>
    )

}

```

Once I click the button, how many times does it render? 1 or 4 times?

Normally to check how many times the component is rendering, I just put a `console.log` in the `render` method, but with functional components, I'm not sure how to test this.

If it renders 4 times, it would be better to use only one `useState` (passing an object) if the 4 hooks are always related?