Having a separate useEffect certainly scatters your code, but it helps prevents bugs that cause your states/effects to go out of sync.

If you use a callback on setState in order to listen for async state updates like

  setState({ myState: 'newValue' }, () => { this.doSomething(); });

then a week later, when you add some different code calling setState({ myState: 'newValue' }) somewhere else without remembering to add the callback, your callback won't run! Callbacks kind of break the declarative/reactive model.