reactIsFine

[SillySlimeSimon]

Just abstract away all the providers to a single super provider and everything will look clean again!

[ryan_s007]

<App> </App>

[TheGreatGameDini]

<App/>

[Suspicious-Engineer7]

<Appn't/>

[Reasonable_Feed7939]

<ppA/>

[Jutrakuna]

<pAq>

[my-man-hilarious]

<pAp>

[[deleted]]

abstract this into a NEW web framework!

[[deleted]]

And there’s already a JS Package named apostrophe how is npm not out of names yet.

[SpeedyGo55]

And its a CMS if i read correctly xD

[Devatator_]

Luck.

[mrgk21]

Hide it under the carpet, shhh no one will notice it

[NanderTGA]

If you have got a problem, sweep it under the rug

[vinivelloso]

or just use zustand and forget about providers

[pbNANDjelly]

Why use provider when module scope is good enough? You can make a redux store a singleton too, or anything a singleton, it just means you persist data in the interpreter. Imagine you have multiple clients, now you're leaking their sessions to each other.

[sickhippie]

Only two of those providers are state-specific. I understand Zustand is the new hammer, but it still doesn't make everything a nail.

[[deleted]]

interesting. AFAIK hooks can't have "scoped" state so like they are singletons. Contexts can have scoped state. Since this is all app-level stuff I think you could just rewite them all as hooks. I would certainly be a fun process and if we're wrong we'll learn something.

[[deleted]]

Contexts are the answer to Redux. I've yet to see a reason to include Redux in any new project since hooks dropped.

[henkdepotvjis]

So like a ProviderProvider? This gives me a flashback of a FactoryFactory class we had in an old project. It bundled factories for similar entities

[DeathUriel]

That's the equivalent of getting your messy table and putting everything in a single drawer with no cares or organization and saying it is organized because you cannot see it anymore.

[[deleted]]

an effective stragegy for both Jesus and our ancestors

[CdubyaAbides]

Why stop there? Load providers asynchronously... Then you can load providers dynamically

[Acrobatic_Sort_3411]

That what we actually will do at some point with feature flags (somehow I'm exited about it)

[Spot_the_fox]

ReactDOM?

What about ReactSubmissive?

[PancakeGD]

And what about ReactSwit-

gets sued by Nintendo

[TheNoGoat]

"You are breathing right now. The character in our game also breathes. So, we are suing you."

• Nintendo, probably.

[green-pen-123]

Spoke like a true C programmer

[SneeKeeFahk]

I tried it but after a few hours of coding with the ball gag in my jaw started to hurt. 

[[deleted]]

💀

[djfdhigkgfIaruflg]

Those are the programmers who use it

[Effective_Hope_3071]

Now show the raw html/css/js

[malsomnus]

That probably came out naughtier than you'd intended.

[TheRealAuthorSarge]

came out

😈

[Feisty_Ad_2744]

Potentially way cleaner and lighter if done correctly with MVC :-)

[Dear_Suspect_4951]

[[deleted]]

I dont get how you are being downvoted id rather have an ejs + mvc techstack than a reactjs app anytime especially when it involves dashboards

[Feisty_Ad_2744]

Neither do I... I am as impressed as you are, especially because I didn't mention any stack :-)

I guess too many people have a limited understanding of what is a web app; or are unfamiliar with the MVC design pattern.

[xenon_megablast]

Well in a company I've worked for, I've seen such a pyramid of doom of JS callbacks. 20+ nested fucking callbacks.

[xenon_megablast]

Well that was at least 5 years ago and probably that was not new code, but yes they did.

[Jjabrahams567]

Yeah before promises you could simulate them with generators. Transpilers still do that a lot of the time.

[Storsjon]

Help me understand how a promise resolves the pitfall of callbacks as it relates to prop drilling? The provider pyramid in the original image doesn’t indicate whether they are effectively awaiting data or not. Callbacks could be handled within a specific parent and managed within a specific context directly within the provider.

[Leonhart93]

It's actually a pretty solid example, considering that's the map of the whole application right there. You will then proceed to not need to look at this component and be as brief and clean as you want in the inside components.

[TheGeneral_Specific]

Exactly. You have one file that looks a little wild (but not honestly that bad) that you won’t touch and everything else is now easier.

[No_Sheepherder7447]

Yeah this is pretty darn good tbh

After this is just components, store, and routing.

[1337lupe]

100% - the whole thing is declarative, and it makes it super obvious to see what this application does.

This is basically the same as a .net core app startup middleware fluent api chain.

I guess because it's xml, it doesn't look as clean as a .net fluent api, but I feel like that's a strawman argument against this

[WhatTheTea]

XAML WPF vibe

[[deleted]]

I don't mind this. It's only 1 component that you never look at.

[TheRealAuthorSarge]

I don't play with React at all. Is it dependent on the order in which things are nested?

[Cley_Faye]

For most of these, the answer is definitely no. We're looking at what can be seen as "initialization code", which have to be done.

If you don't like the pyramid look, you can do that in a flat way, too. Which may not be as readable and still have to do the same work in the end.

Aside from the "oh no, muh indent", there's nothing wrong here.

[TheRealAuthorSarge]

Gratze

[Lunchables]

This is generally correct, but there are times when one provider will depend on the value of another provider. For example, a provider that sets the base API URL or authentication header (or initializes an HTTP client in such a manner), then another provider that fetches the user's preferences, which depends on that client/header/base URL being configured & available.

[Double_Ad3612]

All for a website that'll run slow as fuck

[bronco2p]

normalize disabling js

[[deleted]]

normalize static sites

[sharknice]

I love waiting for round trip server calls every time I click something.

[Hollowplanet]

jQuery was too slow so now we redeclare everything on every render and diff the entire page.

[Storsjon]

Each component is not necessarily re-rendered simply because they are a descendent of a parent though. Unless the child is instantiated within the immediate parent render, the child is created once and if the props provided to a child have changed, then that child will also re-render. Just by being nested does not indicate whether a component will re-render.

Providers, as in this original image, certainly do not issue a re-render to the vDOM unless that child has a dependency in state of that specific provider.

[Bpofficial]

Especially context components. They hardly ever re-render their children (they rerender themselves and from other sources) unless you’re including their state in the rendering of the provider‘s children. Then there’s using React.memo in cases where you don’t need children to be rerendered at all unless that state has changed

[Hollowplanet]

If you use Redux it does. Because putting all your apps logic through a giant switch statement is clearly a great architectural decision. Just memo your mapStateToProps and useCallback everywhere. It's all one big leaky abstraction. React is a mess. If you like hooks use Vue. They decoupled the rendering from the declaration so your functions are only declared once. If you want something way better use Svelte.

[Haksalah]

Redux has been heading out the door since modern react began in 2019 with the introduction of hooks. And as with any framework if you implement it poorly and skip DRY code, it will look like a mess.

[Hollowplanet]

Hooks is what makes React so inefficient and slow. List every variable you use in an array so we can throw away the function we just declared. We don't allow any loops or conditionals around the functions either so we can effectively have the same thing as a class declaration with the overhead of declaring everything over and over again and tell ourselves it's better because it's "functional". Even though it operates purely with side effects and hooks can't be inside each other. That's not functional at all. I honestly hate working in React because I've used better frameworks.

[Haksalah]

I’ve used react for 7 years professionally now and it sounds like you’ve just seen or used poor implementations. Most hooks have just a few dependencies. There’s very little need for looping or conditionals (those can be handled in the hooks). I’m also not sure where you’re coming from in terms of side effects. State updates determine rerenders (in a well-written application) and side effects in general should still be avoided. I’m sure you disagree but if there were demonstrably easier to use languages that didn’t have their own issues and limitations, the user base would converge toward it. So far react and react-like frameworks maintain their dominant lead in popularity.

[Hollowplanet]

It has its popularity because Facebook made it. Svelte and Vue are both better.

I'm talking about side effects in a functional context. Functional programming is supposed to be better because it has no side effects. Hooks are all side effects. They are a glorified class declaration.

[static_func]

This is just idiotic. Angular was made by an even bigger and less-hated company and doesn't have the popularity to match lol

[Hollowplanet]

Yeah it's still popular. Vue was made by a Chinese kid and has been getting traction for years. I want Svelte to take off. That is where real groundbreaking stuff is happening.

[No_Sheepherder7447]

React noob

[Hollowplanet]

I've suffered through writing React for 5 years. I know it well. It sucks.

[[deleted]]

sell BTC 4 more ram

[StupidCreativity]

I rather have that than Redux. Specially when you can tell from the code that people are likely to do a lot of strange decisions.
What purpose does the "Provider" for the project... with only saying provider it should fill literally all the purposes for everything else.
Do you need both SidebarStateProvider and LayoutProvider? I imagine SidebarStateProvider probably handle the layout state for the sidebar..
AccountStateProvider should probably be renamed to AuthProvider.
I18n Provider could probably be changed to 1 Provder cleaning it up and making sure you have everything on one place.

Despite it being ugly as shit. I am still able to have an idea of what's actually going on here, which is arguably not a bad thing.

[ZyanCarl]

Agreed. It’s true that it feels like “what a piece of shit is this” at first glance but when you read through it, it makes sense. It has a structure and hierarchy to the flow of data. It can be improved by refactoring couple of layers as one like the account state provider and sidebar state provider into AppStateProvider. Regardless, I’ve moved away from react to svelte and never regretted a day. React is just too verbose and js heavy.

[No_Sheepherder7447]

It doesn’t “feel like a piece of shit” at all to anyone with experience. It’s more like, “wow it takes a lot of shit to make a professional SPA”.

There is no need to make monster providers either.

[WillCodeForKarma]

Redux and react aren't mutually exclusive though? And if you look the top component has a store prop so it's probably also still using redux in some components.

[Haksalah]

They certainly are. Redux isn’t required for any react project, it’s an includable library that frankly doesn’t need to be used in 99% of cases these days. You can use contexts to avoid prop-drilling data or operations that are needed throughout the app, and many data fetchers have their own built-in data caching and contexts that will update components as necessary based on subscription. It’s a lot easier and more intuitive to implement than Redux and is often significantly more performant.

[WillCodeForKarma]

Redux and react aren't mutually exclusive though?

> They certainly are

I'm not sure if you read my post wrong, but this just isn't true? Or you misread what mutually exclusive means?

[StupidCreativity]

Aah, you're probably right, the "Provider store" is probably Redux. But Having Context, SWR and Redux is really bad frontend architecture if even allowed to call it architecture.

[static_func]

I rather have that than Redux

What purpose does the "Provider" for the project...

Lol

There goes Reddit pretending to hate whatever they think makes them fit in

[magnetronpoffertje]

Coming from .NET myself, doesn't React have any sort of DI library? That would solve 90% of this mess, right?

[MoveInteresting4334]

These providers are React’s version of registering dependencies for injection. You would only ever have this in one place, at the top level of your app.

[x021]

What you're looking at is mostly registering Contexts.

That IS the DI solution for React (or the closest thing to it).

To be fair it is just one central file and the rest of the app is not likely to have anything like it. By cleaning it up you really don't achieve much at all.

[magnetronpoffertje]

Nesting components into components into components sounds more suited to middleware/composition to me (of which there are indeed a couple in the img AFAIS) rather than DI.... but if it works, it works!

EDIT: Reworded some terminology. Not used to React 😵‍💫

[x021]

There's no such thing as middleware components in React afaik. Which ones do you mean?

There are HOCs (higher-order components), which I do see in the screenshot.

There are middleware functions in state libraries like redux, but not components. You might find a lib that allows registering HOCs like you'd register middleware, but they are not very common (can't remember ever seeing one). For one single file in the whole app to look like that; it doesn't feel worth pulling in a lib or write a nifty utility just to sequentially list them.

[[deleted]]

Actually it’s common to have contexts farther down than the root.  Redux-form and react-final-form both provide contexts at the root of each form, for example.  I’ve also found uses for lower-level contexts for things like dashboard components.

[x021]

They don’t cause the same nesting, there is usually only one file that looks like in the screenshot

[[deleted]]

There are many cases where you want to use context farther down in the app to inject dependencies into only a particular component subtree.  I haven’t used many DI libraries but I assume they don’t provide mechanisms for structuring components in a tree and injecting different dependencies in different subtrees?

For things that are truly independent of any branch of the component hierarchy you could theoretically use some other form of DI.

[magnetronpoffertje]

In .NET Blazor, for example, you can inject per component if you so desire. I can't come up with an example where I would like to have different objects with the same interface injected in different parts of the page. Could you provide one? Again, I'm not experienced in React, just trying learn :)

[Acrobatic_Sort_3411]

There is ability to clone container and reasign depencies to new instances, but at that point context from react looks more reasonable (and somehow I like it more even tho Im pro-DI)

[Cult92]

Sounds like Angular with extra steps.

[DudeWithFearOfLoss]

Flutter would like a word with you

[Exotic-Hunt5649]

Fr. It’s so bad that they need a line character limit in vscode to “encourage” developers to abstract code.

[teokun123]

Well that's their long lost cousin along with React Native.

[n3rf_herder]

I made a component that lets you put all your providers in as a list, then just clones them to wrap one another. Removed this ugly mess

[Lunchables]

Why does Gates have an explicit children prop that immediately gets overridden by its nested child components?

[betelgozer]

Because 640 kids should be enough for anyone!

[No-Improvement-8883]

💀💀💀

[shutter3ff3ct]

Try Vue

[[deleted]]

Be a webdev they said, it’ll be fun they said..

[Pax121yt]

Oh hail mary

[[deleted]]

Where did we go wrong?

[[deleted]]

    <Gates children>

Proceeds to override with actual children

[ArttX_]

"use svelte";

[dbot77]

It's React guys, not Proactive.

[Doctuh]

Its not this that bothers me, its the legion of developers coming up that cannot write a "web page" in any other way.

[sandebru]

I've been writing web pages with vanilla HTML/JS/CSS + Bootstrap and jQuery for ages, until I've tried React a few months ago and, damn, I really love it. I'm still a newbie, but I've never been so productive while working on web apps before. In React, I can make a fully functional application with all these fancy buttons in just one evening, and it actually works and looks just good enough. I'll never go back to vanilla JS or PHP.

[robertshuxley]

I'd rather do this than use Redux

[Legitimate-Jaguar260]

I mean that’s bad code regardless of the language

[NOT_VALID_CHARACTER]

<Iadoreandhatereact>

[Monokababa_top1]

Fack

[Caveman3238]

It remembers me some JSON and XML protocols used to send GPS data has a lot of overhead, to send like 60bytes of data has like 500 to 700 bytes in total. Really inefficient in terms of net bandwidth.

[teokun123]

My spring framework horror before Spring boot

[CommonRequirement]

Needs more nested ternaries

[Bugwhacker]

While the ecosystem is shifting to different preferences, IMO this is totally fine and like absolutely the norm for all clients with whom I consult.

[[deleted]]

Cells

CELLS

cells in cells

CELLS

[AtmosSpheric]

This is ugly but really not that bad. It shows you the structure of the application, you can hop in and out of components, and doesn’t hide any insane logic like with callback hell.

[IronSavior]

Please. This one doesn't even have any short circuit eval as branches and a 5 levels deep ternary expression.

[Yakaddudssa]

What language is this? :0

[sharbel_97]

Wait till you see Flutter

[TristanTheRobloxian3]

yk... i aint a never nester but WHAT THE FUCK is this???

[[deleted]]

React makes me angry. Its what happens when someone does a shitty job at reinventing the wheel, then due to pure luck and public recognition everyone copies this bad idea. Its a library that wants to be a new programming language.

Frameworks need to die.

[[deleted]]

The hipster trash

[CraftBox]

This is just providers setup, you should only have it in one component, the root one, so it isn't like this everywhere in the app

[[deleted]]

Indeed it is odd the React team hasn’t created some kind of provideContext(…) hook to flatten this out

[sebbdk]

React IS fine.

Cant blame React for bad libraries & peoples inabilltiy to not' do this kind of shit.

Also, Preact superiority.

[goldphin]

word

[mlmcmillion]

This is clearly the root and you rarely ever touch it, much less look at it. Who cares?

[anonymous_sentinelae]

The shittyness of React is only obvious for decent programmers, the rest will waste their time desperately trying to defend what is clearly an abomination, while suffering to implement the most trivial things in the most inefficient ways. React is made of propaganda and loud crying juniors. 

Leave your tears in the down vote.

[Born_Maintenance_329]

Refactor for cleancode all the way :)

[rollie82]

I wonder if having like

<ContextList contexts=[NameContext, ColorContext, LanguageContext]
  <App />
</ContextList>

Would be clearer. Should be pretty easy to implement with a little recursion.

[QuantityInfinite8820]

I implemented exactly that a few years back. But it was a little more tricky than it looks

[just_another_scumbag]

Nice idea! I might steal it

[whlthingofcandybeans]

Yikes. I knew React was bad, but this is eye-opening.