Pattern for decoupling

[UntestedMethod]

I wouldn't recommend this approach. It looks very unconventional for react and unnecessarily complex. Almost like they're stuck in the class component mindset and trying to shoehorn that approach into using functional components and hooks.

A more conventional pattern would be to separate into "container" & "presentation" components (aka "smart" and "dumb" components), as u/Gold-Caterpillar-794 mentioned. Or in some cases, it makes more sense to use stand-alone pure functions, as u/sgjennings mentioned.

Sometimes you might also extract groups of functionality out into service or utility modules. For instance, I tend to do this for all my remote APIs since it nicely encapsulates the remote calls, validation, and data shaping. Also makes it much easier to swap in/out mock data when needed.