DEV Community

Omri Gabay
Omri Gabay

Posted on

2

Can someone help me understand the direction React design patterns are moving in?

Before Hooks were really a thing, the most definitive design pattern I had experienced in React was the "Redux with Container Components that encapsulate Presentational Components" pattern. There was a very clear distinction between Class-based (stateful) components, and Functional (stateless, presentational) components. You'd be encouraged to "Lift state up" and -- from what it seems like to me -- store as much state as you can in a single container component so that it can be drilled down maybe 2 or 3 levels at most to presentational components. More levels than that, and you were probably looking at a new Stateful component.
And of course, all Class/Stateful components were connected to Redux store.

Then Hooks came about, and the line between "which components should or shouldn't have state" became very blurry. And let's not even bring up Context.
An aside: I'm not even sure if Context is considered a stable enough solution (yet) to replace Redux completely for apps of all sizes. Context usage seems like the wild west at this point between people trying to use it exactly like Redux, to people building libraries like reactn and constate around it, and using each Redux reducer as an individual context or something. Who knows.

Are Hooks supposed to encourage us to decentralize state by writing more stateful components? Or are they just supposed to be a new paradigm for writing stateful components, and the idea of big centralized stateful components isn't going away?

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (1)

Collapse
 
vonheikemen profile image
Heiker •

the line between "which components should or shouldn't have state"

That line should still be in the same place. If we are talking about state management, using hooks or context is an implementation detail.

Are Hooks supposed to encourage us to decentralize state by writing more stateful components?

I don't think that's the goal. Hooks are a way to reuse logic, that's it. They act (kinda) as a replacement for mixins or the higher order components pattern.

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❀ or a friendly comment on this post if you found it helpful!

Okay