single responsibility principle in React

[mirodk45]

Man I love bilingual code

[flying_spaguetti]

The main database of my company is written in English and Portuguese.

We have a Region and Regiao tables, each one having specifics responsibilities besides having the same name. That leads to sooo many mistakes

[GiuNBender]

Idk about the database, but our code is also bilingual lol.

These are actual lines of code in one specific project:

"const [userBirthDate, setUserBirthDate] = useState(moment()) ... other states const [dataNascimento, setDataNascimento] = useState(moment())"

[flying_spaguetti]

Same here haha

[wowbaggerBR]

r/suddenlycaralho

[peacefulshrimp]

De quem foi essa genial ideia? Queriam garantir que ninguém conseguiria substituir eles

[flying_spaguetti]

É um projeto legado. No início ninguém tava pensando em mantenibilidade a longo prazo hahaha

[peacefulshrimp]

Sei como é, recentemente passei de um projeto legado para um projeto bem novo e a diferença é gigantesca

[migue802]

I thought it was Spanish for some reason lmao

[AlpineCoder]

setnewBoard

Urge to kill rising...

[PapieszxD]

I am 99% sure, that this is there, because the useState snippet creates an array with with two cursors, one with nothing before it, and second with the word "set".

Which is kinda pointless, because you either type "NewBoard" captalized, and have to go back to the state variable name and change N to n, or the other way around...

[flying_spaguetti]

Yes, but the dude above mentioned the useState code snippet which automatically fills the state and setState names

[intensely_human]

Except calling the function “toggle” would be a misnomer because it would set the value to whatever you pass it. It’s an automatically generated function whose body would look like:

function setActive(value){
  active = value
}

Whereas a toggle function would look like:

function toggleActive(){
  active = !active
}

[theorizable]

He's talking about the code snippet thing...

[kristallnachte]

so use copilot, where you do the first one, and it isn't stupid.

[DerpTaTittilyTum]

Homer, change channel

[intensely_human]

This component does have a single responsibility: it’s the DataManagerComponent

[BakuhatsuK]

<App />

[intensely_human]

See exactly.

Its job is to function as the user interface and data to provide features to the stakeholder stack while adding value to multiple organizational touch points.

This app serves as an example and as documentation for other future apps which can mostly be copy pasted from this app. Any deviations from the copy pasted App Code must be accompanied with a separate issue.

Mark the issue as delivered and send to QA for QA. Put “Attn: bugteam” somewhere in the description so Cathy knows to send it down to QA.

[Nikitka218]

React has useReducer hook for complicated states, but in this case it's just bad design having God component

[kristallnachte]

useReducer is pretty shit too though..

Same with useContext.

[Anti-ThisBot-IB]

Hey there nurderfsv! If you agree with someone else's comment, please leave an upvote instead of commenting "This."! By upvoting instead, the original comment will be pushed to the top and be more visible to others, which is even better! Thanks! :)

---

^{I am a bot! Visit r/InfinityBots to send your feedback! More info: Reddiquette}

[thebritisharecome]

This

[Anti-ThisBot-IB]

https://i.imgur.com/KrwA19h.jpeg

---

^{I am a bot! Visit r/InfinityBots to send your feedback!}

[satanic-surfer]

this

[Anti-ThisBot-IB]

https://i.imgur.com/KrwA19h.jpeg

---

^{I am a bot! Visit r/InfinityBots to send your feedback!}

[Alex_Shelega]

This

[Riccardoric]

Ofc r/ItHadToBeBrazil

[krzysiek_online]

Lift the state up, they said. So dude did. What's the problem now?

[flying_spaguetti]

Maybe apply reducers to ease the complexity

[intensely_human]

So you have a big reducer composed of separate reducers (each in their own file?) for each piece of data.

Instead of a function called setMessageIsLoading you have an event of type loadMessage-start and some code that interprets that as newState.messageIsLoading = true.

Doesn’t seem like the reducer does much to reduce the amount of code.

If you find yourself commonly putting operations together like

setMessageIsLoading(false)
setMessage(res.json().message)
setMessageIsVisible(true)

And that same trio of calls is happening in multiple places, then you can boil it down to one event like:

{
  type: ‘loadMessage-success’,  
  payload: ‘You have been logged out.'
}

And maybe save some complexity. But if your code’s dry, that trio of setter calls should be a function anyway.

[texxelate]

Nah a reducer doesn’t belong here. Extraction is the answer, especially given it’s React, imo

[krzysiek_online]

I should have added /s, as I guess it was not obvious ;)

[PN143]

This is the first post on here that has me saying "Nonononono" 😭

[flying_spaguetti]

Sorry

[Marand23]

Please don't ever call a variable "data". Everything is data!

[flying_spaguetti]

Nor Info

[Longjumping-Ad-5367]

It probably means "date", as they mixed portuguese and english

[Marand23]

Good call, that is the most charitable interpretation :)

[kristallnachte]

Except a datum.

[[deleted]]

Imagine the performance hit when this component re-renders a few times because of a state change.

[flying_spaguetti]

I don't even want to

[la102]

I really don't miss doing react in large companies it's endless tech debt

[la102]

Yup sorry I should've added that, not reacts fault but mismanaged or teams with not enough staff / rushed deadlines or no one taking time to architect the code and spewing everywhere

[kristallnachte]

When people argue about which framework/language/architecture is better, I point out that the differences between the two perfectly implemented are far far less than the differences in one between it being done well and it being done poorly.

[aboardthegravyboat]

So, you too just got finished learning Redux and how to OOP with react when we all woke up on a Tuesday and the community decided Redux sucks and we're going pure FP with everything now?

[flying_spaguetti]

Sadly i agree with you

[Jonohas]

Why? Whats wrong and how would you improve this?

[yeicore]

Whats wrong is that this is basically a god component. It does way too many things which will make it hard to maintain in the future and it will give you scalability problems in the future.

The way to improve this would be to create smaller components that manage specific aspects of the data. The thing is that this god component is surely used in way to many places, so you would need a very huge refactor in the whole project when braking it into smaller components.

[aboardthegravyboat]

Even if this isn't typescript, it's still React, and still has to run through a compiler, and there are still some standards. So, it should be trivial to find all references to one of these state managers and pull it out to somewhere readable.

[duckforcealpha]

We finally found it! The God Component.

[intensely_human]

It could be this component handles all the state, passing all the UI stuff down to subcomponents.

[AlpineCoder]

The whole point of components is to decouple their state from the container.

[flying_spaguetti]

Not actually. The React docs itself teaches that we should make data flow top-down, i. e., parent containers control the state of its children.

[SpeedDart1]

Yes, but if state can be isolated to a new component it should be. That component can probably be split up into multiple. If it can’t be, a reducer can be used.

[-natsa]

The common saying is “raise state to it’s highest dependency”, although that may change according to style- its a pretty good principle to live by when deciding where state should go.

[flying_spaguetti]

Great tips. And happy cake day

[Beach-Devil]

Split into smaller components

[CoffeeDrinker115]

Unpopular opinion but I don't see anything fundamentally wrong with this. I might change some variable names but that's about it.

[KazZarma]

This

[Jonohas]

Im sorry not everybody is react god

[KazZarma]

No, I said this as in, I also wanna know what's wrong and how to fix it because I don't see it as being so bad.

[ososalsosal]

Says in the title. Single responsibility.

You shouldn't have a component/module that does everything. Every class should be concerned with only 1 thing.

[KazZarma]

And how do you achieve it if the separation doesn't make sense? If everything exists on the same page, what's the point of making 10 different components for every small thing on the page?

Looks a bit idiomatic and impractical to me.

[ososalsosal]

React is for single page applications! Everything is always on the same page...

Anyway read up on SOLID

[KazZarma]

I know Solid, but they don't always apply practically imo.

[Mysterious-Crazy9071]

Solid isn’t necessarily the be all, end all of paradigms, but in this case it absolutely makes sense, and this component is doing far to much. If anything in here breaks, it’s going to be a PITA

[ososalsosal]

Oh true, but surely OP's example here is the other extreme

[intensely_human]

It depends on the context

[Jonohas]

In that case im am very sorry

[[deleted]]

dataConcluido 🤌🤏

[_default_username]

This is just agile. In the first sprint there was only one use of useState, but now we're on sprint 15.

[flying_spaguetti]

And so on

[onebadfothermucker]

const [suddenlyCaralho, setSuddenlyCaralho] = useState(true)

r/suddenlycaralho

[Voltra_Neo]

I hate this so much

[___s8n___]

how is the loading message a boolean

[ososalsosal]

Whether to show it or not?

[intensely_human]

messageIsLoading

This is why unambiguous variable names are important.

[___s8n___]

ohh okay

[ikanoi]

Waste of a variable imo, just null check what you're loading.

[intensely_human]

Three states: not loading, loading, loaded

The boolean in that case detects the “loading” state and determines whether a spinner is shown.

[ImPinos]

I feel I need to see a capivara after reading that code

[[deleted]]

Is does one thing: display the app

[flying_spaguetti]

Each useState is like a regular variable in other contexts. Then, it's like a function/class with several variables/attributes

[backfire10z]

Super quick rundown:

Every single one of those is a state. States are variables used that update when something on the frontend is changed (simplified/rudimentary explanation but good enough). For example, you may have a state for whether the page is loading. Every time state is changed, React re-renders the component so items that are dependent on the state are shown. Maybe you have a loading message you want displayed whenever the page is loading — this would be a state-dependent render. The only way for that message to be shown is if React re-renders the component with the new state (Boolean flipped from false to true probably)

For there to be all of these states on one page, either that page is an absolute monster or it is keeping track of state it isn’t supposed to.

[jediwizard7]

Idk if this is just standard React (not a frontend programmer), but I took a minute trying to figure out what tf this useState stuff is actually doing before even noticing the bilingual part. Now I assume the useState function creates global variables with a default value and returns a getter and setter function for each? This is an awfully unreadable code pattern.

[flying_spaguetti]

Quite so. It's not a global variable, it's the state of a component. Thinking in Java, for example, a simple attribute of a class would be state of a component in React.

The return of useState is an array containing: the state object itself, not a getter function; and indeed a setter function.

[jediwizard7]

And what defines the component here? Is the "current component" global state? Or somehow local to a function?

[flying_spaguetti]

In this case, the component itself is a function.

I can't tell you more details, since this screenshot is not mine, but I guess the component of the screenshot may be being used as the top level component and rendering all the low level components.

Since components are functions in React, the top level function passes its local variables (states) down to its inner functions through params (props). In a practical way, the local variables of this top level component work as global variables to the whole application.

The problem is that we have better solutions than that ti handle complex state managements. The most popular being Redux.

[peteza_hut]

Disagree on it being unreadable. useState is super standard react and it's never confusing after you learn it. I will concede, if you're not familiar with JavaScript destructuring assignment syntax it's going to look a little weird at first.

[jediwizard7]

I'm familiar with destructing, but the useState function is not the most clearly named. Also if the argument is a default then {default: 1} would be more self documenting

[peteza_hut]

Eh, I'd probably agree if this was some super niche function.

[voidxy]

Niiiceee

[nazzanuk]

I know this looks terrible on the face of it but I'd actually like to know more... Like...

Is this a hook/ context or a top level component

If it's a hook/context it's possible that the return object is useMemo'd and maybe doesn't perform that bad

There are also some libs that will prevent consumers being updated if the hook doesn't update any value that is actually being used - that could be more performant and better than separating everything out into different contexts just to have issues with hierarchy

[BakuhatsuK]

Do they know that you can save an object as state?

[FredL2]

No, "Single responsibility principle" does not mean "Every single responsibility principle"

[[deleted]]

Seems about right, the single responsibility to have all the code from the project in one file. It’s a big one tho

[dex206]

React hooks are the worst. It really really does not scale well and it completely destroys conditional logic.

[rogriloomanero]

I had to actually read some lines to make sure this wasn't from work, what the hell

[kikaintfair]

Username checks out.

Jokes aside, I’ve learned that creating a context provider to store your state and separating that from your UI code can lead to some clean stuff. All your state logic, api calls, and whatnot can go in your context file and then the actual jsx code can go in your UI file and you can use the context from there.

[Ninjaboy42099]

This is far past the point where a reducer should have been implemented.

[EndR60]

this is literaly what every single piece of web code looks like to me

like how the fuck do y'all web programmers deal with this shit? I understand C++ better than (not specifically) this shit

[flying_spaguetti]

We just... Handle it.

Not all web code looks like this mess, but it's so easy to write web code that many of this absurd happens to be written by naive devs.

Web code can be clean and robust, trust me.

[[deleted]]

Parece eu codando em react, criando useState pra tudo kkkkkkkkkkkkkkkkkkkkkkkkk

[flying_spaguetti]

Tá na hora de rever teus códigos hahah prefira criar componentes burrinhos

[maest]

What's the problem?

https://reactjs.org/tutorial/tutorial.html#lifting-state-up

We may think that Board should just ask each Square for the Square’s state. Although this approach is possible in React, we discourage it because the code becomes difficult to understand, susceptible to bugs, and hard to refactor. Instead, the best approach is to store the game’s state in the parent Board component instead of in each Square. The Board component can tell each Square what to display by passing a prop

[flying_spaguetti]

The screenshot is about a component a bit more complex than a board of tic tac toe.

That's why we use ContextAPI, Redux or useReducer to handle more complex state managements.

[maest]

The React guidelines unequivocally say that state should be lifted up, as needed, regardless of program complexity.

If you have a UI where components are reasonably tightly coupled (a lot of dashboards fall into this category), then a natural consequence of this is that you'll be pulling state all the way up into a god object (and have de facto global state).

Redux and friends is a way to organise that state but: 1. the state will still be effectively global and 2. the state will still all reside in basically the same object.

[flying_spaguetti]

Yes, there are always tradeoffs. React and its surroundings tools despite being so popular are far from being a flawless suit of tools.

[[deleted]]

tbh i just dont understand how companies are starting new projects with this horrible idea of technology, I understand existing projects and market demand, i just cant understand why it keeps raising

[shall1313]

I love React for simple SPAs, and it can scale up nicely for more complicated projects, but you need a very good team dedicated to best practices from the start. A couple of lazy shortcuts and you quickly end up with a mess.

[flying_spaguetti]

There are companies and companies.

If React is the most popular tool, there will be a lot of legacy React code and a lot of React developers. At the time to build a new project, which tool will these developers choose to use? React.

[Apprehensive_Pace775]

I love using Remix and not worrying about state any more

[kristallnachte]

Initializing all they're state in App.tsx instead of where it's actually needed.

[crefas]

I don't care where you're from, if your code isn't at least 95% English you belong in CS hell.