Think of series of `useXXX` as declarations, not function calls, then everything will make sense to you.

The declaration parts are always static and in the exact same order for the same component.

When you see a state less function

    ToggleButton = () => {
      const [flag, setFlag] useState(false)
      const [count, setCount] useState(1)
      const useEffect(()=> {....})

      return <button onClick={() => setFlag(!flag)>{flag}</button>
    }

View it as a component with two separate sections, behavior declarations and actual rendering:

    Component ToggleButton
      // declarations
      hasState: "flag" setterName: "setFlag"
      hasState: "count" setterName: "setCount"
      onEffect() { .... }

      render() {
        return <button onClick={() => setFlag(!flag)>{flag}</button>
      }
    }

Then you will see that reliance on hook ordering being the same is what you always do when you write a declarative code anyway.