feat: for ionic-react project, when something is not really related to UI, you don't need to use react Component.

[jackzhp]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Please don't take what I said here too seriously, I am afraid that some people might overreact.

Just a discussion of design idea/paradigm: when things are not really UI related, we better not to put them into a react Component. I know it is ubiquitous that people using react put "almost everything" into react Components.

react is a good way, but if something is not really relevant to UI, then we don't have to use it and we should not use it. Not everything should wrapped into a react Component. Only things are really related to UI, then we put it into a react component. I mean in jsx & tsx files, we should not put things that are not really related to UI.

For example, things should not be on UI (in jsx & tsx files): Router, Authenticator, etc.

1. Router related UI: back/forward, and any transition, for those UI elements, you don't have to put the word "router". Router is not directly UI related, so it should not use a Web Component(ionic Router/IonRouter). Router could be a regular plain javascript object (or an instance of its class). I don't see there is any value to make Router a Web Component. IonRouter(Router) itself has nothing to present, so should not be a UI element, and it should not appear in App.tsx or any other UI directly related files. And it should absolutely not be "pure" in react sense, but what I see is class IonRouterInner extends React.PureComponent.

2. Authenticator related UI: some button clicks, a couple of textfield input, could be with security wary attributes, but for those UI elements, even though you really want to use "authenticator" as part of their names, their not UI related logic should be moved out of it. And it's counter intuitive for me to wrap everything inside a AuthenticationProvider. those kind of providers are not UI related, so they should not appear in all jsx/tsx files.

If UI & things not really related to UI could be separate a bit, then the implementation of a router/authenticator could be easily adapted to any UI frameworks.

any comment/critic are welcome!

Describe the Use Case

it's for general idea.

Describe Preferred Solution

just general idea.

Describe Alternatives

not related.

Related Code

not really needed.

Additional Information

none.

[jackzhp]

If you think I am wrong, please enlighten me. thanks.

[ShaneK]

Hey! Thanks for your issue.

Unfortunately, this issue is more related to the core design principles of React (sorry it's a legacy link, I couldn't find the modern version/don't know if they copied it over) and doesn't really belong here.

For example, the reason React Router is a component is for things like deeply managing and passing around context, this is the preferred pattern for this type of data passing in React. In react it's very common to use a component tree structure for propagating data.

Here's some more links that might help
https://react.dev/learn/thinking-in-react
https://legacy.reactjs.org/docs/composition-vs-inheritance.html (again, couldn't find the modern alternative, sorry)

If you'd like to avoid this style, you may consider using Vue or possibly just vanilla JS. I'm going to close this though, since it's not related to Ionic Framework and is more of a framework criticism of React.