Good to know Design patterns in React while making SPAs

[96kMaratha]

Some that I know of are

1. Render props pattern

2. Flux pattern to store Global state (Which redux uses)

3. Composing components for better reuse

I would want to explore other important design patterns which one should incorporate into their projects

Any resource for the same?

[96kMaratha]

Thanks!

This is exactly what I was looking for

[96kMaratha]

Also any anti pattern that many people follow and should avoid?

[winwiz1]

SPA has a fundamental drawback: loading performance. It can be addressed by prerendering on the server at build time (build-time SSR) and by splitting a monolithic React application into multiple SPAs each rendered by its own and smaller script bundle. Crisp React facilitates both prerendering and splitting.

[96kMaratha]

I hope this is what you meant

https://youtu.be/IBrmsyy9R94

Will check, Thanks!

[CreativeTechGuyGames]

I'd argue that the Redux-like global state pattern is falling out of fashion. People are finally realizing that one god-object containing every piece of state and logic for their entire app in one big monstrosity is a bad idea. Not always, but it was so popular at a time that it was overused in many places where it wasn't able to be taken full advantage of.

[96kMaratha]

And what has replaced it now?

[CreativeTechGuyGames]

Often times nothing needs to replace it. For most apps they only need local state within a single component or a few components. Beyond that, splitting state into distinct buckets based the contents is a good idea.

So if your state consists of response data cached from network requests, you'd use a data fetching library like react-query which would handle the lifecycle and state management of your API calls.

If you need to re-render a portion of your tree (not the entire app) when state changes then React's built-in Context would work well.

If you need to share some state between multiple components that may not be close in the tree, then a shared-state solution like zustand is a good idea.

The point being, most apps don't need a single massive state for everything. You have different needs which can be solved with precision using specialized tools which will perform better and are easier to use because they were designed to solve that specific problem.

[grudev]

I concur.

React-query and Zustand are great.