MUI React - please consider going fully stateless

[thealjey]

I, for example, would like to have a tab bar that navigates between separate pages using normal links.
Letting the user fully control and manage the state (or lack there of) just gives much more flexibility, not to mention might even simplify your own api.
This goes even further though, like dropdown closed/open state etc.

again, love this project
cheers 🥇

[amorey]

Happy to hear you like MUI! In terms of using links to control tab state, you should be able to add an href to the anchor tags in each tab and then control the component using the mui--is-active class server-side. Would this solve the problem for tabs?

[thealjey]

yes and no, tabs have initialSelectedIndex and not selectedIndex (or both), which implies it's only for the initial render
as opposed to always producing the same result given the same set of props
the reason is that the component manages it's own state internally, which ideally it shouldn't
furthermore, onChange shouldn't be post factum, but simply be the means of notifying the client code that the user requested a tab change and which specific tab it is
or even better, why even have onChange at all, tabs already have an onClick prop, as well as href?
also, what if I want to have the tab bar rendered completely separately from the tab panes, in different parts of the page (or even in a portal)?
all of these complexities disappear, however, if you simply make the component stateless

and, of course, I could do everything using css classes, but then I would just be reimplementing the Tabs react component which already exists in the library

consider this example instead

<Tabs>
  <Tab active onClick={this.changeTab}>Tab 1</Tab>
  <Tab onClick={this.changeTab}>Tab 2</Tab>
</Tabs>

<div>Pane 1 or 2 (decided by client code)</div>

you see how all complexity goes away immediately?
all the component is responsible for is styling

and it's just one component, that was just an example
I was writing more in general, in terms of React best practice

[amorey]

Sorry, I thought you were referring to the CSS/JS library. With regards to React, you can use selectedIndex and defaultSelectedIndex to control the state for controlled and uncontrolled components respectively (I'll document this soon). That should work for rendering state server-side. Do you also need to save the current client state to the server?

There are currently two events emitted by the Tabs component, onChange and onActive:

<Tabs defaultSelectedIndex="2" onChange={this.onChange}>
  <Tab onActive={this.onActive} label="Tab 1">Content 1</Tab>
  <Tab onActive={this.onActive} label="Tab 2">Content 2</Tab>
</Tabs>

Do you know of another library with a Tabs component with a more fleshed out event model?

[thealjey]

in fact I don't, they are all overcomplicated and over-engineered unnecessarily (some more than others), it is like people completely miss the whole beauty of the simplicity of react, which is its best quality
so in the end I always resort to reimplementing the components myself, using the provided css, if possible
this whole issue was just a cry of desperation I guess, because this seems like the kind of library I could be using for years to come, and so I want it to be the best it can be 😊

[thealjey]

with regards to the Tab component, I want to use it specifically with the Next.js router, which means that it has to support the onClick as well as the href props

[Rob-pw]

@thealjey, have you considered making a pull request - since you may know more about React best practices than designers who happen to make React components? I imagine they would appreciate having a specialist aid them or even implement these types of changes and improvements for them, empowering the MUI team with freed up time to focus on the core of the CSS component catalogue.

[amorey]

Yes, a pull request (or a spec document) would be very helpful!

[thealjey]

@Rob-pw there's no need to be sarcastic or defensive about it, I don't claim to be the best react specialist in the world
my personal subjective opinion is that people tend to overthink things, there must be a reason, and I don't know what it is

@amorey if you want me to create a pull request that removes all of the functionality from the Tabs component, if you're generally open to the idea of "dumbing down" the components, I'll be more than happy to do that

[Rob-pw]

@thealjey, actually it was a compliment, I'm not specialised in React at all and have only a amateur working knowledge of it (as may be the case with CSS specialists with React not being their area of expertise). I've just stumbled upon this project but have a predisposed sensitivity to small teams being pulled from their strengths and core purpose.

[amorey]

@thealjey A pull request would be useful but writing up a spec might be a better place to start. That way we can get feedback from others before making changes to the code.